Xeroy：ヘッダー右に検索フォームを設置する方法

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回はバズ部さんが無料で提供しているWordPressテーマ：Xeoryのヘッダー右に、検索フォームを設置する方法をシェアしたいと思います。

検索フォームというと、ヘッダーの右側やサイドバーの上部に設置されることが多いですよね。
個人的には好きなサイトや興味があるサイトには必ず設置して欲しい機能の一つです。

Xeoryには最初の状態からヘッダー右側にSNSボタンが表示されるようになっているので、ここではわりと良く見かける、「SNSボタン左、検索フォーム右」という並びでカスタマイズしていきます。

カスタマイズ前

↓ Xeoryをインストールしたばかりの状態

↓ サイトタイトルの横に検索フォームを設置。

↓ SNSボタンと同じよように、スマホサイズでは非表示に。

※　今回はPHPファイルを編集していきます。管理画面にも入れなくなることがあるので、PHPコードは注意して編集して下さい。

今回はヘッダーに検索フォームを設置したいので、header.php を編集していきます。

header.php の52行目付近にある以下のコードを、

<?php bzb_header_social_buttons();?>

下のコードで置き換えます。

<div class="header-search sp-hide">
  <?php echo get_search_form(); ?>
</div>
<?php bzb_header_social_buttons();?>

これでヘッダーに検索フォームを設置することができました。

検索フォームは設置できましたが、さすがにこのままではおかしいので、見た目を簡単に整えていきます。

お使いのCSSファイルに以下のコードを追加すると、、、

.header-search {
    width: 20%;
    float: right;
    margin-left: 30px;
}

検索フォームの横幅が狭まり、SNSボタンの右側に移動しました。

スマホサイズでは検索フォームが非表示になります。

先ほどはスマホサイズでは検索フォームを非表示にしましたが、これは検索フォームを包む div タグに sp-hide というクラスを追加したためです。

なので、もしスマホサイズで検索フォームを非表示にしたくない場合には、sp-hide というクラスを外せばいいので、 header.php に書き込むPHPコードは下のようになります。

<div class="header-search">
  <?php echo get_search_form(); ?>
</div>
<?php bzb_header_social_buttons();?>

一緒に以下のCSSコードも追加します。
（先ほどのCSSコードに追加）

@media screen and (max-width: 767px) {
  .header-search {
      width: 100%;
      margin: 10px 0;
  }
}

これでスマホサイズでも検索フォームが表示されるようになりました。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。