Cocoonのヘッダーメニューに検索ボタン追加

1ページ目の実装ではスマホのときに検索ボタンをクリックしても動作しない理由

1ページ目の実装ではスマホのときに検索ボタンをクリックしても動作しない理由は同じidの要素を2つ記述してしまっているためです。テンプレートを流用したため、同じidの要素を2つ記述してしまっていました。id属性はHTML文書内で一意でなければなりません。この状態ではPCの検索ボタンをクリックしたときにしかモーダルで検索フォームは表示されません。

Cocoonで検索ボタンをクリックするとモーダルで検索フォームが表示される仕組み

Cocoonで検索ボタン(mobile-search-button)をクリックするとモーダルで検索フォームが表示される仕組みはJavaScriptではなくCSSで実装されています。具体的にはチェックボックスがチェック状態のときのCSSを適用することでJavaScriptを使わずにモーダルを実装しています。

スマホとPCで検索ボタンを動作させるには。

はじめに解説しましが、mobile-search-button.phpテンプレートを流用すると要素のidが重複してしまうのでPCの検索ボタンをクリックしたときにしか動作しません。つまりidが重複するので 流用はできない ということになりますので新たにテンプレートを作成する必要があります。

1.子テーマにpc-search-button.phpというテンプレートを作成

ftpソフトなどを使って以下のようにpc-search-button.phpというテンプレートを子テーマに作成します。

コードは以下になります↓

<?php //PC用の検索ボタン
/**
 * Cocoon WordPress Theme
 * @author: yhira
 * @link: https://wp-cocoon.com/
 * @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 */
if ( !defined( 'ABSPATH' ) ) exit;
global $_MENU_CAPTION;
global $_MENU_ICON;
$icon_class = $_MENU_ICON ? $_MENU_ICON : 'fa fa-search'; ?>

<!-- 検索ボタン -->
<?php if (!is_amp() || (is_amp() && is_ssl())): ?>
  <!-- 検索ボタン -->
  <li class="search-menu-button menu-button">
    <input id="search-menu-input-pc" type="checkbox" class="display-none">
    <label id="search-menu-open-pc" class="menu-open menu-button-in" for="search-menu-input-pc">
      <span class="search-menu-icon menu-icon">
        <span class="<?php echo esc_attr($icon_class); ?>" aria-hidden="true"></span>
      </span>
      <span class="search-menu-caption menu-caption"><?php echo $_MENU_CAPTION ? $_MENU_CAPTION : __( '検索', THEME_NAME ); ?></span>
    </label>
    <label class="display-none" id="search-menu-close-pc" for="search-menu-input-pc"></label>
    <div id="search-menu-content-pc" class="search-menu-content">
      <?php //検索フォーム
      get_template_part('searchform') ?>
    </div>
  </li>
<?php endif ?>

2.pc-search-buttonのCSSを子テーマのスタイルシートに定義

#search-menu-close-pc{
  display: none;
  /*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;
  /*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  transition: .3s ease-in-out;
}
#search-menu-input-pc:checked~#search-menu-close-pc{
  display: block;
  /*カバーを表示*/
  opacity: .5;
}
#search-menu-input-pc:checked~#search-menu-content-pc{
  transition: .3s ease-in-out;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  opacity: 1;
  //box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

3.子テーマのjavascript.jsに自動でフォーカスさせる処理を追加します

以下のコードCocoon子テーマのjavascript.jsに追加してください。

//PC用検索ボタンクリックでフォーカスを入力エリアに移す
$('#search-menu-input-pc').change(function (e) {
  var searchEdit = $('#search-menu-content-pc .search-edit').first();
  if (e.target.checked) {
    searchEdit.focus();
  } else {
    searchEdit.blur();
  }
});

4.functions.phpでpc-search-button.phpを読み込むようにします

新たにpc-search-button.phpを作成しましたのでこれを読み込むようにします。wp_nav_menu_itemsフックを使ってpc-search-buttonテンプレートをPCのグローバルメニューに表示するようにします。子テーマのfunctions.phpに以下のコードを記述してください。

function add_header_searchform($navi, $args) {
 ob_start();
	get_template_part( 'tmp/pc-search-button' );
 	$searchform = ob_get_contents();
 ob_end_clean();
 if( $args->theme_location == NAV_MENU_HEADER ){
  $navi .= $searchform;
 }
 return $navi;
}
add_filter('wp_nav_menu_items','add_header_searchform', 10, 2);

まとめ

親テーマのテンプレートmobile-search-button.phpを流用すれば簡単に実装できると思っていたのですが、ご指摘によりスマホ時の検索ボタンが動作していないことがわかりました。これは同じidの要素が重複しているためです。これを解決するには新たにテンプレートを作成してそれをfunctions.phpで読み込むようにします。しかし実装が冗長に感じますのでもしかしたらもっといいやり方があるかもしれません。