Simple GA Rankingプラグイン　～人気記事ウィジェットをGoogle Analyticsに変えて高速化を図る

この記事は約11分で読めます。

2016-12-24WordPressカスタマイズ,WordPressプラグイン

質問者の写真

サイドバーに人気記事表示したいけど、定番プラグインの「WordPress Popular Posts」入れると重い……
 
解答者の写真
じゃあ、代わりに「Simple GA Ranking」はどうかな？
Google Analyticsのデータ使ってランキング表示する仕様だから、サーバーに負担かけないわよ
 

WordPress Popular PostsからSimple GA Rankingに乗りかえるメリット

人気記事を表示する定番プラグインとくれば、圧倒的に「WordPress Popular Posts 」（以下、WPP）。
多くの方は何の疑問もなく、WPPを利用しているのではないでしょうか？

しかし実はWPPって結構重いプラグイン。
「WordPress Popular Posts　重い」で検索すると、結構出てきます。
そのためコメント数を基準に、自分で人気記事ウィジェットを作って表示している方もいらっしゃいます。

質問者の写真

でも、コメントのつかない、うちみたいな零細サイトはどうすれば！
 

あと、もう一つ。
私個人の心理的な問題でアレなんですが……同じ機能を持った複数のプラグイン使うのが単純に気持ち悪いというのあるんですよね。

自分自身がページビューを確認するのはGoogle Analyticsを見れば事足ります。
そして管理画面で見られると便利なので、専用のプラグインを入れてます。

 

さらに当時はプラグイン経由でスニペットを設置していました。

だったら人気記事もGoogle Analyticsのランキング表示できないかなあ。
そんなことを考えてなんかいいのないかなあと検索して回っていたところ、引っ掛かったのが「Simple GA Ranking」でした（以下、GA）。

GAはGoogle Analyticsのデータを人気記事として出力してくれるプラグイン。
おまけにサーバーへの負担はWPPと比較して、かなり軽いらしい。

質問者の写真

望み通りじゃん！
 

人気記事ウィジェット完成図

使っているテーマLuxeritasのデザインに合わせています。
抜粋は表示していませんが、表示したい方に向けてもコードを記しています。

Simple GA Rankingの導入方法

始めに断っておきます、かなり面倒です。

解答者の写真
でも心折れませんように
見返りは必ずあります
 

まず、プラグインのインストールをいつもの手順で。
プラグイン→新規追加→「Simple GA Ranking」を入力→インストール→有効化。

Google Analytics APIの取得

GAは、プラグインをインストールしてもすぐには使えません。
使うためにはAnalytics APIと連携してクライアントIDとコンシューマーシークレットを取得して認証する必要があります。
しかし、その手続が実に面倒。
我慢して進めて下さい。

なお、googleアカウントは持っていることを前提とします。

以下、手順です。

【2020/2/11追記】
現在、Google Developer ConsoleのGUIが変わっています。
以下の手順は過去のGUIですが、やること自体は同じです。

管理画面→サイドバーの「設定」から「Simple GA Ranking」を開きます。
URLが書かれているので、テキストファイルなどにコピペしておきます（大事です）。
青文字で書かれたgoogle API consoleをクリックします。

左上のドロップダウンメニューからプロジェクトを作成を選びます。

適当な名前を入れて保存します。
次いで「APIを有効にする」をクリックします。
analyticsAPIをクリックします。
探しづらいので御注意を。

「有効にする」をクリックします。

画面右の「認証情報を作成」をクリックします。

 

「クライアントID」をクリックします。

「ウェブアプリケーション」をチェックして「作成」を押します。

承認済みのリダイレクトURLに、メモしておいたプラグイン設定画面記載のURLを入れます。

「クライアントID」をクリック。
（名前と作成日が違ってますが気にしないでください、既に作成していたIDで画像を作成しています）

ようやくクライアントIDとシークレットIDが出てきました。

設定画面の記入欄にコピペして完了。

質問者の写真

めんどくさすぎる！
 
解答者の写真
おつかれさま
 

コードを作成する

Simple GA Rankingはデータを出力してくれるだけ

実は認証を終えても、まだ使えません。
認証を終えてGAのウィジェットをサイドバーに登録しても、人気記事のタイトルが並ぶだけです。

質問者の写真

文字が出てるだけじゃん！
こんなの、いくら軽くても使いたくないよ！
 

GAは単純にデータを出力してくれるだけ。
実際には自分でカスタマイズする必要があります。

コード：ループ部分。

まずはPHPコード。

<div id="n-p-r">
<?php if (function_exists('sga_ranking_get_date'))
 $ranking = sga_ranking_get_date();
 $args = array(
 'post__in' => $ranking,
 'posts_per_page' => 10,
 'orderby' => 'post__in',
'ignore_sticky_posts' => true,
'cat' => array( 除外したいカテゴリIDにマイナス記号をつけて),
);
 $my_query = new WP_Query($args);
 if($my_query->have_posts()):
 while ($my_query->have_posts()) : $my_query->the_post(); ?>

こちらの記事を参考にしました。

ウィジェットに表示する数は、次の箇所を変更します。

'posts_per_page' => 10,

次の記述がないと、先頭固定記事が上位に表示されてしまいます。

'ignore_sticky_posts' => true,

次の箇所は、除外したいカテゴリがなければ削除してください。

'cat' => array( 除外したいカテゴリID ),

私はお知らせカテゴリを除外しています。お知らせカテゴリのIDは私の場合ですと60。
そのため、次のようにしています。

'cat' => array( -60 ),

質問者の写真

カテゴリIDって何！？
 

という方は、こちらの記事をどうぞ。

表示部分

テーマによって場合分けしています。
先のコードに続けて、各自のテーマに対応したものを追記してください。

テーマがLuxeritasの場合

<div class="n-p-r-card toc clearfix">
<div class="term n-p-r-img"><a href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumb100' ,array( 'alt' =>get_the_title())); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="<?php the_title(); ?>" width="100" height="100" />
<?php endif; ?></div>
<div class="n-p-r-title">
<a href="<?php the_permalink(); ?>" class="n-p-r-titlea><?php the_title(); ?></a>
</div>
</div>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
</div>

Luxeritasのデザインをそのまま引き継げるように、予め指定されたクラス名を使ってます。
抜粋は削除しています。
必要であれば、次の箇所を変更してください。

<div class="n-p-r-titlea">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>

↓

<div class="n-p-r-titlea">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php echo get_the_excerpt(); ?>
</div>

テーマがLuxeritas以外の場合

<div class="noluxetoc clearfix">
<div class="noluxepopimg"><a href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail() ): ?>
 <?php the_post_thumbnail( 'thumb100' ,array( 'alt' =>get_the_title())); ?>
 <?php else: ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="<?php the_title(); ?>" width="100" height="100" />
 <?php endif; ?></div>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
</div>

クラス名の「noluxe～」は私がわかりやすいように付けたもの。
任意で変えて下さい。

抜粋をつけたい場合は次の通り変更してください。

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

↓

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<div class="noluxeexcerpt">
<?php echo get_the_excerpt(); ?>
</div>

ウィジェット化

以下の記事を参考にして、先述のコードを記述したPHPファイルを作成し、ウィジェット化してください。

もし直接ウィジェットにしたい場合は、こちらの記事が参考になると思います。

CSS

Luxeritasの場合

/************************************
**　GA
************************************/
.n-p-r-img img{
margin-right:15px !important;
}

これで新着記事ウィジェットと同じスタイルになります。
ホバー効果とかもちゃんと働きます。

Luxeritas以外

.noluxepopimg{
max-width: 100px;
height: auto;
float:left;
margin-right:10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
.noluxetoc{
margin-bottom:10px;
}

Luxeritasっぽくしています。
ただ、

解答者の写真
各自のテーマの新着記事で使われているクラス名にあわせれば、この箇所は省略できます
 

その方がCSSの量を減らせますし、CSSを調整する手間も省けていいと思います。

抜粋をつけ、かつモバイルでは消したいという場合は、次のコードを追記してください。

@media screen and (max-width: 768px){
.noluxeexcerpt{ display: none;}
}

個人的にはパソコンでも抜粋は入れない方がいいと思います。
見づらくなりますので。

設定

管理画面のサイドバー→設定→Simple GA Rankingを開きます。

上で期間の設定ができます。

下は表示数とありますが、実際には集計件数。
カテゴリごとに集計したり、特定カテゴリを除外するときに意味を持ちます。
通常は表示したい件数そのままで構いませんが、「思ったより少ない！」という時は増やしてみて下さい。

まとめ

解答者の写真
手順はかなり面倒なのが正直なところね
でもやった甲斐は絶対あるはず
頑張って実装してみて！
 
この記事を書いた人：天満川 鈴

広島市内のパチンコホール勤務。
３号機時代からのパチンカス。

ADHD、精神障害者手帳３級所持。

慶應義塾大学商学部→国家一種経済職→公安調査庁。
在職時は国際テロ、北朝鮮を担当。

「小説家になろう」の底辺作者。
朝鮮総聯へのスパイ工作を描いた小説「キノコ煮込みに秘密のスパイスを」はアマチュア小説ながら週刊誌報道され、話題となった。

Posted by 天満川 鈴