【WordPress】人気記事と新着記事を表示するならコレだ！【速度改善】

ワードプレスでブログを始める人は僕も含め多いでしょう。

他のブログを参考に新着記事と人気記事をカッコよく表示したかったので、直ぐにプラグインを設定してました。

新着記事に「Newpost Catch」を使ったり、人気記事に「WordPress Popular Posts」など。

「WordPress Popular Posts」はあの有名なバズ部でもオススメされているので使っている方は多いかもしれません。

僕はずっと使っていましたがある時を境にやめました。

ブログをはじめるときは「コンセプト」が大事です！

https://web-ksf.com/before-you-begin

ブログのジャンル選びに悩む方はこちらを参考にしてください～

副業の勉強が「本業でも武器」になる「仕組み構築型の可能性」副業の時代が来ましたね。ネット上やSNSなどで副業の情報がたくさん出回り始めてますが、ほとんどが何かの作業に対する報酬という「時間の切り売り」ばかりです。これじゃあアルバイトをするのと変わらないですよね。...

2019年はブログのおかげで副業年収７ケタ突破!!

これからの働き方をして思った７つのこと僕は目の前のことに集中して働いてきました。それこそが仕事であり、「働く」ということだと思ったから。けど答えはわからなかったです。そりゃそうだ。自分でコントロールできない部分ばかり。だから決めたんです。...

ページ速度

それはプラグインを使うことによりサイトが重くなり、サイトの表示速度が低下するからです。

特に人気記事用の「WordPress Popular Posts」の方はページを表示ごとにDBへ書き込みに行くのでかなり遅くなります。

この二つをやめただけでGoogleのスピードテストで数秒早くなり、評価点数もあがりました。

Google のツール「Test My Site」

これを使うことによりモバイルの速度を検証してくれて結果を教えてくれます。

URLを張るだけでとても簡単ですし、無料レポート付きです。

モバイルサイトの速度テスト

Google のツール「PageSpeed Insights」

モバイルとパソコンのウェブページのコンテンツを解析し、ページの読み込み時間を短くするために分析してくれます。

さらに分析結果としてどの部分に問題があるか教えてくれます。

PageSpeed Insights

そもそも画面表示関係のプラグインはできる限り使わないのがベストです！

プラグインの機能は素晴らしい

どちらも機能としては優秀です。

まさにユーザの希望通りの機能を持っています。

しかもサイトを運営し始めた頃は記事数も少ないので「全然遅くないからいいか」、「こんくらいの速度がでてるならいいよ」と思うかもしれません。

ですが、しばらく使っていると直ぐに影響がでてきます。

その時に入れ替えるなら最初からプラグインを使わない方がいいです。

どうすればいいか

ページ速度を落とさずに表示するには、どうすればいいかわからない方も多いでしょう。

一つずつ問題を解決していくしかありません。

プラグインなしで新着記事を表示

他にも方法はたくさんあると思いますが、僕はWordpressのテーマに新着記事をカッコよく表示してくれるテーマにしました。

しかもそのテーマは表示速度が速くて有名で、上にあった「Test My Site」と「PageSpeed Insights」で100点満点です。

Luxeritas は SEO 最適化済み、多機能なのに高速な無料の WordPress テーマです

遅い理由を改善して人気記事を表示

こちらも方法はたくさんあるでしょうが、僕はそもそも「WordPress Popular Posts」が遅い理由に着目しました。

まぁ、そもそも導入方法も最悪ですよね。

WordPress Popular Postsの問題

導入方法

最新版をインストールしても動きません。

データベースにテーブルを作りにいかないのです。

どのバージョンにすればいいか忘れましたが、わざわざ古いバージョンを探してきてインストールしてから最新バージョンにする必要があります。

ページ表示速度が遅い

ページ表示ごとにデータベースへ書き込みをするから。

これは厳しいですよね。

改善する方法として自分のデータベースを使わない方法を考えました。

自分の所で処理をするから遅いので別の所から情報を引っ張ってくればいいんじゃないか？と皆さんも思いませんか？

自分のデータベースを使わない方法

Googleのアクセス解析であるアナリティクスの情報を使えばいいんです。

この記事を見てる方はしょっちゅうアナリティクスを見てますよね？

見てないかな？　僕は見てます笑

これが実現可能なプラグインは「Simple GA Ranking」です。

Simple GA Ranking

Simple GA Rankingの導入方法

一人で考えながらやると失敗する人が多く、ハードルは高いです。

ですが以下のサイトで全て画像付きの手順があるので簡単に導入できました。

【WordPress】サーバ負荷が軽い「Simple GA Ranking」プラグインで人気記事ランキングを表示する方法

必ずSimple GA Rankingのデザインを変更する

「WordPress Popular Posts」のようなデザインにできますのでご安心ください。

上のサイトだとデザイン部分はわかりにくいかもしれません。

僕は以下の設定にしましたのでこちらをお使いください。

※ここのサイトを参考にしましたが、function.phpの部分をそのままコピペすると改行の関係でソースがエラーになります。Wordpressにアクセスできなくなりますのでご注意ください（もしなった場合はレンタルサーバのファイルマネージャーから該当ファイルの追記部分を削除すればアクセス可能になります）

上の※の部分はよく見てもらえればわかりますが、不安な人も多いでしょうしソースに詳しくない方のために用意しました。

function.phpのみになります。これ以外は上のサイトをコピペで問題ありません。

add_filter(‘sga_ranking_before_title’, ‘showRankingImage’, 10, 3);
function showRankingImage($ret, $id, $cnt) {
$post_url = get_permalink($id); // 記事のURL
$title = get_the_title($id); //タイトル
$ret = “”;
if( has_post_thumbnail( $id ) ) { // アイキャッチ画像の有無
$post_thumb_src = wp_get_attachment_image_src( get_post_thumbnail_id( $id ),array( 75, 75 ) );
$post_thumb = $post_thumb_src[0];
$ret = “<div class=’ranking-img’><a href=\”{$post_url}\” title=\”{$title}\”><img src=\”{$post_thumb}\” alt=\”{$title}\” title=\”{$title}\”></a></div>”;
}
return $ret;
}

更に僕は一部カラーを変更してるので以下のようになります。