WordPressのヘッダーに検索フォームを設置する方法

WordPressブログ
2015.04.13

WordPressのレスポンシブデザインのテーマを利用していると非常に便利なんですが、最近自分のブログを見ていて検索フォームがない事に気が付きました。

というか設置はしているのですが、サイドバーに設置しているため、スマートフォンで見た時にものすごく下にスクロールしないと検索フォームまで辿り着かないんですよね。という訳でWordPressのヘッダーに検索フォームを設置しました。

ヘッダー検索フォーム

今回はスマートフォンだけに検索フォームを設置する手順を紹介していきたいと思います。

WordPressテーマ

スマートフォンで見た時に検索フォームまでが遠すぎる

レスポンシブデザインの場合はスマートフォンで見た時にサイドバーがメインコンテンツの下に回りこむ場合がほとんどだと思います。記事タイトルや記事の内容が最初にあって記事下からやっとサイドバーが始まります。

つまりサイドバーに検索フォームを設置していてもスマートフォンで見た時には遥か下にスクロールしないと検索フォームまで辿り着く事ができませんよね。

先日スマートフォンで別の方のサイトを見ている時にもっと検索したいと思い検索フォームを探したのですが、検索フォームが遥か下の方に設置されていて非常に不便な感じがしました。

改めて自分のサイトを確認した所、私も同じじゃん！！ってようやく気が付きました。これは改善することでさらにPV（ページビュー）も伸ばす事ができるかもしれません。早速作業する事にしました。

WordPressの条件分岐をする

PCページではサイドバーに検索フォームがあるので、とりあえずスマートフォンページだけヘッダーに検索フォームを設置してみます。そこで必要になるのがWordPressの条件分岐。今回の場合はPCページではそのままでスマートフォンで見た時にだけヘッダーに検索フォームが出現するような条件分岐をする必要があります。

普通WordPressの条件分岐を使ってこんな感じで記述することができます。

<?php if (wp_is_mobile()) :?>
ここにスマートフォンでの処理
<?php else: ?>
ここにPC用の処理
<?php endif; ?>

ただしこの条件分岐の場合には「PCページ」と「スマートフォン&タブレット」という分け方になってしまいます。タブレットって横幅があるので多分サイドバーも表示されていると思われます。

そこでこの条件分岐を「PC＆タブレット」と「スマートフォン」という分け方にする必要があります。これはfunctions.phpにちょと記述を追加するだけで可能になります。詳しくは別記事で解説してますので参考にしてみてください。
⇒WordPressの条件分岐でスマートフォンとタブレットを分ける方法

上記の作業ができたら早速検索フォームを設置しましょう。

スマートフォンページのヘッダーに検索フォームを設置

上記の作業ができている前提で進めます。ヘッダーに設置なので使うのは「header.php」です。子テーマの「header.php」でブログタイトルを出力する「h1」の部分を探します。テーマによって若干違う部分もあるかもしれません。ちなみに（Twenty Twelve）の場合で解説です。

<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

Twenty Twelveでは「hgroup」というかたまりで「h1（タイトル）」と「説明文（description）」が記述されていました。設置したい場所としては「タイトルと説明文の下」がいいかなと思ったので、上記記述の下に検索フォームを呼びだすコードを入れます。

検索フォームを設置するためにはこの1行で設置ができます。

<?php get_search_form(); ?>

ただ、これだとPCページのヘッダーにも検索フォームがでますので、前述した「条件分岐タグ」と「位置調整のためにクラス名」等を付けておきこのように記述しました。

<?php if (is_mobile()) :?>

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

<?php endif; ?>

PCページは何も変更しないので、「もしスマートフォンページなら」という条件分岐を付けて更にこの検索フォーム部分に「header-serch」という名前を付けておきます。後はCSSで位置調整をしてみましょう。

検索フォームの位置調整

検索フォームの位置調整は「検索フォームを中央寄せ」にして「上下との間隔（余白）」を作るだけにしてます。子テーマのCSSにはこのような記述を追記しておきました。

/* スマートフォンヘッダーの検索フォーム */
.header-serch {
  margin-top: 20px;  /* 上との余白 */
  margin-bottom:5px;  /* 下との余白 */
  text-align: center;  /* 中央寄せ */
}

これでスマートフォンのヘッダーにだけ検索フォームを設置することができました。

コメント

タイトルとURLをコピーしました