カルーセルというのは回転コンベアという意味の言葉で、ブログでよく見る「ヘッダの下でちょろちょろ並んでる小さなブログカードの並び」などを指します。自動でスライドしたりするあれですね。
ウチのブログでも、記事数がたまってきたらトップページに導入したいと思っていました。
ただ、自分が導入したいと思っていたのは「よく読まれている記事」がリストとしてぐるぐる回るカルーセルなんですけど、利用中のWordPressテーマであるCocoonにはその機能がありません。カルーセル表示自体は可能ですが、選択したカテゴリの記事を表示するのみで、それ以外の指定はできないのです。
というわけで、ゴールデンウィーク中暇だったのもあって、Cocoonのカルーセルで人気記事の一覧が表示できるようカスタマイズしてみることにしました。例のごとくPHPはよくわかってないままいじっているので、何かおかしな点があれば優しくご指摘いただけると幸いです。
怪しい箇所を読み解いてみたら、フック関数が用意されてた
「carousel」をキーに親テーマを検索したところ、その表示に関する処理は tmp/carousel.php の10行目以降が該当するようです。
if (is_carousel_visible() && get_carousel_category_ids() && !is_amp()): ?>
<?php //カルーセルに関連付けられた投稿の取得
$args = array(
'cat' => get_carousel_category_ids(),
'orderby' => get_carousel_orderby(), //ランダム表示
'no_found_rows' => true,
'posts_per_page' => get_carousel_max_count(),
);
$args = apply_filters('cocoon_carousel_args', $args);
$query = new WP_Query( $args );
// var_dump($query -> have_posts());
// var_dump($query);
if( $query -> have_posts() ): //カルーセルが設定されているとき
?>
カルーセルの表示に用いるカテゴリのIDやソート順、表示する数といった管理画面での設定内容を取得して、それを$argsの中にセットしてWordPressのクエリに投げると該当する記事のリストが取得できる。そんな動きみたいですね。
じゃあその記事のリストを人気記事リストに差し替えてやれば良さそうですが… apply_filtersってなんだろう。ここで何か追加の処理をする必要があるとも思えないので、Google先生で調べてみました。それで出てきたのが次の記事。
あ、なるほど、フック関数が用意されてるんだ。
今の時点では関数の実体があるわけじゃなくて、自分で明示的に追加してやることで、「カルーセル用記事一覧の取得」実行前に何らかの処理を付け足してやることができるようです。引数に$argsを渡しているので、そっちでクエリの条件を書き換えれば何を表示させるかのカスタマイズできますよってことなんでしょう。良く出来てるなあ。
フック関数は子テーマ側のfunctions.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の最新バージョン(1.7.9)では、このカスタマイズ方法だとカルーセルが表示されなくなりました。下記の記事で、最新版での修正事例を紹介しています。
