WordPress

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

WordPressで制作したWebサイトはコンテンツの更新が簡単なので、更新を続けていくと100本200本と記事数はどんどん増えていきます。そのように記事数が増えた時、サイト上にあると便利なのが「検索フォーム」です。検索フォームがあればサイト内のコンテンツキーワード入力で探すことができます。ユーザーが使いやすいサイトをつくるためには、ぜひ検索フォームを設置しましょう。

検索機能の仕組み

検索フォームの設置方法を説明する前に、まずは検索機能の仕組みについて説明してきます。Wordpressの検索機能は、記事検索フォームのHTMLを書く「searchform.php」と記事検索結果を表示する「search.php」の2つのファイルから作られています。

WordPressのデフォルトの状態の検索機能では、投稿記事と固定ページのタイトルと本文から検索をします。そこからカスタマイズをすることで、カテゴリやタグなどから検索をできます。

検索機能を作成

検索フォームを作る(searchform.php) [基礎編]

先述した通り、検索機能には「検索フォーム」と「検索結果」があります。まずは検索フォームの方から作っていきましょう。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>’.ge
<?php while ( have_posts() ): the_post();?>
<php get_template_part( ‘content’,’search); ?>
<php endwhile ; ?>
<php else : ?>
該当なし
<php endif; ?>
search.phpにこのようなコードを記述します。
できたら実際に検索し、検索結果を見てみましょう。

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

 

プラグインで検索機能をカスタマイズ

WordPressのデフォルトの検索範囲は、基本的に記事タイトルと本文です。しかし、先述したように、カテゴリやタグなどからも検索したい場合、プラグインを利用してカスタマイズする必要が出てきます。ここからは少し応用的な作成方法について紹介します。

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

カテゴリー別の絞り込み検索は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 while (have_posts()) : the_post( ); ?>
コンテンツ
<?php endwhile; endif;  ?>

投稿記事のみ表示する

デフォルトでは検索結果にページも含まれます。ページを除外し、投稿記事のみを検索対象とする場合は、finctions.php に以下のコードを記述してください。
function SearchFilter($query) {
if  ($query->is_search) {
$query->set(‘post_type’ , ‘post’);
}
return $query;
}
add_filter(‘pre_get_posts’,’SearchFilter);

このコードはでは管理画面にも反映してしまい、管理画面でページの検索をしても投稿記事しか表示されない、などの不具合が発生します。代わりに以下のコードを使うようにしてください。
function SearchFilter($query) {
if ( !is_admin( )  && $query->is_main_query->is_search( )  ) {
$query->set(  ‘post_type’ , ‘post’  )
}
}
add_action(  ‘pre_get_posts’, ’ SearchFilter  );

 

まとめ

今回はWordpress内にある検索機能とは何か、検索機能の構造、検索機能の作成方法(基礎編)、検索機能のカスタマイズ作成方法(応用編)について説明してきました。検索機能は、ユーザーにとってあると便利なものです。設置方法はいたって簡単なので検索機能をつけてない方は、ぜひ今からつけてみてください。

ピックアップ記事

  1. Instagramの予約投稿に便利なツール5選!比較・特徴・使い方
  2. 【Instagramの基礎】ビジネスアカウントの機能と活用方法
  3. SEOに悪影響、重複コンテンツが起こりやすいケースと対処法まとめ
  4. SEOの意味と目的とは?SEOの基本の基本を抑えよう!
  5. SEOの仕組みとは?検索エンジンの仕組みと順位の決まり方

関連記事

  1. WordPress

    Photoshopで背景や被写体にモザイクをかける簡単な方法

    使用したい画像の中に意図せぬ物が写ってしまうことがあります。背景に写り…

  2. WordPress

    【超簡単】スマホ1つでWordPressを利用する方法

    WordPressを使う際、スマホ(スマートフォン)だけでWordPr…

  3. Photoshop

    Photoshopのグラデーションツールで美しいグラデーションを作る方法

    Photoshopにはグラデーションツールがあります。グラデーションツ…

  4. WordPress

    WordPressのパーマリンクは最初に設定するべき!その理由とは?

    調べ物をしていると検索したページに表示されているURLをクリックして他…

  5. WordPress

    WordPressにログインできない原因12シーンとその対処法

    Wordpressは専門知識がなくても簡単にWEBサイトを作成できるた…

  6. WordPress

    【WordPress初心者必見】管理画面の見方、使い方の基礎6項目

    Wordpressで設定を行ったり、記事を投稿するには管理画面にまずは…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

解析/ツール

広告/マーケティング

デザイン/Web制作

Webコラム

PAGE TOP