WordPressにSimple GA RankingとGoogle Analytics Post Pageviewsで記事ランキングを表示する

2018/12/01 2018/12/08

この記事はWordPress Advent Calendar 2018に参加した記事です。

参考にさせていただいた記事

【Simple GA Ranking】にサムネイルと順位とPVを表示してみたよ

サムネイルも表示したかったのでこちらを参考にさせていただきました。
というかほぼそのままやってみました。
ありがとうございます！

「データベース接続確立エラー」が多発

WordPressの「データベース接続確立エラー」への対応(様子見中 EC2 + RDS t2.micro)

ある時期を境に「データベース接続確立エラー」が多発するようになりました。
時間の経過的には単純にアクセス数が増えたことが原因ですが、改善をしなければです。

環境はAWSで、 EC2 + RDS + CloudFront + WAF etc。
EC2インスタンスはt2.microのAmazon LinuxでログをCloudWatch Logsに書き出してます。

ログには”Can’t connect to local MySQL server”が1/16から多発していました。
根本的な原因としては、WordPress Popular PostsがページビューのたびにMySQLへ書き込みに行くのでそこが原因ではないかと。
心優しいみなさんのアドバイスをいただいて、Simple GA RankingとGoogle Analytics Post Pageviewsに変更することにしました。

Google APIの設定

Simple GA RankingはGoogle Analyticsからページビュー数を取得するので、Google APIの設定が必要です。
(Google Analyticsを使用されていない方は、Google Analyticsの設定方法を検索してGoogle Analyticsの有効化をまず行ってください。)
現在、Google APIの設定はGoogle Cloud Consoleに統合されているのでこちらで設定していきます。

アカウント名をクリックして、プロジェクト選択画面で[新しいプロジェクト]を選択してプロジェクトを作成します。

プロジェクト名を入力してプロジェクトを作成します。

左ペインで[APIとサービス]を選択して、[APIとサービスの有効化]をクリックしました。

“analytics”などで検索して[Analytics API]を選択しました。

[有効にする]を選択して有効にしました。

次に認証情報を作成します。

クライアントIDを選択します。

同意画面を設定します。

アプリケーション名は自分が分かる名前にして保存します。

ウェブアプリケーションを選択してアプリケーション名を任意で入力して作成します。
このあとクライアントIDとクライアントシークレットが表示されるのでテキストエディタにコピーしました。

Simple GA Rankingの設定

WordPressのプラグイン新規追加で”Simple GA Ranking”を検索して追加しました。

う〜ん。PHP5.6以上が必要なのですね。
ここで見送りにしていたPHPバージョンアップに着手することにします。
ついでにAWSアカウントもブログ専用のアカウントを作って移行します。

Amazon Linux 上のWordPress PHPを5.3から7.2にバージョンアップ

さて、バージョンアップも終わったので改めて作業に戻ります。

[設定] – [Simple GA Ranking]で設定します。

pannel settingsのリンクをクリックして、トークンの設定をします。

ここで、コールバックURLをGoogleの認証情報に設定していなかったなあと気づきました。

コールバックURLを設定する前に承認するドメインとして今回設定するサイトのドメインを全部プロジェクトに追加します。

そして、次に認証情報の承認済みのリダイレクトURLにコールバックURLを設定します。

認証をしてトークン取得できました。

そして、このサイトが使用するAnalytics情報を選択します。

Google Analytics Post Pageviewsの設定

[設定] – [Post Pageviews]で設定します。

画面にかかれているとおり、認証情報に承認済みのリダイレクトURLを追加します。
サイトアドレス/wp-admin/options-general.php?page=google-analytics-post-pageviews

クライアントIDとクライアントシークレットを設定します。

そして認証をして、Post Pageviewsの設定です。

こちらで設定します。

PHPとCSSコード追加

[外観] – [テーマの編集]でコードを追加しました。

PHPもCSSは、元記事を参考にさせていただき、ちょっと変えました。

functions.php

//Simple GA Ranking
add_filter('sga_ranking_before_title','showRankingImage',10,2);
function showRankingImage($ret, $id) {
    $post_url = get_permalink($id); // 記事のURL
    $title = get_the_title($id); //タイトル
    $pv = gapp_get_post_pageviews($id);
    $ret = "";
    if (has_post_thumbnail($id)) { // アイキャッチ画像の有無
        $post_thumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($id),array(100,100));
        $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><div class='gapv'>".$pv." views"."<div/>";
    }
    return $ret;
}

//Simple GA Ranking

add_filter('sga_ranking_before_title','showRankingImage',10,2);

function showRankingImage($ret, $id) {

$post_url = get_permalink($id); // 記事のURL

$title = get_the_title($id); //タイトル

$pv = gapp_get_post_pageviews($id);

$ret = "";

if (has_post_thumbnail($id)) { // アイキャッチ画像の有無

$post_thumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($id),array(100,100));

$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><div class='gapv'>".$pv." views"."<div/>";

}

return $ret;

}

こちらのSimple GA Rankingの公式サイトにもあるように
sga_ranking_before_titleはランキングを表示させるHTMLのタイトル前を、sga_ranking_after_titleはタイトル後をカスタマイズできます。
今回はsga_ranking_before_titleのみを使用しました。

gapp_get_post_pageviewsでGoogle Analytics Post Pageviewsのページビューカウントを取得しています。

style.css

.ranking-img{
    width: 100px;
    height: 100px;
    float: left;
    display: inline;
    margin: 0 5px 0 0;
    border: none;
}

.sga-ranking-list a {
   text-decoration: none;
   color: #111;
   display: block;
   font-weight: bold;
}

.sga-ranking li{
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #999999;
    list-style-type: none;
    display: block;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    height: 120px;
}

div.gapv {
    color: #555;
}

ol.sga-ranking {
    counter-reset: pupular-ranking;
}

li.sga-ranking-list {
    position: relative;
    padding: 0px 0px 5px 0px;
}

li.sga-ranking-list:before {
    background: none repeat scroll 0 0 #00a23f;
    color: #fff;
    content: counter(pupular-ranking, decimal);
    counter-increment: pupular-ranking;
    font-size: 100%;
    left: 0;
    top: 0;
    line-height: 1;
    padding: 4px 7px;
    position: absolute;
    z-index: 1;
    border-radius: 5px;
}