【WordPress】グローバルナビの横に検索バーを追加!

WordPressテーマ【yStandard】のカスタマイズです。

最初はサイドバーやフッターのウィジェットを使用して検索バーを設置していましたが、「functions.php」に直接記述をしてグローバルナビの横に追加することにしました。

目次

記述内容

yStandardの子テーマにある「functions.php」に以下を追加。

add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
 ob_start();
 get_search_form();
 $searchform = ob_get_contents();
 ob_end_clean();
  $items .= '

  • ' . $searchform . '
  • '; return $items; }

    cssで余白を調整

    /* 検索窓余白 */
    .search-form {
       width: 90%;
    	 margin: 7px 5px 5px 13px;
    }


    こうなりました。

    最後に。
    ヘッダーに漢字で「検索」と出るのがイヤだったのでystandard-child: 検索フォーム (searchform.php)で中のプレースホルダーを変更

    <input type="search" class="search-field color__font-sub" placeholder="<?php _e( 'Search' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />

    の「”<?php _e( ‘Search’ ); ?>”」の””内の部分を「Search(任意の文字)」に変更。

    反映結果

    上記を記述してこうなりました▼

    パソコン表示時

    スマホ表示時

    完成!!

    Attention

    僕の環境では問題なく動いてくれましたが「functions.php」の編集は一歩間違えると大変なのでお気をつけください。

    それでは。