賢威7のヘッダー右に検索フォームを設置する方法

今回は、WordPressテーマ： 賢威7 のヘッダー右側に、検索フォームを設置する方法にを紹介したいと思います。

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

ぱっと見難しそうに思える検索フォームの設置ですが、実はPHPファイルを編集すればとても簡単です。

ただ、CSSでスタイリングするにはメディアクエリのあたりが少しややこしいので、今回はスマホサイズのスタイリングも含めて、サイトタイトルの横に検索フォームを設置する方法をシェアしたいと思います。

カスタマイズ前

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

カスタマイズ後

PCサイズ

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

スマホサイズ

↓ スマホサイズでは、検索フォームをサイトタイトルの下に移動

[ad]

1. header.php を編集

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

header.php の85行目付近に

<!?php } ?>

というコードがあるので、この行の下に以下のコードを追加します。

<?php get_template_part( 'searchform' ); ?>

コード追加後：

これでサイトタイトルの横に検索フォームが表示されます。

2. CSSでスタイリング

PHPファイルを編集しただけの状態では、下の画像のように検索フォームが左に寄ってしまっています。

スマホサイズについても左側の余白が全く無い状態なので、CSSで調整していきましょう。

親テーマの base.css や子テーマのCSSファイルなど、お好みのCSSファイルに以下のコードを追加します。

.site-header-conts #searchform {
padding: 20px 15px 0;
max-width: 300px;
}
@media only screen and (min-width: 737px) {
.site-header-conts #searchform {
padding: 0;
text-align: right;
max-width: none;
}
}

検索フォームの右端が、サイドバーの右端に揃いました。

↓　コード編集後

スマホサイズについても検索フォームの左端がサイトタイトルの左端と揃っていますね!
これで完成です。