Luxeritas で ランキング を軽量表示！『 Simple GA Ranking 』の活用術

2019年2月19日

WordPress を使って魅力的なサイトを作成するうえで、 人気記事を ランキング 表示してくれるプラグインは非常に有用なツールとなります。まず結論から申し上げますと、SEO対策（ Google PSI のスコア ）を考慮するのであれば、『 Simple GA Ranking 』が非常に軽量でオススメです。

しかしながら、同プラグインでサムネイル表示する場合、一歩間違えると WordPress が停止するリスクをはらんでいます。そこで本記事では、本サイト（ Luxeritas ）において正常稼働しており、実績のある実装方法をご紹介したいと思います。

お読みになった皆さまのご参考になれば幸いです。

 

Google PSI でハイスコアを目指すなら軽量なプラグインを！

『 Popular Posts 』は有名だが、PSI にはマイナス…

Luxeritas は、ランキング表示用のウィジェットを搭載していません。このため、ランキングを手軽に表示するためにはプラグインを活用する必要があります。但し、プラグインなら何でも良いわけではありません。可能な限り軽いプラグインを選定することが重要になってきます。

結論を申し上げますと、最も有名なプラグイン『 Popular Posts 』は非常に重く、正直、お勧めできません。具体的には、PSI の ”改善できる項目” において、同プラグインのレンダリングの遅さを指摘されてしまいます。

 

 

軽量だが、サムネイル表示する際には要注意『 Simple GA Ranking 』

『 Simple GA Ranking 』とは？

同プラグインは、Google Analytics のデータを利用してランキング表示するためのプラグインとなります。インストールは少し手間ですが、公式サイトにおいて動画付きで説明されております。非常にわかりやすいので、是非、ご覧いただければと存じます。

 

サムネイル表示には『 function.php 』の編集が必要？

但し、同プラグインのランキング表示機能は、サムネイル無しで記事名をリストするだけです。このため、後述の通り、サムネイル付きで表示しようとすると、『 function.php 』を編集する必要があります。

 

『 function.php 』は一歩間違えると WordPress が動作不能に！？

本サイトにおいて、一番丁寧にご説明したいのが本節となります。

前述の通り、サムネイル付きでランキング表示しようとすると『 function.php 』を編集する必要があります。しかし、同PHPファイルの編集は非常に危険であり、一歩間違えると WordPress が停止します。

私自身の失敗談にもなりますが、他サイトで紹介されていたPHPを追記したところ、サイトが閲覧不可となった上に、 WordPress の管理ポータルにもログイン不可となりました…

luxeritas & simple ga ranking

 

本サイト（ Luxeritas ）で実績のある『 function.php 』をご紹介！

サーバ等の動作環境も含めて、現在、本サイトにおいて実績のあるコードをご紹介いたします。是非、ご参考にしていただければと存じます。

但し、私の環境と著しく異なる場合には、予め SFTP 等でサーバに接続のうえ、『 function.php 』を直ぐに復旧できるようにした上で作業してください。

 

本サイトの動作環境

項目 現状
レンタルサーバ さくらのスタンダードプラン
WordPress 5.0.3
テーマ（親） Luxeritas 3.5.8
テーマ（子） Luxeritas Child Theme 3.0.0

 

『 function.php 』への記載内容

//サムネイルの登録
add_theme_support(‘post-thumbnails’);
add_image_size(‘thumb100’,100,75,true);
//サムネイルの作成
function sga_ranking_thumb_4536($thumbnail, $id) {
$post_url = get_permalink($id);
$title = get_the_title($id);
$thumbnail = ”;
if( has_post_thumbnail( $id ) ) {
$post_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $id ) , ‘thumb100’ );
$post_thumb_url = $post_thumb[0];
$post_thumb_width = $post_thumb[1];
$post_thumb_height = $post_thumb[2];
$img = ‘<img’;
if( function_exists(‘is_amp’) && is_amp()) {
$img = ‘<amp-img layout=”responsive”‘;
}
$thumbnail = ‘<figure class=”sga-ranking-thumb”><a href=”‘.$post_url.'” title=”‘.$title.'”>’.$img.’ src=”‘.$post_thumb_url.'” alt=”‘.$title.'” title=”‘.$title.'” width=”‘.$post_thumb_width.'” height=”‘.$post_thumb_height.'”></a></figure>’;
}
return $thumbnail;
}
add_filter(‘sga_ranking_before_title’, ‘sga_ranking_thumb_4536’, 10, 2);

 

『 style.css 』への記載内容

.sga-ranking-list figure {
float: left;
margin-right: 20px;
width: 100px;
height: 75px;
overflow: hidden;
}
.sga-ranking-list {
margin: 0.8rem 0;
padding-bottom: 0.8rem;
border-bottom: 1px solid #e1e1e1;
text-align: left;
}
.sga-ranking-list::after {
clear: both;
content: “”;
display: block;
}
.sga-ranking-list:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.sga-ranking-list figure a {
display: inline;
}
.sga-ranking-list a {
overflow: hidden;
line-height: 1.4;
}

 

 

まとめ　～ function.php 編集時には万全の態勢で！ ～

本記事では、私自身の失敗談に加えて、本サイトにおいて実績のあるコードをご紹介しました。

私が失敗談を通じて得た教訓は、リスクの高い PHP コードを編集する際には、SFTP や SSH で予めサーバに接続し、万全の準備を整えた状態で実施することが大切ということです。至極当然のことのようにも聞こえますが、管理ポータルから直ぐに戻せば大丈夫、ぐらいに思っている方も多いのではないでしょうか。私だけかもしれませんが…

是非、皆さんには、私のような失敗を経験されないようご注意いただければと存じます。末筆にはなりますが、お読みになった皆さまのご参考になれば幸いです。

 

Wordpressネタ, お役立ち情報