ナビカードにリボン選択用のセレクトボックスを追加する方法

はじめに

ナビカードは、カードにリボンを付けることができますが、CSSクラスに1〜5といった番号を手動で入力する必要があり、どの番号がどのリボンに対応しているのか確認する必要があります。

意図した記事一覧を作成できる「ナビカード」ショートコードの使い方

サイト訪問者を的確に誘導するために、意図したリンクリストを作成するショートコードの使い方です。

wp-cocoon.com

そこで、メニュー編集画面にリボンの名称を確認しながら選択できるセレクトボックスを追加します。

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

完成イメージ

実装手順

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

// メニュー項目に入力フォームを追加
add_action('wp_nav_menu_item_custom_fields', function ($item_id, $menu_item) {
  $labels = ['' => 'なし'];

  // リボン名称を取得
  for ($no = 1; $no <= 5; $no++) {
    $tag = get_navi_card_ribbon_tag((string) $no);
    preg_match('/<span>(.*?)<\/span>/s', $tag, $matches);
    // 取得した名称を選択肢に登録
    $labels[(string) $no] = isset($matches[1]) ? wp_strip_all_tags($matches[1]) : '';
  }

  // メニュー項目のCSSクラスを取得
  $classes = is_array($menu_item->classes ?? null) ? $menu_item->classes : [];
  // CSSクラスの先頭がリボン番号なら現在値に設定
  $current = isset($classes[0]) && in_array((string) $classes[0], ['1', '2', '3', '4', '5'], true)
    ? (string) $classes[0]
    : '';

  ?>
  <p class="field-ribbon description description-wide">
    <label for="edit-menu-item-ribbon-<?php echo esc_attr($item_id); ?>">
      リボン<br>
      <select id="edit-menu-item-ribbon-<?php echo esc_attr($item_id); ?>" name="menu-item-ribbon[<?php echo esc_attr($item_id); ?>]" class="widefat">
        <?php foreach ($labels as $value => $label) : ?>
          <option value="<?php echo esc_attr($value); ?>" <?php selected($current, $value); ?>><?php echo esc_html($label); ?></option>
        <?php endforeach; ?>
      </select>
    </label>
  </p>
  <?php
}, 10, 2);


// メニュー項目を保存
add_action('wp_update_nav_menu_item', function ($menu_id, $menu_item_db_id) {
  if (!isset($_POST['menu-item-ribbon'][$menu_item_db_id])) {
    return;
  }

  // 選択されたリボン番号を取得
  $ribbon_no = sanitize_text_field(wp_unslash($_POST['menu-item-ribbon'][$menu_item_db_id]));

  // 有効なリボン番号を設定
  $allowed = ['1', '2', '3', '4', '5'];

  // WordPress本体が保存したCSSクラスを取得
  $classes = get_post_meta($menu_item_db_id, '_menu_item_classes', true);

  // CSSクラスが配列でない場合は空配列に設定
  $classes = is_array($classes) ? $classes : [];

  // CSSクラスからリボン番号1～5を削除
  $classes = array_values(array_filter($classes, function ($class) use ($allowed) {
    return !in_array((string) $class, $allowed, true);
  }));

  // 選択された番号をCSSクラスの先頭に追加
  if (in_array($ribbon_no, $allowed, true)) {
    array_unshift($classes, $ribbon_no);
  }

  // CSSクラスの重複を除去して配列を変更
  $classes = array_values(array_unique($classes));

  // 変更したCSSクラスをメニュー項目に登録
  update_post_meta($menu_item_db_id, '_menu_item_classes', $classes);
}, 10, 2);

さいごに

今回紹介した方法を使えば、ナビカードに設定するリボン番号を記憶しておく必要がなくなるため、メニュー編集の作業効率がグッと向上します。