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. SEOでいわれる「ブラックハット」と「ホワイトハット」の違い
  2. Googleアルゴリズムとは?仕組み・更新の履歴・対策方法まとめ
  3. SEOのトレンド、モバイルファーストインデックス対策の方法と注意点
  4. 【Instagramの基礎】ビジネスアカウントの機能と活用方法
  5. 被リンクはSEOに意味がある?効果的な被リンクの増やし方

関連記事

  1. Photoshop

    Photoshopブラシツールの使い方とおすすめプリセット21選

    みなさんPhotoshopのブラシ機能は活用していますか?ブラシ機能を…

  2. WordPress

    WordPress(ワードプレス)でWebサイト全体を非公開にする方法

    サイトを製作している途中の段階やサイトや記事の内容に不備が見つかった際…

  3. WordPress

    3分で完了!WordPressでGoogleアナリティクスを導入する方法

    この記事では、wordpressでサイトを作成した人向けにgoogle…

  4. WordPress

    WordPressでバックアップをとる方法【タイミング/用途別で解説】

    Wordpressに限った話でなく、Webやアプリを公開・運営していれ…

  5. Photoshop

    【Photoshop初心者向け】基本的なPhotoshopの使い方

    今回はPhotoshopで出来る「写真編集」「グラフィックデザイン」「…

  6. WordPress

    こんなに簡単!?Photoshopで背景を透明にする方法

    画像の背景を透明にしないと画像を合成する時に背景が重なってしまい上手く…

コメント

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

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

PAGE TOP