Cocoonのフックについて

Cocoonカスタマイズ集
この記事は約6分で読めます。
記事内に広告が含まれています。

はじめに

Cocoonのフックを使えば、簡単にサイトの表示や機能をカスタマイズできます。
この記事では、Cocoonに用意されているフィルターフックと、アクションフックの使用例について説明します。

WordPress標準の返却値関数

WordPressには便利な標準関数が用意されています(表1参照)。
これを活用すれば、フックの返却値を簡単に設定できます。

WordPress標準の返却値関数
関数名概要
__return_truetrueを返却します。
__return_falsefalseを返却します。
__return_zero0を返却します。
__return_empty_array空の配列を返却
__return_nullnullを返却します。
__return_empty_string空文字列を返却

Cocoonフィルターフック

カテゴリーラベルの表示を制御

カテゴリーラベルの表示をカスタマイズできます(表2参照)。
以下のコードを使用します。

add_filter('is_carousel_entry_card_category_label_visible', '__return_true');
フィルターフック
項目フック初期値
全てのカテゴリーラベルis_category_label_visible
投稿・固定ページのアイキャッチラベルis_eyecatch_category_label_visibleCocoon設定
投稿の関連記事カードis_related_entry_card_category_label_visibletrue
インデックスページのエントリーカードis_entry_card_category_label_visibletrue
カルーセルis_carousel_entry_card_category_label_visibletrue
全てis_widget_entry_card_category_label_visible
新着記事is_new_entry_card_category_label_visiblefalse
人気記事is_popular_entry_card_category_label_visiblefalse
関連記事is_widget_related_entry_card_category_label_visiblefalse

エントリーカードのPV表示を制御

以下のフィルターを使用することで、閲覧ユーザーにもPV数を表示できます。
以下のコードを使用します。

add_filter('public_page_entry_card_pv_visible', '__return_true');

テキストを変更

タブ一覧、カテゴリーごとの「新着記事」のテキストを変更

以下のコードを使用します。

add_filter('new_entries_caption', function ($text) {
  return $text;
});

「もっと見る」ボタンのテキストを変更

以下のコードを使用します。

add_filter('more_button_caption', function ($text) {
  return $text;
});

「次へ」ボタンのテキストを変更

以下のコードを使用します。

add_filter('pagination_next_link_caption', function ($text) {
  return $text;
});

パンくず「ホーム」のテキストを変更

以下のコードを使用します。

add_filter('breadcrumbs_page_root_text', function ($text) {
  return $text;
});

通知エリア

通知エリアの表示を制御

以下のコードを使用します。

add_filter('notice_area_visible',  '__return_true');

通知エリアメッセージを変更

以下のコードを使用します。

add_filter('get_notice_area_message', function ($msg) {
  return $masg;
});

通知エリアURLを変更

以下のコードを使用します。

add_filter('get_notice_area_url', function ($url) {
  return $url;
});

Cocoonアクションフック

カード

エントリーカードに情報追加

エントリーカードのスニペットの後ろ(日付の前)に情報を追加します。
以下のコードを使用します。

add_action('entry_card_snippet_after', function ($post_id) {
  // 出力処理
});
引数説明
post_id投稿ID

投稿ページ下の関連記事に情報を追加

投稿ページ下の関連記事にのスニペットの後ろ(日付の前)に情報を追加します。
以下のコードを使用します。

add_action('related_entry_card_snippet_after', function ($post_id) {
  // 出力処理
});
引数説明
post_id投稿ID

ウィジェットに情報を追加

「新着記事」「人気記事」「関連記事」ウィジェットの日付の前(タイトルの後ろ)に情報を追加します。
以下のコードを使用します。

add_action('widget_entry_card_date_before', function ($prefix, $post_id) {
  // 出力処理
}, 10, 2);
引数説明
prefix

  • new:新着記事

  • popular:人気記事

  • widget-related:関連記事

post_id投稿ID

新着情報に情報を追加

「新着情報」ウィジェットのウィジェットの日付の前(タイトルの後ろ)に情報を追加します。
以下のコードを使用します。

add_action('info_list_item_meta_before', function () {
  // 出力処理
});

ヘッダー

ヘッダーロゴの前に情報を追加

ヘッダーロゴの前に情報を追加します。
以下のコードを使用します。

add_action('wp_header_logo_before_open', function () {
  // 出力処理
});

ヘッダーロゴの後ろに情報を追加

ヘッダーロゴの後ろ情報を追加します。
以下のコードを使用します。

add_action('wp_header_logo_after_open', function () {
  // 出力処理
});

アピールエリア

アピールメッセージの前に情報を追加

アピールメッセージの前に情報を追加します。
以下のコードを使用します。

add_action('appeal_area_before', function () {
  // 出力処理
});

アピールメッセージの後に情報を追加

アピールメッセージの後に情報を追加します。
以下のコードを使用します。

add_action('appeal_area_after', function () {
  // 出力処理
});

参考:テンプレートフック

Cocoonには、Arkheと同様に便利なテンプレートフックが用意されています。
これにより、親テーマのテンプレートファイルを子テーマにコピーして直接編集する必要はなく、フックを活用するだけで簡単にカスタマイズできます。

さいごに

今回紹介した方法を使えば、Cocoonのフックを活用してサイトの表示や機能を柔軟にカスタマイズできます。
これらを適切に活用し、より魅力的なサイトを構築してください。

タイトルとURLをコピーしました