WordPressメニューを階層構造でカード表示する方法

以下のコード（共通）を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;
  }

  // name未指定、またはsource指定ありは処理対象外
  if (!is_array($attr) || empty($attr['name']) || !empty($attr['source'])) {
    return $output;
  }

  // WordPressメニューを取得
  $menu_object = wp_get_nav_menu_object($attr['name']);

  // メニューが存在しない場合は処理対象外
  if (!$menu_object) {
    return $output;
  }

  // メニュー項目を取得
  $menu_items = wp_get_nav_menu_items($menu_object->term_id);

  // メニュー項目がない場合は終了
  if (!$menu_items) {
    return '';
  }

  // カレント判定用のクラスを設定
  _wp_menu_item_classes_by_context($menu_items);

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

  // メニュー項目ごとにカードを生成
  foreach ($menu_items as $item) {
    // メニュー項目をカード表示用に変換
    $menu = (object) [
      'ID'               => $item->ID,
      'object'           => $item->object,
      'object_id'        => $item->object_id,
      'menu_item_parent' => $item->menu_item_parent,
      'url'              => $item->url,
      'title'            => $item->title,
      'description'      => $item->description,
      'classes'          => $item->classes,
      'target'           => $item->target,
      'attr_title'       => $item->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'           => $menu->object,
      'object_id'        => $menu->object_id,
      'horizontal'       => 0,
      'target'           => $menu->target,
    ];

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

    // 階層情報とカレント情報をカードリンクに追加
    $card = str_replace(
      '<a ',
      '<a data-menu-id="' . esc_attr($item->ID) . '" data-menu-parent="' . esc_attr($item->menu_item_parent) . '" data-menu-current="' . (in_array('current-menu-item', $item->classes, true) ? '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);