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

2018-07-14

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

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

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


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

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

 

 

ページ速度

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

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

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

 

Google のツール「Test My Site」

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

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

 

Google のツール「PageSpeed Insights」

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

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

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

 

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

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

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

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

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

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

 

どうすればいいか

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

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

 

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

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

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

 

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

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

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

 

WordPress Popular Postsの問題

導入方法

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

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

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

 

ページ表示速度が遅い

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

これは厳しいですよね。

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

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

 

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

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

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

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

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

 

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;
}

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

 

まとめ

いかがだったでしょうか。

この方法は新着記事と人気記事をWordpressで表示するには最適な方法だと思います。

特に人気記事の方はこの方法だと「本当のランキング」になるので自分でデータベースをいじって意図的なランキングは作れなくなります笑

ページ速度をGoogleのツールで改善し、ユーザライクなブログにしていきたいです~

 

 

〜コピーライティングの力をつけよう〜

コピーライティングのための教本の決定版!

「消費者はどういう心理からレスポンスするのか?」の文章の書き方を身につける!

Webで「成果を上げる」ための文章の書き方の実用書。

消費者の購買心理を研究し多くの人から大絶賛されている本です。

2018-07-14サイト運営wordpress

Posted by akikubo