[WordPress]人気記事スライダーをつくる方法
こんにちは、ゾノ( @ozonosho )です。
さて、今日のブログではWordPressで人気記事スライダーをつくる方法を紹介いたします。
WordPressにはスライダーのプラグインは数多くあれど人気記事を表示してくれるものは無いんですよね。そのためこの記事では「Googleアナリティクスのデータを元に人気記事を抽出し、抽出した人気記事をスライダー表示させる方法」を解説していきます。
尚、人気記事スライダーは自動表示されるので一度つくってしまえば一切メンテナンスする必要がなくラクチンです！
- 目次
-
１．【デモ】こんなスライダーが完成します！
２．まずはプラグイン「Simple GA Ranking」を導入する
３．次にJQuery「slick.js」を導入する
４．人気記事スライダーを実装する
５．おわりに
【デモ】こんなスライダーが完成します！
まずは論より証拠！
完成形はこのようなスライダーになります。
WordPressで登録ユーザー宛にメールを一定件数ずつ送信する機能実装例
WordPressでサイト上（フロント側）に投稿機能を独自実装する方法
WordPressでプロフィール登録機能を独自に実装する方法
WordPressでログアウト機能を独自に実装する方法
WordPressでユーザーが自分で退会できる機能を独自に実装する方法
WordPressで会員登録フォームを独自に実装する方法
2023年、ココトモの抱負。
WordPressでログインフォームを独自に実装する方法
WordPress管理画面でユーザー権限を変更した際に強制ログアウトさせる方法
WordPress管理画面でユーザーのプロフィール更新時にメールアドレスのエラー判定を外す方法
よく見かけるタイプのスライダーですね。
僕のこのサイトで直近１週間分のアクセスを元に人気記事１０件をピックアップしてスライダー表示しています。
完成形のイメージがついたと思いますので、それでは実装方法を見ていきましょう。
まずはプラグイン「Simple GA Ranking」を導入する
実装のための最初のステップはプラグイン「Simple GA Ranking」を導入することです。
このプラグインを利用すると、Googleアナリティクスと連携して自分のサイトでアクセスの多い記事をさまざま条件で取得することができるようになります。
導入方法は下記のブログにまとめたので参照ください。
次にJQuery「slick.js」を導入する
次にスライダー機能を利用できるようにするためにJQuery「slick.js」を導入します。
このJQueryを利用すると、簡単にスライダー機能を実装できます。
しかもWordpressのプラグインにあるスライダーに比べて動作が非常に軽く、表示方法もさまざまなテンプレートが用意されているのでとても使いやすいです。
導入方法は下記のブログにまとめたので参照ください。
人気記事スライダーを実装する
プラグイン「Simple GA Ranking」とJQuery「slick.js」の２つが導入できたら、いよいよ人気記事スライダーの実装です！
実装方法はさまざまありますが、今回はどのページでも簡単に利用できるようにショートコードを作ってみましょう。
下記のコードをfunctions.phpに追加してください。
function the_slider() {
$args = array(
'post_type' => 'post',
'display_count' => 10,
'period' => 7
);
$ranking_data = sga_ranking_get_date($args);
$html = '<ul id="main-slider" class="slider">';
foreach($ranking_data as $post_id) {
$html .= '<li>';
$html .= '<a href="' . get_permalink($post_id) . '">';
if(has_post_thumbnail($post_id)) {
$html .= get_the_post_thumbnail($post_id);
} else {
$html .= '<img src="no-image画像のパス">';
}
$html .= '<p class="title">' . get_the_title($post_id) . '</p>';
$html .= '</a>';
$html .= '</li>';
}
$html .= '</ul>';
return $html;
}
add_shortcode('mainslider', 'the_slider')
あとはスライダーを表示させたい場所で[mainslider]と書くだけでスライダーを表示することができます。
尚、post_typeは投稿タイプの指定、display_countは表示件数の指定、periodはアクセス数の抽出期間（何日分のアクセスを元に人気記事を表示するか）の指定をそれぞれおこなえるので、ご自身の用途に合わせて編集してください。
おわりに
以上、今回の記事ではWordPressで人気記事スライダーをつくる方法を紹介いたしました。
利用するうえで設定が少し面倒な箇所もありますが、一度導入してしまえばあとは自動でデータを取得しスライダーを表示してくれるので、つくる甲斐は十分にあると思います。
自サイトで人気記事スライダーを導入したい方はぜひ活用ください。
当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
