この実装、面倒なら代行します
様々な機能を持つJetpackというプラグイン。
当サイトでも一度事例を紹介しています。
「Jetpackのパブリサイズ共有をカスタム投稿タイプでも使えるようにする」
さて、このJetpackには、TOP Postという人気記事を表示してくれるウィジェット機能があり、ウィジェット「人気の投稿とページ(Jetpack)」を選択することで利用が可能です。
たまに見かけますよね、「よく読まれている記事」とかいってアクセスの多い記事を上位5位とかサイドバーに表示しているサイト。当サイトも右サイドバーに置いているやつです(もっとも当サイトでは「Jetpack」ではなく「WordPress Popular Posts」というプラグインで人気記事を取得していますが)。
ただ、このJetpackウィジェット「人気の投稿とページ(Jetpack)」、出力するHTMLが3パターンのみと決まってしまっていて、フィルターフックもアクションフックもないため、HTMLのカスタマイズができません。レイアウトを調整するには、出力されるHTMLを前提にCSSを調整してそれっぽく見せるのが一般的な妥協点だろうと思います。
ただ今回はそれではつまらないので、完全に自由にHTMLを組みたいという方のために、Jetpackプラグインを導入したサイトで、レイアウトを自由にカスタマイズした人気記事リストをページに出力する事例についてご紹介しようと思います。
Jetpackで人気記事リストを取得する関数のひとつに stats_get_csv という関数があって、今回はこれを使います。
関数の説明は以下のページにあるので割愛します。
https://stats.wordpress.com/csv.php
作る機能は
『stats_get_csv を使ってJetpackから直近2週間のアクセス上位記事を5件取得し、ページのどこにでも自由に人気記事TOP5を掲載できるようにショートコード化する』
です。
テーマのfunctions.phpに以下を追記します。
if (!function_exists('display_top_popular_posts')) { function display_top_popular_posts() { $html = ''; $top_posts = stats_get_csv('postviews', 'period=week&days=2&limit=5'); //2週間のアクセス上位5件を取得 if (!empty($top_posts)) { foreach ($top_posts as $top_post) { setup_postdata($top_post); $time = get_post_time('Y年n月j日', false, $top_post->ID); $html .= '<div><h4 class="media-heading entry-title"> <a href="' . get_permalink($top_post->ID) . '">' . get_the_title($top_post->ID) . '</a> </h4> <div class="entry-meta">' . $time . '</div> </div>'; } } return $html; } add_shortcode('display_top_popular_posts', 'display_top_popular_posts'); }
生成する $html のHTML部分を自由にカスタマイズして自分好みのレイアウトを作ってください。
あとは、ショートコード display_top_popular_posts を任意の場所で呼び出せばOKです。
ポイントは「stats_get_csv」ですね。
この関数の存在を知れば実装自体はどうってことないです。
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!
100ウェブで手がけた制作・開発案件を一部、ご紹介。
クライアントからご相談いただいた内容とその実装におけるポイント、工期、予算について確認いただけます。
【テレワーク実施中 につきお電話転送中】
コール中1秒程度無音状態になりますがそのままお待ちください。
受付時間
平日 10:00~18:00
メールでのお問い合わせでも
1営業日以内にご連絡いたします。