WordPressに検索フォームを追加する方法

Jul 8, 2020
Jul 1, 2020
WordPress

こんにちは。今日はWordPressに検索フォームを実装しましたので、その方法をシェアしたいと思います。WordPressのデフォルトテーマやちゃんと配布されているテンプレートには最初から実装されていると思いますが、自作テーマの場合には自分で用意しないといけません。難しいのかなと思って先延ばしにしていましたがその方法はとても簡単でした。

全体の流れ

WordPressに検索フォームを設置するには大まかに以下の手順が必要となります。

searchform.phpの作成
search.phpの作成
CSSで配置や見た目を調整

このように手順も少なく非常に簡単です。ただ、実際にはどこに配置してどのような見せ方をするのかが一番悩ましいところかと思います。

完成形

私の場合ですが、グローバルナビの右側にアイコンだけ配置してアイコンをクリックしたら検索フィールドが横にスライドしながら表示されるという仕様にしました。

こんな感じでグローバルナビの右側に虫眼鏡アイコンが表示されています。

虫眼鏡アイコンをクリックすると左側にスルスルっと検索フィールドが出現します。実際にこのページにも画面の右上端に設置していますので試してみてください。

searchform.phpの作成

テンプレートファイル「searchform.php」を作成します。その名の通り検索フォームのパーツが入ったファイルになります。

<form method="get" action="<?php echo home_url('/'); ?>" class="search_form">
	<input type="text" name="s" placeholder="Type here and hit enter!" class="search_field">
	<input type="submit" value="&#xf002;" class="search_button fas">
</form>

ポイントとしては、検索ボタンにFont Awesomeを利用している点です。ググっていただければ情報はたくさん出てきますのでその使い方は割愛します。具体的には上記コードの3行目、

<input type="submit" value="&#xf002;" class="search_button fas">

この中のvalue属性で指定しているの部分が虫眼鏡アイコンを表しています。また、その他のポイントとしては2行目、

<input type="text" name="s" placeholder="Type here and hit enter!" class="search_field">

placeholder属性で検索フィールドに表示する文字列を指定できます。最後はこの検索フォームを表示したい場所に、

<?php get_search_form(); ?>

このようにテンプレートタグのget_search_formを入れたら準備オッケーです。

search.phpの作成

続いてはテンプレートファイル「search.php」を作成します。こちらは検索結果を表示するページとなります。

<?php get_header(); ?>

<?php breadcrumb(); ?>

<main>
	<?php
		global $wp_query;
		$total_results = $wp_query->found_posts;
		$search_query = get_search_query();
	?>
	<?php if( $total_results >0 ): if(have_posts()): while(have_posts()): the_post(); ?>
	<article class="post">
		<a href="<?php the_permalink(); ?>">
			<figure class="post_thumbnail">
				<?php
					$days = 7;
					$today = date_i18n('U');
					$entry_day = get_the_time('U');
					$keika = date('U', ($today - $entry_day)) / 86400;
					if ($days > $keika):
					echo '<small class="new"><span class="new_label">new</span></small>';
					endif;
				?>
				<?php if ( has_post_thumbnail() ): ?><?php echo get_the_post_thumbnail(); ?><?php else: ?><img src="<?php echo get_template_directory_uri(); ?>/images/no_image.png"><?php endif; ?>
			</figure>
		</a>
		<h2 class="post_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<ul class="post_meta">
			<li class="post_date"><?php echo get_post_time('M j, Y'); ?></li>
			<li class="post_category"><?php the_category(' '); ?></li>
		</ul>
	</article>
	<?php endwhile; endif; else: ?>
		<p>「<?php echo $search_query; ?>」に一致する情報は見つかりませんでした。</p>
	<?php endif; ?>
</main>

<?php get_footer(); ?>

ちょっと長いですが、私の場合はトップページと同じデザインで表示するようにしました。

CSSで配置や見た目を調整

検索フォーム周りの配置や見た目をCSSで調整します。ご自身のサイトに合わせて調整する必要がありますので汎用性はないですが、当サイトのCSSは以下の通りです。

.search_form {
    position: relative;
    padding: 8px;
    width: 44px;
    height: 44px;
}

.search_button {
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 44px;
}

input[type="text"] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    padding: 8px;
    width: 44px;
    height: 44px;
    outline: none;
    border: none;
    background: #fff;
    opacity: 0;
    cursor: pointer;
    transition: all 0.5s;
}

input[type="text"]:focus {
    width: 270px;
    border-bottom: 1px solid #333;
    opacity: 1;
    cursor: text;
}

@media screen and (max-width:960px) {
	.search_form,
	.search_field,
	.search_button {
		display: none;
	}
}

スマートフォンでどのような実装にするかはまだいい案がないのでとりあえず表示しないようにしています。:focus疑似クラスを使って検索ボタンをクリックしたときの挙動を設定しています。