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 .= '
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」の編集は一歩間違えると大変なのでお気をつけください。
それでは。