ワードプレスでスマホ表示のヘッダー下に「検索窓」を設置する方法です!

スマホ表示で検索窓がとても遠いと思いませんか?

そうなんです、PCではサイドバーのトップに表示される「検索窓」も、スマホの表示では、順番からトップページの後になりますね。

と言うことは、見に来てくれたユーザーが「検索したいな」と思っても、超メチャスクロールしないと、検索窓までたどり着きません。

1.こちらのサイトで!

そんなわけで、本日は簡単にスマホ表示でトップヘッダー下に「検索窓」を設置する方法をご紹介いたします。

お詫び:グーグルのカスタム検索の設置についてはまだ解説していません!汗!

今回の方法は、この方のサイトで情報をいただきました。「アフィリエイトで稼ぐ方法を全部話そうと思う」さんありがとうございました。

http://affiliate150.com/header-search

2.WordPressの条件分岐!

正直に申し上げます。この分岐については詳しくありません。わたしの知る限りでは、このsimplicity というテーマ(現在使用中のテーマです)では、分岐処理がされていると認識しています。

http://wp-simplicity.com/

それなので、分岐についてこの紹介しているサイトにてご確認下さい。

3.検索フォームを設置!

で、早速コピペ処理に入ります。ヘッダー下に検索窓を設置に使うテーマ編集は「header.php」になります。

さらに、この「header.php」のずっと下の方の、「<!– main –>」の上にこのコードを貼り付けて下さい。

<?php if (is_mobile()) :?>
<div class="header-serch">
<?php get_search_form(); ?>
</div>
<?php endif; ?>

設置はこれで完了です。サイトを確認してみてください。どうでしょうか?

こんな感じになりました。

IMG_1421

必要に応じて、お好みでCSSで調整して下さい。

最後に!

もし、どなたかグーグル検索窓をここに設置するコードをご存知の方がいらっしゃれば、ご指導いただけれうれしいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

英語アドバイザー。役に立つ情報(英語)ブログ運営。学習院大学/サンフランシスコ州立大学卒業。企業代表取締役の元専任通訳・翻訳者。元ベンチャー企業経営者。現個別指導塾英語講師。