「WordPressに検索スペースを作りたい」「ページ内で情報を検索できるようになって、読者を喜ばせたい」と考えていませんか。WordPressではシンプルな手順で検索スペースも作れるので便利です。
今回はWordPressで作ったブログやサイトに、検索機能を作る方法をまとめました。画像を交えての解説なので、追っていきながら作業できることもポイントです。WordPressに検索機能を作れば、見てほしい情報にすぐにアクセスしてもらえるでしょう。
WordPress (ワードプレス)でページ内検索を実装することの重要性
WordPressでブログやサイトを作るなら、ページ内で検索できる機能は重要です。他のサイトを訪問したときに、「あのページにある情報をもう一度見たい」などと思って、サイト内検索したことがある人も多いでしょう。今度はみなさんが読者を検索機能で助ける番です。
ネットショップやアフィリエイトブログなどで商品を宣伝する立場なら、おすすめ品まで早くアクセスしてほしいでしょう。検索機能で特定の商品をサーチできれば、訪問者も目当ての商品にすぐにたどり着けます。
WordPressで作ったサイトに検索機能があれば、読者と運営者にとってWin-Winな関係を望めるのです。
WordPress (ワードプレス)の検索機能の基本
仕様
WordPressの検索機能は2つのテンプレートでできており、検索結果を示す「search.php」と検索フォームやボタンを作る「searchform.php」で動きます。ただしデフォルトのままでは、複数キーワードによる検索は半角スペースで区切らないと反応してくれません。
いくら記事にある2つの言葉を同じフォームに入れても、「WordPress 使い方」のように間が全角だと動いてくれないので注意しましょう。
検索の対象
WordPressで作ったサイトの初期設定では、検索のターゲットは主にタイトルと本文です。しかし運営者の設定により、タグやカテゴリーにも反応できるように作り変えられるので便利でしょう。
たとえばある歌手の話題を扱った記事で、カテゴリーやタグとして「新曲」が指定してあるとします。記事本文に同じ言葉が書いていなくても、「新曲」と検索すれば結果として目当ての記事が引っかかるしくみです。
WordPress (ワードプレス)でサイト内検索を実装する方法
必要となるファイル
WordPressで作ったサイトに検索機能を備えるなら、以下の2つのファイルは最低限用意しましょう。
| コード | 機能 |
| search.php | 検索結果そのものを出す |
| searchform.php | サイト内に検索フォームやボタンを出す |
以下の2つを使えば、基本的な検索機能をブログやサイト内に作れるので、アクセスした人にとっての利便性がアップするでしょう。
検索フォームを作成する
検索フォームのコードを書く
検索フォームを作るにはコードを書く必要があります。/wp-content/themes/テーマ名に、searchform.phpを組み込みましょう。
プログラミングのコードが関係することで複雑な作業とイメージする人もいるかもしれません。しかし実際はtwentyseventeenなどのテーマなら、あらかじめ検索機能用のコードが入っているので編集しやすいでしょう。
検索フォームを作る以下のコードを、searchform.phpに記述しましょう。
< button type=”submit” id=”s-btn-area”>
CSSで整形する
検索スペースを作るフォームやボタンの画は、CSSを使って整えられます。style.cssにおける以下のコードを使えばフォーム作成です。
#form{
position:relative;
}
#s-box{
height: 40px;
padding: 0 10px;
position: absolute;
left: 0;
top: 0;
border-radius:2px;
border:solid 3px #eaeaea;
outline: 0;
}
#s-btn-area{
height: 50px;
position: absolute;
left:250px;
top: 0;
background:none;
color:#666;
border:none;
font-size:20px;
outline: 0;
}
#s-btn{
background-color: black;
width: 50px;
height: 30px;
position: relative;
right: 20px;
bottom: 10px;
border-radius: 3px;
font-size: 16px;
color: #fff;
line-height: 31px;
}
フォームを表示させる
作成済みのフォームを画面に出すだめ、以下のコードを追加しましょう。
< ?php get_search_form(); ?>
検索フォームを置きたいページのファイルに記述すれば、サイトやブログに検索機能が現れます。
検索結果を表示するページを作成する
以下のコードをsearch.phpに記述すれば、検索結果を出すためのページを作れます。
< h1> の検索結果
< div class=”col-full”>
< div class=”wrap-col”>
< p>検索キーワードに該当する記事がありませんでした。
< /div>
< /div>
if (have_posts() && get_search_query()) により、検索条件で引っかかる記事があるかチェックでき、あればリスト化させられます。
WordPress (ワードプレス)のページ内検索をさらに便利にするコード
検索結果の表示件数を指定する
初期設定では管理画面の表示設定にある最大投稿件数と同じ数の記事がページに出ますが、search.php のhave_posts上にquery_posts()を使えば件数を指定できます。1ページ10件だけ示したいと思えば、以下のように設定しましょう。
< ?php query_posts($query_string.’&posts_per_page=12′); ?>
< ?php if (have_posts()): ?>
検索結果で多くの記事が引っかかった場合、1ページあたりの表示件数が多いと下まで流すのが面倒と感じる人が多いでしょう。以上のコードで表示件数を絞れば、細かいページ分けにより結果を見やすくなります。
検索キーワードをハイライトする
WordPressの検索機能では、キーワードのハイライトも可能です。ハイライトとは特定のキーワードに対しマーカーのように背景の色をつけるもので、検索で反応した要因としてのキーワードを強調できます。
検索結果で本文やタイトルが出て、テキスト内にキーワードがあるとハイライトがかかるしくみです。以下のコードをfunction.phpに加えることで実現できます。
/【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if(is_search()){ // 検索ページが表示されているときに実行
$keys = implode(‘|’, explode(‘ ‘, get_search_query())); // 検索ワードを分割して配列にして返す
$text = preg_replace(‘/(‘. $keys .’)/iu’, ‘
/【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if(is_search()){ // 検索ページが表示されているときに実行
$keys = implode(‘|’, explode(‘ ‘, get_search_query())); // 検索ワードを分割して配列にして返す
$text = preg_replace(‘/(‘. $keys .’)/iu’, ‘\0‘, $text); // 該当ワードを mark で囲む
}
return $text; // 変更した値を呼び出し元に戻す
}
add_filter(‘the_title’, ‘highlight_search_word’); // タイトルに適用
add_filter(‘the_content’, ‘highlight_search_word’); // 本文に適用
add_filter(‘the_excerpt’, ‘highlight_search_word’); // 抜粋に適用
‘, $text); // 該当ワードを mark で囲む
}
return $text; // 変更した値を呼び出し元に戻す
}
add_filter(‘the_title’, ‘highlight_search_word’); // タイトルに適用
add_filter(‘the_content’, ‘highlight_search_word’); // 本文に適用
add_filter(‘the_excerpt’, ‘highlight_search_word’); // 抜粋に適用
画像のaltにget_the_title()を指定している場合
get_the_title()が画像のaltに入っていると、altにタグが入ってしまいます。ここでのaltは画像を説明したテキストで、本文と一緒に検索での反応を受けるしくみです。
strip_tags()を使えば、タイトルから画像に入ったタグを排除できるので、気になるなら作業を済ませておきましょう。
検索キーワードと検索結果件数を表示する
検索結果件数を表示したいなら、テーマ編集より検索結果ページファイルの好きな場所に対して、以下のコードを貼りつけましょう。
found_posts; ?>
以上だけでは数字しか出ません。以下のように、前後に表示件数を示す文章を加えましょう。
< p class=”snumber”>found_posts; ?>件の記事がヒットしました。
検索結果の表示順を指定する
日付順 (降順) で表示する
検索結果は記事の追加日にならって、降順や昇順に順番を変えられます。まずはdateを指定する形で、function.phpに以下のコードを加えてください。
function my_pre_get_posts($query) {
if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
$query->set( ‘orderby’, ‘date’ ); // 日付順
}
}
add_action( ‘pre_get_posts’,’my_pre_get_posts’ );
ただし以上の高度は検索対象を特定の投稿タイプに限っている場合と同じです。実際に投稿タイプにより検索ターゲットを絞り込んでいるならフィルターブックに以下を足しておきましょう。
$query->set( ‘orderby’, ‘date’ ); // 日付順
降順なら記事が新しい順番に決められて便利です。以下のコードをfunction.phpに追加します。
$query->set( ‘order’, ‘DESC’ ); // 最高から最低へ降順 (3, 2, 1, c, b, a)
日付順 (昇順) で表示する
検索結果を昇順にすれば、古い順番に記事が並びます。こちらの機能も追加したいなら以下のコードをfunction.phpに追加しましょう。
$query->set( ‘order’, ‘ASC’ ); // 最低から最高へ昇順 (1, 2, 3, a, b, c)
検索結果のページタイトルを指定する
検索結果を示すページに独自のタイトルを与えることで、読者に認識させやすくなります。wp_titleを使っていれば定型のタイトル表示です。カスタマイズを希望するならfunctions.phpに以下のコードを足しましょう。
function wp_search_title($search_title){
if(is_search()){
$search_title = ‘「’.get_search_query().’」の検索結果’;
}
return $search_title;
}
add_filter(‘wp_title’,’wp_search_title’);
検索対象の投稿タイプを指定する
検索で引っかかる対象を特定の投稿タイプに指定できるのも、WordPressにおける検索機能の特徴です。投稿 (post)や固定ページ (page)、カスタム投稿 (blog)などから検索のターゲットを形式別に絞り込めます。
functions.phpに以下のコードを追加すれば、投稿タイプ限定の検索結果を実現できます。
/*【出力カスタマイズ】検索対象をカスタム投稿タイプで絞り込む */
function my_pre_get_posts($query) {
if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
$query->set( ‘post_type’, array(‘post’,’page’,’blog’) );
}
}
add_action( ‘pre_get_posts’,’my_pre_get_posts’ );
register_post_typeを使用している場合
function.php内のカスタム投稿タイプをregister_post_type関数で追加していれば、exclude_from_searchの追加で検索対象に入れなければなりません。
register_post_typeの値をfalseに変えれば、カスタム投稿タイプも検索に入れられます。
ページ遷移後も検索フォームへの入力内容を保持する
検索フォームにキーワードを残したいなら、以下のコードを、キーワードを残しながら入れましょう。inputタグのplaceholderとvalueの値に対し、if文を加えることがカスタマイズ例で、検索結果ページへ移ったあとにワードを代入することが重要です。
<form method=”get” id=”searchform” action=””>
<input type=”text” name=”s” id=”s” placeholder=”” value=””/>
WordPress (ワードプレス)のページ内検索に必要なプラグイン
Search Everything
Search Everythingは、ブログやサイト内のあらゆる項目から検索できるプラグインです。
Search Everything Basic Configuration
インストール後、管理画面の左側メニュー下部にプラグイン名が現れます。「Basic Configuration」で、チェックを入れたり外したりすることにより、検索範囲を決められることがポイントです。
たとえば「すべてのカテゴリー名と説明を検索」にチェックを入れると、カテゴリーも検索に引っかかります。設定が決まったら「Save Changes」で更新可能です。
Search Engine Advanced Configuration
検索範囲から外したいカテゴリーや記事があるなら、「Search Engine Advanced Configuration」を使いましょう。テスト検索フォームによるお試しも可能です。
WordPress (ワードプレス)のウィジェット機能でページ内検索を実装する方法
ウィジェットの管理画面を開く
ウィジェットの管理画面より、検索フォームを直接入れられるのもWordPressのポイントです。
ダッシュボードより「外観」を選び、「ウィジェット」に入りましょう。
検索ウィジェットを追加する
ウィジェットでは追加できるがしていない項目が左側に集まり、使用中は右側に分けられています。左側の追加したい項目を、マウスで押さえながら右側に移すというドラッグ&ドロップで対応可能です。
TwentyTwelveのテーマでは、検索フォームは未追加リストの下の方で見つけられるので、移動させましょう。
表示を確認する
作業が終わったあとにサイトを見てみると、ウィジェットに検索フォームが入っているのが分かります。これでアクセスした人は、サイドメニューなどからサイト内の情報をサーチできるようになりました。
WordPress (ワードプレス)のページ内検索で困ったときは
空白を入れた複数キーワードでの検索ができない
WordPressの検索において、初期設定ではキーワード同士の間隔は半角でなければいけません。全角スペースは文字として認めてもらえないので、検索結果が反応しないなど機能を邪魔してしまいます。
WP Multibyte Patchをインストールすれば、全角スペースでも検索できるようになるので注目です。
「クロスサイトスクリプティング対策」をリクエストされた場合の対処法
「クロスサイトスクリプティング」とは、ユーザーが入力したものをサイトに表示するアプリケーションに対し、セキュリティの弱さなどをついてハッカーなどが攻撃を仕掛けることです。
説明文つきの偽リンクを貼ったりして、アクセスした人を危険なサイトに誘うなどの攻撃方法があります。
作ったサイトのセキュリティが弱いと検査の結果、クロスサイトスクリプティング対策リクエストを受けることもあるでしょう。対策がない場合、以下のコードをキーワードに交えた検索により、結果を示すページでアラートが動きます。
alert(document.cookie)
アラートが出たら、悪意のあるプログラム動作の可能性もあり要注意です。htmlspecialchars()を使ったエスケープ処理により、プログラムの文字列にある記号を認識させなくなります。
たとえば「$_GET[‘s’]」で検索キーワードを取っていれば、以下のコードでエスケープ処理を行います。
$str = $_GET[‘s’]; // 検索文字列の取得
$e_str = htmlspecialchars($str, ENT_QUOTES, “utf-8”); // 検索文字列のエスケープ処理
echo $e_str; // 検索文字の表示
検索結果を出力するところには、必ずアラート対策を施しましょう。
WordPress (ワードプレス)でページ内検索まとめ
WordPressで作ったブログやサイトに検索機能を組み込むと、アクセスした人がほしい情報を探しやすくなります。運営者にとっても目当ての記事や商品へのアクセスをアップしやすくなるので便利でしょう。
ただし決まった設定をしていないとユーザーがかえって不便に感じるかもしれません。アラートなどのセキュリティ対策も忘れていると、ハッキングなどの被害により訪問者を悲しませてしまうことになります。
ユーザーが気持ちよく使えることを念頭に置きながら、検索機能をカスタマイズすることが重要です。
