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

はじめに

ブログを運営していると、親カテゴリーの一覧をサイドバーや固定ページにきれいに並べたい場面が多々あります。
通常のnavi_listショートコードを使いカテゴリー一覧をメニュー設定することで実現できます。

しかし、外観→メニューから手動でカテゴリー一覧を作成する必要があり、カテゴリーが増減するたびにメンテナンスの手間が発生してしまいます。

そこで、navi_listの仕組みを活用し、親カテゴリー一覧を自動取得し、カード表示するショートコードを追加します。

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

完成イメージ

使用方法

以下にショートコードを示します。

[navi_list source="category"]

実装手順

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

add_filter('pre_do_shortcode_tag', function ($return, $tag, $attr, $m) {
  // navi_list 以外の場合は処理対象外
  if ($tag !== 'navi_list') {
    return $return;
  }

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

  // ショートコードの属性を設定
  $atts = shortcode_atts([
    'arrow'        => 0,
    'bold'         => 0,
    'class'        => null,
    'horizontal'   => 0,
    'type'         => '',
  ], $attr);

  // 投稿0件を除外して親カテゴリーを取得
  $categories = get_categories([
    'hide_empty'   => true,
    'parent'       => 0,
  ]);

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

  $tag_html = '';

  foreach ($categories as $cat) {
    // 擬似メニューオブジェクトを設定
    $menu = (object) [
      'attr_title'  => '',
      'classes'     => [],
      'description' => '',
      'object'      => 'category',
      'object_id'   => $cat->term_id,
      'target'      => '',
      'title'       => $cat->name,
      'url'         => get_category_link($cat->term_id),
    ];

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

    $tag_html .= get_widget_entry_card_link_tag($card_atts);
  }

  $wrap_atts = $atts;
  $wrap_atts['tag'] = $tag_html;

  return get_navi_card_wrap_tag($wrap_atts);
}, 10, 4);

さいごに

今回紹介した方法を使えば、親カテゴリーの一覧表示をショートコードで自動化し、手動でナビゲーションメニューを作る手間を完全に省くことができます。
記事が0件のカテゴリーも自動で除外されるため、常に整ったサイト構造を維持できます。