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

この記事に共感いただけたら感謝!応援が励みになります!

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

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

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

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

1.こちらのサイトで!

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

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

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

2.WordPressの条件分岐!

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

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

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

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

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

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

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

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

IMG_1421

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

最後に!

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