WordPress Simple GA Rankingで記事作成日付表示を追加
前の記事に続いて、もうひとつ、WordPress関連の話題を。
当Webサイトでは、サイドバーで人気記事ランキングを表示していますが、これはもともとWordPress Popular Postsプラグインを使用していました。
ところが、9月中旬あたりにプラグインのバージョンを4.0系にバージョンアップしたところ、カウントアップしなくなりました。
他の多くのユーザーも同じ現象が発生していたようで、さらにバージョンアップすると復旧したようですが、僕の環境では、最新の4.0.3にバージョンアップしても、設定をいろいろ変えても全くカウントアップしません。
バージョンアップ後は管理画面でのデザインも変わって、カウント数の視認性も悪くなりました。
ということもあり、人気記事ランキングのプラグインは、WordPress Popular PostsからSimple GA Rankingに乗り換えました。
・Simple GA Ranking
http://simple-ga-ranking.org/ja/
WordPress Popular Postsは、カウントデータをWordPressデータと同様にDBに保存しますが、Simple GA Rankingは、Google Analyticsのカウントデータを取得して表示するんですね。
ページアクセスのたびにGoogleにデータを取りに行く分、少しページ表示が遅くなるでしょうが、アクセスのたびにDB書き込みすることがなくなる分、サーバーの負荷がちょっとだけ下がるでしょう。
Google Analyticsのカウントデータ取得には、Google APIの認証情報が必要ですが、その手順はこちらの記事を参考にしました。
・ワードプレスの人気記事表示プラグイン「Simple GA Ranking」の設定とサムネイル表示
http://tabibitojin.com/wordpress-plugin-simple-ga-ranking/
あとは、ウィジェット設定でサイドバーに追加すれば、人気記事ランキングが表示されるようになります。
、、、ところがこのSimple GA Rankingのウィジェット、シンプルという名のとおり、順位とリンク付きタイトルしか表示されません。
技術的な記事については、いつの時点の情報かが重要なポイントですから、少なくともこのサイトにおいては「人気記事ランキング」や「最新記事」の一覧でも、記事作成日付を表示したいです。
ということで、カスタマイズしました。
Simple GA Rankingのオフィシャルサイトにサンプルコードが載っています。
・Simple GA Ranking 関数
http://simple-ga-ranking.org/ja/#function
ここにある
「Sample Code 1 : オーソドックスにランキングを表示させる例です」
をベースに、記事作成日付を追加します。
PHPコードは以下。
<?php
if (function_exists('sga_ranking_get_date')) {
$ranking_data = sga_ranking_get_date();
if ( !empty( $ranking_data ) ) {
echo '<ol>';
foreach ( $ranking_data as $post_id ) {
echo '<li><a href="' . esc_attr(get_permalink($post_id)) . '">' . esc_html(get_the_title($post_id)) . '</a>' . ' ' . '<span style="font-size:14px;color:#d44950">' . get_the_date('Y/m/d', $post_id) . '</span>' . '</li>';
}
echo '</ol>';
}
}
?>
サンプルコード7行目に、
' ' . '<span style="font-size:14px;color:#d44950">' . get_the_date('Y/m/d', $post_id) . '</span>'
↑この部分を挿入しました。
WordPressのget_the_date関数で、記事作成日付を取得しています。
フォントサイズ、フォント色は、同じくサイドバーにある「VK_最新記事」と同じものをspanタグで指定しました。
このコードをそのままウィジェット設定の「テキスト」に追記しても、PHPコードは動作しません。
そのため、ウィジェットでPHPコードを動作させるためのPHP Code Widgetプラグインをインストールし、「PHPコード」ウィジェットに上記PHPコードを貼り付けて保存します。
これで、このページの右サイドバー上部のとおり、ばっちり記事作成日付が表示されるようになりました。
ウィジェットに直接PHPコードを書かずに、CSSとfunctions.phpで対応するのが正解なような気がしますが、自分のサイトですしそこに時間はかけたくないので、僕はこの方法で十分です。
（関連記事）
・Webサイトのデザインを変更
https://inaba-serverdesign.jp/blog/20171002/website_wordpress_lightning.html
