モバイル表示のトップに検索フォームを追加しました

モバイルページとして表示している時だけ、トップに検索フォームを追加してみました。
mobile_search

Simplicityのウィジェット「インデックスリストトップ」を使う

メンテナンス性を考えるとPHPを弄るよりもなるべくWordPress上で実現するべきです。今回は、Simplicityのウィジェット「インデックスリストトップ」を使います。表示エリアの詳細説明はテーマ解説ページが詳しいです。

まずは「インデックスリストトップ」に検索ウィジェットを追加します。
simplcity_widget_indexlisttop

PCでアクセスした場合は検索フォームを表示させない設定

ただしこの設定だけだと、PCでアクセスした場合もトップに検索フォームが表示されてしまいます。右側にも検索フォームがあるのでダブっていますし、占有面積が大きくて邪魔なので非表示にします。
desktop_search_visible2

まずはソースを見て該当する要素を確認します。検索フォームを囲っているdiv#widget-index-topをdisplay:noneにすればよいはず。
mobile_search_sorce2

ということで、simplicityの子テーマのstyle.cssに1行追加します。

# vi /var/www/html/wp-content/themes/simplicity2-child/style.css
+ div#widget-index-top {display:none}

style.css修正後にサイトにアクセスすると、無事検索フォームが非表示になりました。
desktop_search_invisible

モバイル表示の場合は検索フォームを表示させる設定

次にSimplicityはモバイル表示の場合のみmobile.cssを読み込む仕様を利用して、このスタイルシートにdiv#widget-index-topのdisplay:noneを打ち消す記述を追加します。ついでに検索フォーム上下のスペースも調整も好みのサイズに修正します。

# vi /var/www/html/wp-content/themes/simplicity2-child/mobile.css
+ div#widget-index-top {display:inline;}
+ .widget-index-top {margin-bottom:0;}
+ .widget-index-top #searchsubmit{height:24px;}

display:noneを利用するのでやり方としては邪道な気がしますが、当初考えていたよりも簡単に実装できました。これでスマホでどら焼きの検索をするのが楽になるはずですw

スポンサーリンク
レクタングル (大)
レクタングル (大)