固定ページ一覧を自動でカード表示する方法

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

親カテゴリー一覧を自動でカード表示する方法

「Cocoonでカテゴリー一覧を自動取得してカード表示するショートコードの追加方法」を解説。親子カテゴリーの折りたたみ表示や投稿0件のカテゴリーにも対応し、外観メニューでの手動登録や更新の手間を省けます。カテゴリーの増減にも自動対応し、階層構造を保った見やすいナビゲーションを実現するコードの実装手順と活用方法を分かりやすく紹介します。

chuya.s239.xrea.com

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

add_filter('pre_do_shortcode_tag', function($output, $tag, $attr, $m) {
  if ($tag !== 'navi_list') {
    return $output;
  }

  // source=category以外は処理対象外
  if (!is_array($attr) || ($attr['source'] ?? '') !== 'category') {
    return $output;
  }

  // ショートコードの属性を設定
  $atts = shortcode_atts([
    'hierarchy' => '',
  ], $attr);

  // カテゴリーを取得
  $categories = get_categories([
    'taxonomy'   => 'category',
    'hide_empty' => false,
    'orderby'    => 'name',
    'order'      => 'ASC',
  ]);

  // カテゴリーがない場合は終了
  if (!$categories) {
    return '';
  }

  // 最上位の親カテゴリーのみ取得
  if ($atts['hierarchy'] === 'parent') {
    $categories = array_filter($categories, function($category) {
      return (int) $category->parent === 0;
    });
  }

  // カードHTMLを初期化
  $cards = '';

  // カテゴリーごとにカードを生成
  foreach ($categories as $category) {
    // カテゴリーをメニュー項目形式に変換
    $menu = (object) [
      'ID'               => $category->term_id,
      'object'           => 'category',
      'object_id'        => $category->term_id,
      'menu_item_parent' => $category->parent,
      'url'              => get_category_link($category->term_id),
      'title'            => $category->name,
      'description'      => '',
      'classes'          => [],
      'target'           => '',
      'attr_title'       => '',
    ];

    // カード表示用の属性を設定
    $card_atts = [
      'prefix'           => WIDGET_NAVI_ENTRY_CARD_PREFIX,
      'url'              => $menu->url,
      'title'            => escape_shortcodes($menu->title),
      'snippet'          => '',
      'image_attributes' => get_navi_card_image_attributes($menu, 0),
      'ribbon_no'        => '',
      'type'             => 0,
      'classes'          => [],
      'object'           => 'category',
      'object_id'        => $category->term_id,
      'horizontal'       => 0,
      'target'           => '',
    ];

    // Cocoon標準のナビカードを取得
    $card = get_widget_entry_card_link_tag($card_atts);

    // 階層情報とカレント情報をカードリンクに追加
    $card = str_replace(
      '<a ',
      '<a data-menu-id="' . esc_attr($category->term_id) . '" data-menu-parent="' . esc_attr($category->parent) . '" data-menu-current="' . (is_category($category->term_id) ? '1' : '0') . '" ',
      $card
    );

    // カードを追加
    $cards .= $card;
  }

  // Cocoon標準のナビカード外枠を設定
  $wrap_atts = [
    'tag'        => $cards,
    'type'       => 0,
    'bold'       => 1,
    'arrow'      => 0,
    'class'      => '',
    'horizontal' => 0,
  ];

  // Cocoon標準のナビカード外枠を取得
  $html = get_navi_card_wrap_tag($wrap_atts);

  // 階層用クラスを追加
  return str_replace(
    'navi-entry-cards',
    'navi-entry-cards my-navi-hierarchy',
    $html
  );
}, 10, 4);