モバイルページとして表示している時だけ、トップに検索フォームを追加してみました。
Simplicityのウィジェット「インデックスリストトップ」を使う
メンテナンス性を考えるとPHPを弄るよりもなるべくWordPress上で実現するべきです。今回は、Simplicityのウィジェット「インデックスリストトップ」を使います。表示エリアの詳細説明はテーマ解説ページが詳しいです。
まずは「インデックスリストトップ」に検索ウィジェットを追加します。
PCでアクセスした場合は検索フォームを表示させない設定
ただしこの設定だけだと、PCでアクセスした場合もトップに検索フォームが表示されてしまいます。右側にも検索フォームがあるのでダブっていますし、占有面積が大きくて邪魔なので非表示にします。
まずはソースを見て該当する要素を確認します。検索フォームを囲っているdiv#widget-index-topをdisplay:noneにすればよいはず。
ということで、simplicityの子テーマのstyle.cssに1行追加します。
# vi /var/www/html/wp-content/themes/simplicity2-child/style.css
+ div#widget-index-top {display:none}
style.css修正後にサイトにアクセスすると、無事検索フォームが非表示になりました。
モバイル表示の場合は検索フォームを表示させる設定
次に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を利用するのでやり方としては邪道な気がしますが、当初考えていたよりも簡単に実装できました。これでスマホでどら焼きの検索をするのが楽になるはずですｗ
