人気記事をカルーセルに表示させる方法CocoonWordPress

functions.phpに人気記事リスト取得用クエリへの書き換え関数を追加する

cocoon_carousel_argsに対応する関数として、set_popular_postargsという関数をfunctions.phpに追加しました。

add_filter('cocoon_carousel_args', 'set_popular_postargs');
function set_popular_postargs($args) {
    unset($args['cat']);    // カテゴリ表示しないので連想配列から指定文字を削除
    $args['orderby'] = 'post__in'; // カルーセルをPV順で並べる

    // めんどくさいので引数は決め打ちで済ませる
    $records = get_access_ranking_records('all', $args['posts_per_page'], 'post');

    // 投稿ID格納用の配列を用意
    $post_ids = array();
    // 取得したレコードの投稿IDをすべて上記配列に納める
    foreach ($records as $post) {
        $post_ids[] = $post->ID;    // 配列末尾に追加
    }
    // クエリオプションに投稿ID配列をセットして返却
    $args += array('post__in' => $post_ids);
    return $args;
}

カテゴリ抽出指定になっている配列を削除して、ランダム指定になっているソート順は人気記事リストを抽出した順番に変更(post__inは後述する配列内の並び順を示す)、get_access_ranking_recordsが人気記事リストの取得関数っぽかったので、それでリストを取得してその中の記事IDを配列化、そうして作った配列を$args内にセットして返却する。

ここで連想配列に指定しているpost__inは、「この配列内のIDと合致するレコードを抜き出せ」という指定になります。

これで、「人気記事リストのIDと合致する記事を抽出する」というクエリに$argsの内容が書き換わりました。

Cocoonの設定でカルーセルを表示させて、CSSで書式を整える

コードは書き換わったので、WordPress管理画面でCocoonの設定を変更してカルーセルを表示させます。
[Cocoon設定]－[カルーセル]の設定画面を開き、「カルーセルの表示」のドロップダウンボックスから、表示させたいページを選択します。

あとはカルーセルに表示する記事数とか、自動でスライドさせるかとか、ちょちょいと自分好みに設定を変えて保存して完了。
基本的にこの設定画面で指定した内容は反映されますが、カスタマイズの都合上「表示カテゴリー」と「カルーセルの並び替え」については何を指定しても無視されます。ただ、表示カテゴリーに何もチェックが入っていないと一番はじめの条件判定で「カルーセルとして表示するものはない」と判定されてしまうので、ここは何かしらチェックを入れておく必要があります。

最後に、カルーセル表示後、新着記事のエントリカードと役割のちがいがわかりづらくならないよう、CSSを使って説明書きをちょっと追加。

/************************************
  フロントページのカルーセルをカスタマイズ
************************************/
#carousel-in::before {
    content: "よく読まれている記事";
    margin-left: 30px;
    font-size: 0.8em;
    color: 333;
}
.carousel-content {
    margin-top: 10px;
}
.home #main::before {
    content: "新着記事";
    margin-left: 20px;
    font-size: 0.9em;
    color: 333;
}

これで希望通りの「よく読まれている記事がリストとしてぐるぐる回るカルーセル」が表示できるようになりました。

しかも思ったよりソースコードをいじる範囲もすごく少ない。
ほんと良く出来たテーマに感謝です。