[Simplicity] メニューに検索窓を追加WordPress 2018.05.28スポンサーリンク こんにちは。 雑食会社員🐼くま子ですもくじ目的方法1. function.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 .= '<li>' . $searchform . '</li>'; return $items; } 2. CSSを編集 div#navi #searchform { margin-top: 5px; margin-left: 10px; margin-right: 10px; width: 300px; } div#navi #s { margin-bottom: 5px; } ほんとうはモバイルのときは横100%にした方が良いんだろうけど、めんどいから300px固定。 3. Simplicityの設定を変える 検索窓の色おまけ:検索窓の虫眼鏡アイコンを綺麗にするスポンサーリンク目的メニューに検索窓を追加するPCモバイル↑右上の虫眼鏡マークをタップすると灰色の部分が開く方法1. function.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 .= '<li>' . $searchform . '</li>'; return $items; } 2. CSSを編集div#navi #searchform { margin-top: 5px; margin-left: 10px; margin-right: 10px; width: 300px; } div#navi #s { margin-bottom: 5px; } ほんとうはモバイルのときは横100%にした方が良いんだろうけど、めんどいから300px固定。3. Simplicityの設定を変える検索窓の色Simplicity検索ボックスのスタイルいろいろSimplicity20140828から、ブログの検索窓のスタイルをテーマカスタマイザーから変更できるようにしました。Wordpress管理画面から「外観→カスタマイズ→レイアウトの設定」から設定できます。それぞれのスタイルはこのようになっメニューアイコン検索がどれくらい使われているのか調べていませんが、 個人的には、サイトの検索窓なんてほとんど使ったことありません。 が、万が一にも使っている方がいた時に困らないように、 メニューバーを、ハンバーガーバーからサーチアイコンに変えました。Simplicityの「メニューボタン」と「トップへ戻るボタン」のアイコンを変更する方法 Simplicity201401004から、メニューボタンのアイコンと、トップへ戻るボタンのアイコンを変更できるようになりました。 今回は、その方法を紹介したいと思います。 ボタンはアイコンを変更する方法 Simplicityにはfa-searchに設定。おまけ:検索窓の虫眼鏡アイコンを綺麗にするFirstLayoutoxcgehdv検索窓の虫眼鏡マークがぼやっとしていたのが気になったので、 上記サイトのCSSをコピペして対処。
コメント