WordPress Popular Postで人気記事が表示されない問題を解決！jQuery軽量化も

ブログで直帰率を改善するための、人気記事の表示方法は下で確認してください。先週末、利用しているプラグインPopular Postが、動かないトラブルにあいました。原因と解決方法と軽量化について共有します。

ゆめぴょんです。こんちはっ(^^)/

ブログやウェブサイト制作では、直帰率や回遊率の改善も欠かせません。その1つの方法が、人気・関連記事の表示です。WordPressでの設置・設定方法は、下記事を参考にしてください。

人気・関連記事や、新着記事の表示は、Googleに対しての内部リンク施策にもなり、インデックス化を促進できるかもしれません。

このブログでもサイドバーと、記事の下に設置しているのですが、先週末になぜか表示されなくなりました。その原因と解決策について紹介します。

WordPress Popular Postが動かない原因はjQuery

なぜか急にブログの人気記事一覧が表示されなくなりました。ブログのテーマは毎週いじっているため、心当たりはたくさんありました（汗）

まず原因を究明するために、管理画面⇒設定⇒WordPress Popular Postで統計情報を確認しました。やはりページビュー数がカウントされてません。

この時点で、なんとなくJavaScriptかデータベースの問題だと思いました。試しにjQueryを、後方からヘッダー上部へ移したら、人気記事のPVカウントがはじまりました。jQueryが原因でした。

実は前日に表示の高速化のために、プラグイン利用のjQueryを後方へ移動したことを思い出しました。以前もやってましたが、いくつかのプラグインで不具合を起こしたので解除してました。

ところが最近、下記事のようにWordPressプラグインを大量に減らしたので、jQuery依存もなくなったと勘違いしてしまいました。Popular Postも使ってたんですね。バージョンアップしたからかな。

原因がわかったので、人気記事はこれまでどおり表示されるようになりました。でもjQueryの読込み重複は無駄だし、Popular Postの使うjQueryのバージョンも古くて気に入らないため、少し改善しました。

具体的には下のような流れです。

まず私はjQueryを、フッター部分で下のように読み込んでいました。軽量化のためバージョン2を使ってますが、古いIEなどに対応したい場合はバージョン1を使ってください。

このプラグラムは、GoogleのCDNサービスを利用しているため、ローカルで読み込むよりも高速化を期待できます。ちなみに非同期コード「async」「defer」ははずしてください。人気記事がカウントされなくなります。

[html]

[/html]

この1行をフッター部から削除して、ヘッダーテーマファイル「header.php」の中の「wp_head()」より上方へコピペしてください。

次に、ヘッダー部の「wp_head()」で勝手に読み込まれるjQueryを削除というか、読み込まないよう設定します。

テーマファイル「functions.php」を編集します。WordPressで最重要ファイルです。修正前には必ずバックアップをとってください。もし問題が起こったらすぐ元に戻してください。全て自己責任でお願いします。

具体的には「functions.php」に下のようなソースコードを記述するだけです。

[php]
function my_scripts_method() {
wp_deregister_script(‘jquery’);
}
add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );
[/php]

「WordPress Popular Post」プラグイン以外でjQueryを利用している場合も影響を受けますので、実施後の確認は入念にお願いします。問題がありそうなら、元に戻しましょう。

ここまでやれば、jQueryの重複読み込みもなくなり、むしろ少しだけ軽量化することに成功しました。この方法はwp_foot()や、CSSでも使えます。下の記事を参考にしてみてください。

このブログのスマホ版は、下のプラグインを用いて別テーマで表示しています。同一テーマの場合は、下記事のとおり条件分岐で対応できます。

スマホでは表示の高速化が特に重要になるので、人気記事のカウントはしないことにしました。

具体的には、jQuery2を後方においたままにして、上のとおりfunctions.phpにコードを記述して、wp_head()のjQueryも削除しています。

これによって、スマホでのみ人気のある記事は人気記事一覧に表示されなくなりますが、今のところそれほど違いはありません。ブログジャンルによって違うでしょうから、各自で判断してくださいね。

今回の記事内容をざっくり言うと。

高速化・軽量化については、下記事も参考にしてください。

また、wp_deregisterに関してはウェブシュフブログの記事がわかりやすいです。Popular Postの代わりにJetPackを使って人気記事を表示する方法は、mbdbブログで紹介されてます。参考にしてください。

ゆめぴょんでした。ちゃおっ！