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

ブログ

こんにちはTac^^です。

カルーセルというのは回転コンベアという意味の言葉で、ブログでよく見る「ヘッダの下でちょろちょろ並んでる小さなブログカードの並び」などを指します。

自動でスライドしたりするあれ。

ウチのブログでも、記事数がたまってきたらトップページに導入したいと思っていました。

ただ、自分が導入したいと思っていたのは「よく読まれている記事」がリストとしてぐるぐる回るカルーセルなんですけど、利用中のWordPressテーマであるCocoonにはその機能がありません。

カルーセル表示自体は可能ですが、選択したカテゴリの記事を表示するのみで、それ以外の指定はできないのです。

というわけで、ゴールデンウィーク中暇だったのもあって、Cocoonのカルーセルで人気記事の一覧が表示できるようカスタマイズしてみることにしました。

例のごとくPHPはよくわかってないままいじっているので、何かおかしな点があれば優しくご指摘いただけると幸いです。

スポンサーリンク

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;
}

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

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

Cocoonのカルーセルに人気記事リストを表示させる
 カルーセルというのは回転コンベアという意味の言葉で、ブログでよく見る「ヘッダの下でちょろちょろ並んでる小さなブログカードの並び」などを指します。自動でスライドしたりするあれですね。 ウチのブログでも、記事数がたまってきたらトップページに導

 

 


関連コンテンツ
ブログ
スポンサーリンク
シェアする
Tac LIFE academy

コメント