【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（任意の文字）」に変更。

反映結果

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

パソコン表示時

スマホ表示時

完成！！

それでは。