【サンプルコード付き！】wordpressで作られたサイトに検索機能を追加する方法

こんにちは、ジーニアスウェブの平です！

お正月も近づいてきて寒さ際立つ季節ですが、皆さんはいかがお過ごしでしょうか。
あと数日で今年は終わり、来年は新しい年号に変わりますが、平成最後の冬にやり残したことはありませんか。私は年初めに目標をいくつか掲げていたのですが、いつの間にか一年が経ち、やり残したこともいくつかあります。
来年はより自分を磨く年にしたいと思っているので、しっかりと目標を立てて邁進していきたいと思います！（明日から本気出す。）

さて、今回は自分で管理しているwordpressのサイトに検索機能を追加する方法についてご紹介させて頂きます。

サイト内検索の方法

wordpressにはサイト内の記事を検索する機能が初めから用意されています。
使用するテンプレートは下記の二つのファイルです。

下記はそれぞれのファイルのサンプルコードです。
searchform.php

<form method="get" action="<?php echo home_url('/'); ?>" >
<input name="s" type="text" placeholder="SEARCH KEYWORD">
<input type="submit">
</form>

search.php

<?php if ( have_posts() ) : ?>
	<?php printf( __( '<h2>'.'「%s」の検索結果 '.'</h2>' , 'altitude'), '<span>' . get_search_query()
	 . '</span>' ); ?>
	<p>全<?php echo $wp_query->found_posts; ?>件中<?php if ($wp_query->found_posts > 30) {echo 30;}
	 else {echo $wp_query->found_posts;}; ?>件を表示しています。</p>
	<?php while ( have_posts() ) : the_post(); ?>
		<li>
			<h3><?php the_title(); ?></h3>
			<a href="<?php echo get_the_permalink(); ?>">
			<?php
			if(mb_strlen(get_the_permalink(), 'UTF-8')>80){
				$excerpt= mb_substr(get_the_permalink(), 0, 80);
				echo $excerpt.'...';
			}else{
				echo get_the_permalink();
			}
			?>
			</a>
		</li>
	<?php endwhile; ?>
<?php else : ?>
		<p>入力されたキーワードに該当する結果はありませんでした。入力キーワードを変更して再度検索を行ってください。</p>
<?php endif; ?>

上記のファイルが用意できたら検索フォームを設置したい場所に下記のコードを入力します。

<?php get_search_form(); ?>

スタイルの調整を行うと下記のようになります。

まとめ

今回はwordpressで作られたサイトに検索機能を追加する方法をご紹介させて頂きました。サイト内の検索機能を導入することでユーザが簡単に記事を見つけることができ、関連する内容の紹介にも繋がるので、非常に重要な機能といえます。
この他にもWP REST APIを使用してサイト内だけでなく、外部のwordpressから記事を取得する方法もあります。機会があればそちらの検索方法についてもご紹介させて頂きます。
それでは。