カルーセルの表示位置を変更する方法

はじめに

以下の質問に回答します。

カルーセルの位置

カルーセルの位置を、アピールエリアの下にしたい。 カルーセルを設置しました。 【現状】 グローバルメニュー カルーセル アピールエリア の順で上から並んでいるのですが、 【したいこと】 グローバルメニュー アピールエリア カルーセル と、カ...

wp-cocoon.com

カルーセルをフッターに表示させたい。

お世話になっております。 Cocoonに標準機能であるカルーセルをフッターに表示させたいです。既定では、ヘッダーになっており、恐らくPHPをいじらないと変更できないと思われます。 やり方をご存知の方がいればご教示ください。

wp-cocoon.com

Cocoon 2.6.8以降、テンプレートフックが追加されました。

Arkhe風の神フックが新登場！機能追加でサイトを強化する方法

「Cocoonのテンプレート読み込みフックを使う方法」を解説。Cocoon 2.6.8で追加されたテンプレート読み込み機能を活用し、パラメータやテンプレートの書き換え、読み込み前後に処理を追加する方法や、独自のテンプレート読み込み関数を作る仕組みを分かりやすく紹介します。

chuya.s239.xrea.com

これを活用し、カルーセルの表示位置を変更します。

この記事では、この方法について説明します。

アピールエリアの後ろにカルーセルを表示する場合

以下のコードをfunctions.phpに追加します。

// カルーセルを元の位置から削除
add_filter('cocoon_part__tmp/carousel', '__return_empty_string');


// アピールエリアの後にカルーセルを追加
add_action('cocoon_part_after__tmp/appeal', function () {
  get_template_part('tmp/carousel');
});

フッターの直前にカルーセルを表示する場合

以下のコードをfunctions.phpに追加します。

// カルーセルを元の位置から削除
add_filter('cocoon_part__tmp/carousel', '__return_empty_string');


// フッターの直前にカルーセルを追加
add_action('cocoon_footer_before', function () {
  get_template_part('tmp/carousel');
});

参考：フッターの直前にアピールエリアを表示する方法

テンプレートフックを活用し、以下を実現します。

【Cocoonカスタマイズ】アピールエリアをフッターの上など任意の位置に移動させる方法

個人的に、WordPress無料テーマのなかでも随一の使いやすさを誇ると感じているのが「Cocoon」です。Cocoonには、アピールエリアと呼ばれるヘッダー下に画像とリンクを大きく表示し、名前の通り何でもアピールできる機能が用意されていま

appendix.red

実装方法

以下のコードをfunctions.phpに追加します。

// アピールエリアを元の位置から削除
add_filter('cocoon_part__tmp/appeal', '__return_empty_string');


// フッターの直前にアピールエリアを追加
add_action('cocoon_footer_before', function () {
  get_template_part('tmp/appeal');
});

さいごに

今回紹介した方法を使えば、Cocoonの親テーマを直接編集することなく、安全かつスマートにカルーセルの表示位置を変更できます。

Cocoon 2.6.8から導入されたテンプレートフックを活用することで、従来の「テンプレートファイルを子テーマにコピーして書き換える」手法に比べ、テーマ本体のアップデートの影響を受けにくい堅牢なカスタマイズが可能です。
また、この手法はカルーセルだけでなく、他のテンプレートの表示位置を変更する際にも広く応用できます。