WordPressのメニューの末尾に検索ボタンを追加したメモ

WordPressのメニューに検索ボタンを実装した時のコードを記録します。

PHPです。以下子テーマのファンクションズやコードスニペットに追記します。

function add_search_icon_to_menu($items, $args) {
    // 検索アイコンを追加したい特定のメニューを指定する場合は、
    // ここで $args->theme_location などをチェックできます。
    // 例: if ( 'primary' === $args->theme_location ) { ... }

    // WordPressの検索フォームへのHTMLを追加
 $search_form_html = '
    <li class="search-menu-button2 menu-button">
        <input id="search-menu-input2" type="checkbox" class="display-none">
        
        <!-- 検索アイコン -->
        <label id="search-menu-open2" class="menu-open menu-button-in" for="search-menu-input2">
          <span class="search-menu-icon menu-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
              <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
            </svg>
          </span>
        </label>

        <!-- モーダル背景（クリックで閉じる） -->
        <div class="search-overlay" id="search-overlay2"></div>

        <!-- 検索フォーム（モーダル） -->
        <div id="search-menu-content2" class="search-menu-content">
          <form class="search-box input-box" method="get" action="' . esc_url(home_url('/')) . '">
            <input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="input" value="">
            <button type="submit" class="search-submit" aria-label="button">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
            </button>
          </form>
        </div>
    </li>';


    // 既存のメニュー項目に追加
    $items .= $search_form_html;

    return $items;
}

add_filter('wp_nav_menu_items', 'add_search_icon_to_menu', 10, 2);

function add_custom_search_modal_script() {
  ?>
  <script>
  (function () {
    document.addEventListener('DOMContentLoaded', function () {

      var checkbox = document.getElementById('search-menu-input2');
      var overlay  = document.getElementById('search-overlay2');
      var modal    = document.getElementById('search-menu-content2');
      var openBtn  = document.getElementById('search-menu-open2');
      var inputEl  = modal ? modal.querySelector('.search-edit') : null;

      if (!checkbox || !overlay || !modal || !openBtn) {
        return;
      }

      modal.addEventListener('click', function (e) {
        e.stopPropagation();
      });

      overlay.addEventListener('click', function () {
        checkbox.checked = false;
        try { openBtn.focus(); } catch (err) {}
      });

      checkbox.addEventListener('change', function () {
        if (checkbox.checked) {
          setTimeout(function () {
            if (inputEl) inputEl.focus();
          }, 50);
        }
      });

      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' || e.key === 'Esc') {
          if (checkbox.checked) {
            checkbox.checked = false;
            try { openBtn.focus(); } catch (err) {}
          }
        }
      });

    });
  })();
  </script>
  <?php
}
add_action('wp_footer', 'add_custom_search_modal_script');

CSSです↓

.search-menu-button2 {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.search-menu-button2 .display-none {
    display: none !important;
}

#search-menu-open2 {
    cursor: pointer;
    display: block;
    padding: 10px;
}

.search-menu-icon {
    display: inline-block;
}

.search-menu-icon .fa-search {
    font-size: 1.2em;
    color: #333;
}

/* 検索アイコンのコンテナ */
.search-menu-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: #111 !important;
    display: block;
}

/* 黒背景（オーバーレイ） */
.search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    z-index: 999;
}

/* モーダル本体を中央に */
#search-menu-content2 {
    display: none;
    position: fixed !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    border-radius: 8px;
    z-index: 1000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

#search-menu-input2:checked ~ #search-menu-content2 {
    display: block;
}
#search-menu-input2:checked ~ #search-overlay {
    display: block;
}

.search-box {
    display: flex;
    align-items: center;
}

.search-edit {
    flex-grow: 1;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-right: none;
    outline: none;
    font-size: 14px;
}

.search-submit {
    background-color: transparent;
    border: 1px solid #ccc;
    border-left: none;
    cursor: pointer;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.search-submit:hover {
    background-color: #f5f5f5;
}

/* 虫眼鏡SVGアイコンのスタイリング */
.search-submit svg {
    width: 20px !important;
    height: 20px !important;
    fill: #555 !important;
    display: block !important;
}

/* レスポンシブ対応（必要に応じて） */
@media (max-width: 768px) {
    #search-menu-content2 {
        /* モーダル表示が優先されるため、このブレイクポイントの指定は不要または要調整 */
        /* ただし元のコードに残っていたため残します */
        position: fixed !important; /* fixedを維持 */
        width: 90%;
        max-width: 400px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        border: none;
    }
}

たいていのテーマで動くと思いますが、あとはCSSなど調節してくださいー。