特集・記事リスト 記事・特集リスト
資料ダウンロード 無料お役立ち資料
本サイトについて 本サイトについて
お問い合わせ お問い合わせ
閉じる

WordPressの記事検索機能を簡単に作る方法【初心者向け】

コンテンツが多いサイトでは、ユーザーが目当ての情報を探しづらくなってしまいます。そんな時に役立つのが「検索フォーム」です。検索フォームがあれば、ユーザーが興味のある記事を簡単に探す事ができるので、ユーザービリティが向上します。今回はWordPressでの検索フォームの導入方法を紹介します。

カテゴリ: WordPress
特集: WordPress特集

サイト内のコンテンツが増えると、目当てのコンテンツを見つけにくくなってしまい、使い勝手が悪くなってしまいます。
そんな時、便利なのが「検索フォーム」です。

検索フォームがあれば、簡単に目当ての記事を探すことができるので、サイトの使い勝手が良くなり、ユーザービリティが向上します。
そのため、「検索フォーム」を追加したいと考える方も多いのではないでしょうか。

検索フォームはWordPressに標準搭載されています。
また、使用しているテンプレートにも検索フォームが実装されている場合があります。

しかし、
・検索フォームを自分で作りたい
・使用しているテンプレートに検索フォームがない
といった場合、どのように検索フォームを実装するのか解説していきます。

検索フォームを実装する2つの方法

テンプレートの検索フォームや標準搭載の検索フォームを使用しない場合、
●プラグインを使って実装する
●phpファイルから作成する
という2つの方法があるのでそれぞれご紹介します。

プラグインを使って検索フォームを実装する

検索フォームを実装できるプラグインはいくつかありますが、今回は「Search Everything」というプラグインを実装したいと思います。

プラグインをインストール

「プラグイン」→「新規追加」クリック。

プラグインの検索窓に「Search Everything」と入れ、検索。
「Search Everything」の「今すぐインストール」をクリック。

インストールが完了したら、「有効化」をクリック。

プラグインの設定

有効化が完了したら、プラグインを設定します。
「設定」→「Search Everything」をクリック。

設定画面を開いたら、「Search Everything Basic Configuration」という部分の設定をおこないます。

赤枠の部分で、検索の設定をおこないます。検索の設定はサイトに合わせてカスタマイズしましょう。検索できるものに全てチェックを入れたら、「Save Changes」という青いボタンをクリック。これで、検索フォームが実装できます。

phpファイルから検索フォームを作成する

2つ目の方法がphpファイルを用いて検索フォームを作成する方法です。

phpファイルから検索フォームを作成する際は、まず、「searchform.php」と「search.php」という2つのファイルが必要です。

「searchform.php」は検索フォームやボタンを作成する時のコード、「searchform.php」には検索結果を表示するときのコードが記述されています。

これらをWordPressのテーマディレクトリに作成します。

検索フォームを作る(searchform.php)

まず、テーマディレクトリ内に作ったsearchform.phpファイルに以下のコードを追加します。
<form method=”get” action=”<?php echo home_url(‘/’)?>”>
<input name=”s”type=”text>

formとinputのシンプルなコードになっています。formのactionはブログトップのurlを指定してください。

inputにてnameをsにしていますが、Wordpressの検索窓を作る時は必ずnameをsにする必要があります。これで検索窓の設定は完了です。しかし、これだけだと検索窓を表示することはできません。

表示するには、
<?php get_search_form( ) ; ?>
というコードを表示させたい場所に記述する必要があります。

そのためには、トップページのindex.phpにコードを入れます。コードを入れると、検索窓が表示されます。検索ボタンの表示はされていませんが、これだけでも検索することが可能です。

しかし、ボタンがないというのはいくらなんでも、見栄えがよくありません。よって、これに実行するボタンをつけていきます。
先ほどのコードにさらに一行加えていきます。

<form method=”get” action=”<?php echo home_url(‘/’)?>”>
<input name=”s”type=”text>
<input type=”image” src=”<?php bloginfo(‘template_url’);?>/images/search.pn
↑一番下に新たなコードを加えています。

このコードで、Wordpressのテーマフォルダ内にあるimagesからsearch.pngを呼び出せます。これで、検索窓の横にボタンが表示されます。ボタンの位置と検索窓の位置が微妙にずれていることもあるので、ボタンのCSSを指定して修正します。

<input type=”image” src=”<?php bloginfo(‘template_url’);?>/images/search.pn
style=”
vertical-align:middle;
height:32px;
“>

このようにコードを入力し、vertical-alignをmiddleに設定して画像を検索窓の中央に持って行き、検索窓とボタンの高さを同じにします。

表示が整ったので、これで検索フォームの制作は完了です。

検索結果を作る

<?php if ( have_posts( ) ) : ?>
<h1><php printf( __( ‘Search Results for: %s’, ‘altitude’ ),’<span>’.g
<?php while ( have_posts() ): the_post();?>
<php get_template_part( ‘content’,’search); ?>
<php endwhile ; ?>
<php else : ?>

該当なし

<php endif; ?>

search.phpにこのようなコードを記述します。
できたら実際に検索し、検索結果を見てみましょう。

これで基本的な検索機能をつけたことになります。

カテゴリー別絞り込み検索

カテゴリー別の絞り込み検索はWordpressのタグですでに用意されているので、簡単に実装することができます。

<?php wp_dropdown_categories( ); ?>

これを入れ込むだけで実装は完了です。

お好みでカッコ内にオプションをつけ加えましょう。オプションの種類や初期値はWordpress Codexで確認できます。

タグ別絞り込み検索

タグの場合、カテゴリー別絞り込み検索のようなWordepressタグはないので、地道にコードを書いていく必要があります。コードは「foreach」を使って、<option>にタグを表示します。

<?php $tags =  get_tags( ) ; if ( $tags ) : ?>
<select  name=’tag’  id=’tag’ >
<option value=”” selected=”selected”>タグ選択 </option>
<?php foreach ( $tags as $tag ): ?>
<option value=”<?php echo esc_html( $tag->slug );   ?>”><?php echo esc_html(  $tag         <?php endforeach; ? >
</select >
<?php endif; />

カスタムフィールド別の絞り込み検索

WP Custom Fields Searchというプラグインを利用すると、カテゴリー別・タグ別絞り込み検索に加え、カスタムフィールド別にも検索することができます。

たとえば、「値段」「色」「サイズ」など、カスタムフィールドを使って、投稿記事より細かな設定をしているサイトにはオススメです。

日本語化するには、「WP Custom Fields Seauchの日本語版配布」から日本語.moファイルをダウンロードし、まずはフォルダ内に保存します。

有効化をすると、さまざまな項目を簡単に追加することができます。値が数値の場合は、「〜以上」「〜未満」の値を指定することもできます。
テーマファイルに挿入する場合は、

<?php if( function_exists(‘wp_custom_fields_search’))
wp_custom_fields_search( );  ?>を、
投稿記事やページ内に挿入する時は
[ [wp-custom-fields-search]]
こちらのコードを記述します。

検索内容と検索結果を表示する

検索結果ページをindex.phpなどの記事一覧ページとは違う仕様やデザインにしたい時は、別にsearch.phpというファイルを作成しましょう。これが検索結果ページとなります。

検索結果に検索したワードや検索結果件数を表示するためには、検索結果ページに以下のような記述をします。表示方法を変更する場合はechoの部分を書き換えてください。

<?php if (have_posts()) : ?>
<?php
$allsearch =& new WP_Querry(“s=$showposts=-1”);
$key = wp_specialchars($s, 1) ;
$count = $allsearch->post_count;
echo ‘<h1>$#8216;’.$key.’&#8217; で検索した結果:’.$count.’件 </h1>’;
?>
コンテンツ
<?php endwhile; endif;  ?>

投稿記事のみ表示する

デフォルトでは検索結果にページも含まれます。ページを除外し、投稿記事のみを検索対象とする場合は、finctions.php に以下のコードを記述してください。

function SearchFilter($query) {
if ( !is_admin( )  && $query->is_main_query->is_search( )  )  {
$query->set(  ‘post_type’ , ‘post’  )
}
}add_action(  ‘pre_get_posts’, ’ SearchFilter  );

まとめ

検索フォームはWordPressに標準搭載されているものやテンプレートにもともと付いているものがあります。
しかし、中には「自分で検索フォームを作りたい」「テンプレートに検索機能がついていない」という場合があると思います。

そんな時は、
●プラグインを使って実装する
●phpファイルから作成する
という2つの方法で検索フォームを実装することができます。
検索フォームがあればよりサイトが使いやすくなりますので、ぜひ実装してみてください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

無料でできるWebマーケティング11選  <MIDORIBON>

ダウンロード資料画像

Webマーケティングに取り組もうとしている方に向けて、無料で利用できるWebマーケティングに役立つツールを9つ集めました。ツールの始め方からWebマーケティングに利用するメリット、実践的な活用方法まで解説します。

コストをかけずにまずはWebマーケティングに取り組んでみたい思いの方にぴったりの一冊です。

そのままの計画で、目標達成できますか?

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

サイト内でユーザーがどのような行動をとっているかを解析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

運営会社

Web制作・広告・コンサルティングのセルリア

サービス一覧
会社概要