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

ピックアップ記事

  1. 初心者が知っておきたいwebマーケティングの専門用語を解説!
  2. 被リンクはSEOに意味がある?効果的な被リンクの増やし方
  3. Twitterのビジネスアカウントは必要?注意点と活用法を紹介
  4. インデックスとは?検索エンジンの仕組みとSEOとの関係を徹底解説
  5. [ゼロからやさしく解説]Instagramのアカウント登録/初期設定/使い方

関連記事

  1. WordPress

    【目的別】WordPressで記事にYouTube動画を埋め込む3つの簡単な方法

    WordPressで記事を作成する際、記事内にYouTubeの動画を埋…

  2. Photoshop

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

    今回はWebマーケターに役立つPhotoshopの使い方を紹介していき…

  3. WordPress

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

    「使用したい画像の中に意図せぬ物が写ってしまった」「撮り直しができ…

  4. WordPress

    WordPress(ワードプレス)の改行・段落作成における注意点

    Wordpressで記事を作成する際、改行が反映されなかったり、思…

  5. WordPress

    WordPressのバージョン確認方法と安全にバージョンアップする方法

    WordPressをセキュリティ面からバージョンを確認して、更新してい…

  6. Photoshop

    Photoshopのレイヤーとは?基本的な操作と注意点

    デザイン作成や画像編集などを始めたくてPhotoshopを導入している…

コメント

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

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

PAGE TOP