パンくずリストを上下に設置する方法

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

はじめに

Cocoonのパンくずリストは、デフォルトではページ内に1か所のみ配置されます(表1参照)。

パンくずリストの配置
Cocoon設定追加先
メインカラム手前フッター手前
メインカラムトップメインカラムボトム
メインカラムボトムメインカラムトップ
フッター手前メインカラム手前

そこで、以下の記事紹介されている記事と同様、PHPで実現しページの上下にパンくずリストを配置します。

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

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    Cocoon設定

    表2に示す項目を設定をします。

    Cocoon設定
    設定大項目項目設定値
    投稿パンくずリスト設定パンくずリストの配置
    固定ページパンくずリスト設定パンくずリストの配置
  • ラベル
    PHPを追加

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

    /**
     * 投稿ページのパンくず位置がメイン前(またはフッター前)か判定(親テーマ関数を上書き)
     *
     * @return bool メイン前またはフッター前の場合はtrue、それ以外はfalse
     */
    if (!function_exists('is_single_breadcrumbs_position_main_before')):
    function is_single_breadcrumbs_position_main_before() {
      return in_array(get_single_breadcrumbs_position(), ['main_before', 'footer_before'], true);
    }
    endif;
    
    
    /**
     * 投稿ページのパンくず位置がフッター前(またはメイン前)か判定(親テーマ関数を上書き)
     *
     * @return bool フッター前またはメイン前の場合はtrue、それ以外はfalse
     */
    if (!function_exists('is_single_breadcrumbs_position_footer_before')):
    function is_single_breadcrumbs_position_footer_before() {
      return in_array(get_single_breadcrumbs_position(), ['main_before', 'footer_before'], true);
    }
    endif;
    
    
    /**
     * 投稿ページのパンくず位置がメイン上部(またはメイン下部)か判定(親テーマ関数を上書き)
     *
     * @return bool メイン上部またはメイン下部の場合はtrue、それ以外はfalse
     */
    if (!function_exists('is_single_breadcrumbs_position_main_top')):
    function is_single_breadcrumbs_position_main_top() {
      return in_array(get_single_breadcrumbs_position(), ['main_top', 'main_bottom'], true);
    }
    endif;
    
    
    /**
     * 投稿ページのパンくず位置がメイン下部(またはメイン上部)か判定(親テーマ関数を上書き)
     *
     * @return bool メイン下部またはメイン上部の場合はtrue、それ以外はfalse
     */
    if (!function_exists('is_single_breadcrumbs_position_main_bottom')):
    function is_single_breadcrumbs_position_main_bottom() {
      return in_array(get_single_breadcrumbs_position(), ['main_top', 'main_bottom'], true);
    }
    endif;
    
    
    /**
     * 固定ページのパンくず位置がメイン前(またはフッター前)か判定(親テーマ関数を上書き)
     *
     * @return bool メイン前またはフッター前の場合はtrue、それ以外はfalse
     */
    if (!function_exists('is_page_breadcrumbs_position_main_before')):
    function is_page_breadcrumbs_position_main_before() {
      return in_array(get_page_breadcrumbs_position(), ['main_before', 'footer_before'], true);
    }
    endif;
    
    
    /**
     * 固定ページのパンくず位置がフッター前(またはメイン前)か判定(親テーマ関数を上書き)
     *
     * @return bool フッター前またはメイン前の場合はtrue、それ以外はfalse
     */
    if (!function_exists('is_page_breadcrumbs_position_footer_before')):
    function is_page_breadcrumbs_position_footer_before() {
      return in_array(get_page_breadcrumbs_position(), ['main_before', 'footer_before'], true);
    }
    endif;
    
    
    /**
     * 固定ページのパンくず位置がメイン上部(またはメイン下部)か判定(親テーマ関数を上書き)
     *
     * @return bool メイン上部またはメイン下部の場合はtrue、それ以外はfalse
     */
    if (!function_exists('is_page_breadcrumbs_position_main_top')):
    function is_page_breadcrumbs_position_main_top() {
      return in_array(get_page_breadcrumbs_position(), ['main_top', 'main_bottom'], true);
    }
    endif;
    
    
    /**
     * 固定ページのパンくず位置がメイン下部(またはメイン上部)か判定(親テーマ関数を上書き)
     *
     * @return bool メイン下部またはメイン上部の場合はtrue、それ以外はfalse
     */
    if (!function_exists('is_page_breadcrumbs_position_main_bottom')):
    function is_page_breadcrumbs_position_main_bottom() {
      return in_array(get_page_breadcrumbs_position(), ['main_top', 'main_bottom'], true);
    }
    endif;

さいごに

今回紹介した方法を使えば、パンくずリストをページの上下に配置することが可能です。
母体関数を上書きし、設定に応じて反対側にもパンくずリストを表示させる仕組みを実現しました。

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