ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

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

人気記事が表示されない原因とjQuery軽量化

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

ゆめぴょん(@yume_pyon)です。こんちはっ!

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

コピペでOK!WordPress Popular Postsで新着と重複なしのカテゴリ別サムネイル付の人気記事表示コピペでOK!WordPress Popular Postsで新着と重複なしのカテゴリ別サムネイル付の人気記事表示33 shares

WordPressプラグイン「Popular Posts」で、カテゴリー別のサム…

WordPress Popular Postsでカテゴリ別サムネイルつき人気記事一覧!SEO対策にもWordPress Popular Postsでカテゴリ別サムネイルつき人気記事一覧!SEO対策にも

このブログではプラグイン「Popular Post」でサムネイルつき人気記事の一…

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

【WordPress】サムネイル付の新着記事一覧をカテゴリー別でプラグイン不要で表示する方法【WordPress】サムネイル付の新着記事一覧をカテゴリー別でプラグイン不要で表示する方法18 shares

このブログではサイドバーに、カテゴリー別の最新記事一覧を表示しています。テーマを…

WordPress Newpost Catchで新着記事一覧!カテゴリ別サムネイルつきでWordPress Newpost Catchで新着記事一覧!カテゴリ別サムネイルつきで15 shares

WordPressプラグイン「Newpost Catch」を使うとサムネイル付き…

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

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

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

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

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

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

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

WordPressで13プラグインを減らして高速化する方法まとめWordPressで13プラグインを減らして高速化する方法まとめ105 shares

WordPressプラグインは便利ですが、多用しすぎると高速化を阻害する要因にも…

ついでにjQuery読込みの軽量化も実施

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

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

  1. フッター部で読み込んでるjQuery2を削除
  2. wp_head()の上に、jQuery2のCDN版を設置
  3. wp_head()で読み込むjQuery1をfuncrionsで削除
  4. スマホでは、人気記事カウントを中止

jQueryをフッターからヘッダーへ移動

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

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

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

wp_head()でjQueryを読み込まないようにする方法

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

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

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

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

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

【WordPress高速化】プラグインのCSS・JavaScriptを削減・圧縮・まとめる方法【WordPress高速化】プラグインのCSS・JavaScriptを削減・圧縮・まとめる方法

WordPressプラグインやテーマには、独自のスタイルシートやJavaScri…

スマホ表示では高速化のため、カウントしない設定に

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

【WordPress】Multi Device Switcherでスマホテーマ自動切替!Androidタブレット対応方法も【WordPress】Multi Device Switcherでスマホテーマ自動切替!Androidタブレット対応方法も

WordPressプラグイン「Multi Device Switcher」を使う…

【WordPress】条件分岐で高速化!スマホ・ホーム・特定カテゴリで無駄表示しない方法【WordPress】条件分岐で高速化!スマホ・ホーム・特定カテゴリで無駄表示しない方法23 shares

WordPressでブログを作成していると、スマホとタブレットとPCや、記事とホ…

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

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

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

まとめ:今日のゆめぴょんの知恵

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

  • WordPress Popular Postが動かない原因はjQueryだった
  • このプラグインは上方にjQueryが必要
  • テーマファイルをいじって、少しだけ軽量化に成功
  • スマホ版では高速化のためカウントしないことにした!

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

WordPressサイト高速化でSEO対策!17の表示速度アップ術WordPressサイト高速化でSEO対策!17の表示速度アップ術17 shares

ブログ表示速度の高速化についてはいろいろ書いてきました。今後は表示速度が遅いとG…

【Web制作】スマホサイトの高速化!pagespeedで93点達成の攻略方法【Web制作】スマホサイトの高速化!pagespeedで93点達成の攻略方法28 shares

スマホ用テーマデザインでサイト作成した時に実装した、表示の高速化に関するチップを…

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

【Wordpress高速化日記】プラグインやテーマが読み込ませる.css,.jsファイル数を関数で減らしてみた|ウェブシュフ
[M] Jetpackのサイト統計情報を取得して人気記事を表示するWordPressカスタマイズ | mbdb (モバデビ)

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:Feedly Insight 購読者数の推移グラフ表示のWordPressプラグイン!RSS登録を増やす方法ウェブ制作やSEOも解決!アイコンWebフォントLigature SymbolsはLINE・はてブも使えるよ:次記事»
ページ
↑先頭
ホーム