1. ホーム > 
  2. Webサイト制作 > 
  3. WordPressの使い方 > 
  4. WordPressのテーマ作成方法 > 
  5. WordPressの記事検索機能を作る方法

WordPressの記事検索機能を作る方法

WordPressは「キーワード検索」「カテゴリを指定して検索」といったシンプルな記事検索機能なら、プラグインも使わずに簡単に自作できます。

  • 2017/1/7
  • 2015/3/23

WordPressの記事検索は、記事検索フォームのHTMLと検索結果を表示するテンプレートを用意するだけで実装することができます。

同じように「記事を検索する機能」としてはGoogleカスタム検索を利用する方法もあります。Googleカスタム検索は、検索したキーワード部分が太字になるなど検索結果が見やすい反面、ページがGoogleにインデックスされていないと検索対象にはなりません。
ホームページの状況に応じて使い分けましょう。

WordPressの記事検索の仕組み

WordPressの記事検索は、下のような仕組みになっています。

記事検索フォームのHTMLを書く「searchform.php」と、記事検索結果を表示する「search.php」を用意するだけです。
search.phpは記事の一覧形式で表示すれば良いので、category.phpなどの一覧を表示する他のテンプレートを元に作成すると手間が省けます。

記事検索フォーム用のテンプレートを作成

まずは記事検索フォームのHTMLを記述したテンプレートを作成します。以下のHTMLを記述したファイルをsearchform.phpという名前で保存して、WordPressのテーマフォルダにアップロードします。

	<form role="search" method="get" id="searchform" action="/" >
	<input type="text" value="" name="s" class="s" />
	<input type="submit" class="searchsubmit" value="検索" />
	</form>

記事検索フォームは、WordPressで作ったホムページのトップページのURLにGETでデータを渡すように設定します。また、入力フィールドの名前はsにする必要があります。関数リファレンスにはlabelも必ず含めるようにと書かれていますが、無くても検索機能は動きます。

searchform.phpは作成しなくても記事検索フォームを表示する場所に直接HTMLを記述しても大丈夫です。
ただ、テンプレート化しておくことで、記事検索フォームを複数の場所に設置する場合や、デザインなどのカスタマイズがやりやすくなるというメリットもあります。

検索結果用のテンプレートを作成

検索結果の表示用にテンプレートsearch.phpを作成します。以下のコードをコピペしてファイルを作成後、テーマフォルダにアップロードします。

<?php get_header(); ?>

<?php
	global $wp_query;
	$total_results = $wp_query->found_posts;
	$search_query = get_search_query();
?>

<h1><?php echo $search_query; ?>の検索結果<span>（<?php echo $total_results; ?>件）</span></h1>

<?php
if( $total_results >0 ):
if(have_posts()):
while(have_posts()): the_post();
?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>

<?php endwhile; endif; else: ?>

<?php echo $search_query; ?> に一致する情報は見つかりませんでした。

<?php endif; ?>

それぞれの処理を解説します。

3行目〜7行目

検索されたクエリー（検索キーワード）と検索結果の件数を取得して変数に格納します。

<?php
	global $wp_query;
	$total_results = $wp_query->found_posts;
	$search_query = get_search_query();
?>

9行目

検索キーワードと検索結果件数を<h1>で括って表示します。

<h1><?php echo $search_query; ?>の検索結果<span>（<?php echo $total_results; ?>件）</span></h1>

11行目〜24行目

検索結果が0件でなければ投稿を表示させ、0件の場合にはメッセージを表示させます。
12行目の「if( $total_results >0 ):」で検索結果件数の判定をしています。

<?php
if( $total_results >0 ):
if(have_posts()):
while(have_posts()): the_post();
?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>

<?php endwhile; endif; else: ?>

<?php echo $search_query; ?> に一致する情報は見つかりませんでした。

<?php endif; ?>

検索されたキーワードをパンくずにも表示させる

プラグインなしの一番簡単なパンくずリスト表示方法でご紹介しているパンくずリストを表示させる関数には、検索されたキーワードをパンくずに挿入して表示する処理が組み込まれています。

if( is_search() ){
		echo '<ul><li><a href="' . home_url() . '/">ホーム</a> ></li><li>「'. $query .'」の検索結果</li></ul>';
}

オリジナル関数のthe_breadに、検索キーワードを引数として与えて、検索結果ページを表示している時だけに「○○」の検索結果と表示させるようにしています。

get_search_formで検索フォームを表示

記事検索フォームを表示したい場所にget_search_formを、以下のように書きます。

<?php get_search_form(); ?>

この関数は、最初に作成したsearchform.phpの内容を表示させる関数です。
ちなみにsearchform.phpを作成せずにget_search_formを使うと、下のような検索フォームが表示されますが、これはWordPressのデフォルトの検索フォームを表示しているためです。

検索フォームのデザインを変える

少しだけ検索フォームのデザインを調整しましょう。
以下のようになるように、style.cssにスタイルを定義します。

.s{
	border: 1px solid #D6D6D6;
	margin: 0 0 0 10px;
	height: 24px;
	width: 180px;
}
.searchsubmit{
	border: 1px solid #999;
	background: #999;
	padding: 6px 20px;
	color: #FFFFFF;
	font-size: 0.9em;
}

これでWordPressの機能を使った検索フォームの完成です。

カテゴリを指定して検索できるようにする方法

記事のカテゴリを指定して検索ができるように、検索フォームをカスタマイズしてみましょう。

searchform.phpに以下のテンプレートタグを書き加えます。

	<form role="search" method="get" id="searchform" action="/" >
	<input type="text" value="" name="s" class="s" />
	<input type="submit" class="searchsubmit" value="検索" />
	
	<!--▼書き加える-->
	<div>カテゴリ：<?php wp_dropdown_categories( 'show_count=1&hierarchical=1' ); ?></div>
	
	</form>

「wp_dropdown_categories」はドロップダウンリストでカテゴリーの一覧を表示するテンプレートタグ。
これだけで、カテゴリーを指定して記事検索ができるようになりました。

CSSでデザインを整えておきましょう。

#searchform div{
	margin-left:10px;
}
.postform{
	width:180px;
	height:24px;
	margin:3px 0;
}

デザインを整えると下のようになります。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

WebCampPro（3ヶ月の超ガッチリ型）

3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。

しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします

▲