こんにちは aonamiです。
サイドバーにヴィジェットで配置できる検索ボックス、
サイドバーには置きたいものがたくさんあるし。
かといって、とっぱらうのも気が引けます。
いい設置場所ないかなと思い、ひとまずは
ヘッダーのタイトル部分、その右側に移動させてみました。
思った通りになかなか表示させれなくて、結構骨が折れました。
素人ながらにやってみたらこうなりましたよ。という事で、どうかご覧ください。
※使用テーマはXeoryBaseです。
仕上がりからご覧いただきます
画像の位置にサイト内検索ボックスを設置します。
ここなら見た目も損なうこと無く、機能を残せるかなと思います。
工程は２つです、順にやっていきますね。
まず、子テーマ テーマヘッダー(header.php)に記述を加えます
[外観]→[テーマの編集] から、子テーマのheader.phpを選択し画像の位置に3行記述を追加します。
<div class=”alignright none”>
<?php get_search_form(); ?>
</div>
2行目で検索ボックスを呼び出し、これに右寄せ(alignright)とスマホなどの表示崩れ解消(none)を施してあります。
記述の位置は上の図に示した位置じゃないと、うまく表示できません。
1段落前の
<?php bzb_header_social_buttons();?>
この手前に記述するのじゃないのか思ってそこに書いて反映もさせたのですが(位置的に)
それだと表示がおかしくなりました。
ここまでの手順で、パソコンから閲覧すると綺麗に表示されます。
次にやることとして
スマホから閲覧すると、ブログタイトルと干渉しあったり見栄えが悪くなるので、
モバイルからの閲覧は検索ボックスを表示させないようにします。
スマホ等で検索ボックスを表示させなくする為に、noneをスタイルシートで指定します
[外観]→[テーマの編集] から、子テーマのスタイルシートに以下を追記をします。
自分の手持ちタブレットで縦向きの時は非表示、横に向けた時は表示されるように
pxを指定しました（正解かどうかは分かりませんが、今回は801pxにしてあります。）
もちろん、さらに小さいスマホからだと検索ボックスは非表示になります。
ここまでです。
本当は検索ボックスに「サイト内検索」と薄い文字をいれたかったのだけど…
今のままだと、何の検索をするバーなのか分かりませんからね。
視認してもらえるように文字を入れたかったのです。
調べて色々試行錯誤してみたんですが、やり方分からず。また勉強します。
