目次
目次

グローバルナビメニューに検索メニューを追加する方法

Cocoonカスタマイズ集
この記事は約4分で読めます。
記事内に広告が含まれています。

はじめに

グローバルナビゲーションメニューに独自のメニューを追加し、JIN風の検索機能を追加します。
検索ボタンをクリックすると、入力フォームが表示される仕組みです。

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

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    PHPを追加

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

    add_filter('wp_nav_menu_items', function ($items, $args) {
  // メニュー位置「ヘッダーメニュー」以外の場合（PC表示のみ）
  if ($args->theme_location !== NAV_MENU_HEADER || strpos($args->menu_class, 'menu-pc') === false) {
    return $items;
  }

  // 検索テンプレートを取得
  ob_start();
  get_search_form();
  $html = ob_get_clean();

  $items .= "<li>{$html}</li>";

  return $items;
}, 10, 2);
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    #navi-in {
  .search-box {
    height: 49px;
    margin: 0;
    position: relative;
  }

  .search-edit {
    background-color: #eee;
    border: none;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: all 0.6s;
    width: 40px;
    z-index: 5;

    &:focus {
      opacity: 1;
      outline: 0;
      width: 100%;
    }
  }
}

参考：モバイルと同じ検索ボタンを追加する方法

モバイル用の検索ボタンテンプレートを流用し、PCヘッダーにも同じ検索ボタンを追加します。

モバイル用のテンプレートをそのまま読み込むとidやfor属性が重複してしまうため、置換する必要があります。

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    PHPを追加

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

    add_filter('wp_nav_menu_items', function ($items, $args) {
  // メニュー位置「ヘッダーメニュー」以外の場合（PC表示のみ）
  if ($args->theme_location !== NAV_MENU_HEADER || strpos($args->menu_class, 'menu-pc') === false) {
    return $items;
  }

  // 検索テンプレートを取得
  ob_start();
  cocoon_template_part('tmp/mobile-search-button');
  $html = ob_get_clean();

  // ID、for属性、クラス名を変更
  $html = str_replace('search-menu-', 'search-pc-', $html);
  $items .= $html;

  return $items;
}, 10, 2);
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    /* PC用検索メニューのコンテンツ初期状態 */
.search-pc-content {
  left: 5%;
  opacity: 0;
  position: fixed;
  right: 5%;
  top: 50%;
  transform: translateY(1500%);
  transition: 0.3s ease-in-out;
  width: 90%;
  z-index: 99;
}

/* PC用検索メニューの閉じる用薄黒カバー */
#search-pc-close {
  background: black;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  transition: 0.3s ease-in-out;
  width: 100%;
  z-index: 99;
}

/* チェックが入ったらコンテンツを表示 */
#search-pc-input:checked ~ #search-pc-content {
  opacity: 1;
  transform: translateY(0%);
  transition: 0.3s ease-in-out;
}

/* チェックが入ったらカバーを表示 */
#search-pc-input:checked ~ #search-pc-close {
  display: block;
  opacity: 0.5;
}

.search-pc-button {
  align-content: center;
}

.search-pc-caption {
  display: none;
}

さいごに

今回紹介した方法を使えば、グローバルナビゲーションメニューに検索機能を追加し、JIN風のデザインを実装できます。
検索ボタンをクリックすると入力フォームが表示されるため、省スペースでスタイリッシュな検索機能を実現できます。
デザインやアニメーションをカスタマイズすることで、よりサイトの雰囲気に合った検索フォームに仕上げることも可能です。

タイトルとURLをコピーしました