小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

Simple GA RankingでGoogle Analyticsを利用した人気記事ウィジェットを作ってサイトを高速化する(Cocoon完全対応)

カスタマイズ&プラグイン
この記事は約15分で読めます。

本稿ではWordPressプラグイン「Simple GA Ranking」(以下、GA)の紹介をします。
Google Analyticsのデータ使って人気記事ランキング表示する仕様なので、サーバーに負担かけないのが売り。
入れた効果は確実にあります。

だけど、すごく面倒くさいよ!

Google Analytics APIの取得にPHPからCSSの作成に至るまで。
うっかり手を出したらぶん投げたくなるレベルです。

しかし私の側でPHPとCSS(Luxeritas、Cocoon、その他)は用意しました。
特にCocoonはCSSすら不要です。

最初の手順だけ、なんとか乗り越えて下さい

【2021年5月15日追記 バージョン2.1の不具合について】

現時点で最新版の2.1はエラーで動きません。
前バージョンの2.0.11を入れてください。
方法はこちらの記事にあります。

Simple GA Ranking ver2.1&2.1.3をアップデートして動かない場合、前バージョンに巻き戻す方法
人気記事表示プラグインSimple GA Rankingがバージョン2.1にアップデートされました。 ところが更新してしまうと画面が崩れます。 wp-con...
スポンサーリンク
この記事を読む方へのオススメ

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

人気記事を表示する定番プラグインとくれば、圧倒的に「WordPress Popular Posts 」(以下、WPP)。
多くの方は何の疑問もなく、WPPを利用しているのではないでしょうか?
しかし実はWPPって結構重いプラグイン。
「WordPress Popular Posts 重い」で検索すると、結構出てきます。

Cocoonにもアクセス解析および人気記事ランキング機能がついています。
しかしGoogle Analytics入れてるのに、さらにアクセス解析入れるのはどうも……。

みんなGoogle  Analyticsを入れてるんだから、そのデータで人気記事ランキング作れればいいのに
Simple GA Rankingならそのものズバリのことができるわよ
Simple GA Ranking
Ranking plugin using data from google analytics.

サーバーへの負担はWPPと比較して、かなり軽い。
CocoonでもGoogle Analyticsを入れているならアクセス解析機能を外せる。
まさに神プラグインです。

スポンサーリンク

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

Luxeritas

抜粋は表示していませんが、表示したい方に向けてもコードを記しています。

Cocoon

私はサムネイルを正方形型に変えていますが、もちろんデフォルトの横長でもいけます。

スポンサーリンク

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ファイルを作る

ga.phpというファイルを作ります。
その中に、各自のテーマに合わせて「ループ部分」と「表示部分」をコピペしてください。

コード:ループ部分(共通)。

まず、これを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(); ?>

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

Simple GA RankingでWordPressに人気記事を表示
WordPressでSimple GA Rankingの設定方法と人気記事をテーマに合わせて表示させる方法を紹介しています。

Cocoonは1行目を変更してください。

<div id="n-p-r">

<div class="new-entry-cards widget-entry-cards no-icon cf border-square">

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

'posts_per_page' => 10,

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

'ignore_sticky_posts' => true,

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

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

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

'cat' => array( -60 ),

質問者の写真

カテゴリIDって何!?

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

WordPressでカテゴリIDを調べる
本稿ではWordPressのカテゴリIDを調べる方法を紹介します。 管理画面サイドバー「投稿」→「カテゴリ」を開きます。 IDを...

表示部分

テーマによって場合分けしています。
前項のループ部分の直下に追記してください。

Luxeritas

ga.phpに次のコードをコピペしてください。

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

Cocoon

ga.phpに次のコードをコピペしてください。

<a href="<?php echo esc_url(get_the_permalink()); ?>" class="new-entry-card-link widget-entry-card-link a-wrap" title="<?php echo esc_attr(get_the_title()); ?>">
<div class="new-entry-card widget-entry-card e-card cf") ); ?>
<figure class="new-entry-card-thumb widget-entry-card-thumb card-thumb">
<?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb120' ,array( 'alt' =>get_the_title())); ?><?php else: ?><img src="<?php echo get_template_directory_uri(); ?>/images/no-img-120.png" alt="<?php the_title(); ?>" width="120" height="auto" /><?php endif; ?></figure>
<div class="new-entry-card-content widget-entry-card-content card-content"><div class="new-entry-card-title widget-entry-card-title card-title"><?php the_title(); ?></div></div>
</div>
</a>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
</div>

Cocoonの新着記事ウィジェットを簡略化したものです。

注意点として、日付・抜粋は入っていません。
私の使っているイノセンススキン準拠のためです。

もし抜粋が必要であれば次の記述に変えてください。

<?php the_title(); ?></div>

<?php the_title(); ?></div><div class="entry-card-snippet card-snippet e-card-snippet">
<?php echo get_the_snippet( get_the_content(''), get_entry_card_excerpt_max_length() ); ?></div>

これで多分いけると思います。

サムネイルを変更したい場合は次の箇所を変更してください。

<?php the_post_thumbnail( 'thumb120' ,array( 'alt' =>get_the_title())); ?>

thumb120を他のサムネイルに変えます。
あとに続くwidthとheightもそれに応じて変えます。

サムネイルの新規登録・変更についてはCocoon公式ページを御参照ください。

Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集
Cocoonのサムネイルサイズを制御するサンプルコード集。

Luxeritas・Cocoon以外のテーマ

<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ファイルのインクルード

以下の記事を参考にして、ga.phpをショートコードで読み込めるようにしてください。

WordPressの記事やテキストウィジェットの中でPHPを使えるようにする
テキストウィジェットに PHPの実行コード 書いても 動かないよ~   それWordPressの仕様だから だけどPHPファイ...

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

ウィジェットの作り方:新着・更新記事のウィジェット化と子テーマ運用
ウィジェット化のメリット過去記事の内容を修正、追記したことをユーザーに通知したい時があります。ですが、WordPress には新着記事の通知ウィジェットはありますが、過去記事の修正通知をする機能がありません。前回記事で書いた、記事の公開日と

CSS

子テーマのstyle.cssに記述してください。

Luxeritas

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

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

Cocoon

このままで使えます。

Luxeritas・Cocoon以外のテーマ

/************************************
** Simple GA Ranking その他
************************************/
.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セレクタにあわせれば、この箇所は省略できます

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

スポンサーリンク

設定

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

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

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

スポンサーリンク

まとめ

長すぎて疲れた……
でも確かになんだか軽い!

解答者の写真
手順はかなり面倒なのが正直なところね
でもやった甲斐は絶対あるはず
頑張って実装してみて!
アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
カスタマイズ&プラグイン
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました