プラグインなしでカテゴリやタグで検索の絞り込みを実装するスニペット

記事投稿が増加したりカスタムフィールドを使用したりと、サイト内のコンテンツが増加すると、wordpressの標準で使用できる検索窓のテキスト検索だけでは物足りなかったりします。

かかかず

記事数が多いと検索結果も多くなるので、検索で絞り込めた方がいいです。

今回は、プラグインなしでサイト内の検索条件を変更する方法についてご紹介します。

絞り込み検索の検索窓
検索条件を変える方法
- カスタムフィールドの値をWordPressの検索対象に含める方法
- 特定のカスタムフィールドのみ検索対象にしたい場合

絞り込み検索の検索窓

wordpressで記事を投稿していくとそれに比例して、カテゴリーやタグが増えていきがちです。その際、wordpressの標準の検索窓をカスタマイズして、キーワードやタグで絞り込みができると便利です。

ここではカテゴリーとタグの絞り込み機能を持たせた3つと、おまけで当サイトで使用しているwordpressテーマSANGOの検索窓をご紹介します。

全部のスニペットは、設置したい場所にphpで記述して、SANGOの検索窓は設置場所に応じてCSSの調整が別途必要なのでご注意ください。

2020年11月2日プラグインなしでページ内にPHPを読み込む方法

かかかず

WordPressでPHPの読み込ませる場合は、上記の記事を参考にしてみてください。

キーワード＋カテゴリーの絞り込み検索

キーワードを指定して、カテゴリーを選択、検索することができます。

検索窓＋プルダウン式のカテゴリー一覧で、指定したカテゴリーにある指定キーワードを含む記事を検索することができます。

コードを表示する

php

<form method="get" action="<?php bloginfo( 'url' ); ?>">
<input name="s" id="s" type="text" />
<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=カテゴリー選択'); ?>
<input id="submit" type="submit" value="検索" />
</form>

SANGOのキーワード＋カテゴリー検索窓

コードを表示する

php

<form role="search" method="get" id="searchform" class="searchform" action="<?php bloginfo( 'url' ); ?>">
    <div>
        <input type="text" placeholder="サイト内検索" id="s" name="s" value="" />
		<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=カテゴリー選択'); ?>
        <button type="submit" id="searchsubmit" ><i class="fa fa-search"></i>
        </button>
    </div>
</form>

キーワード＋タグの絞り込み検索

キーワードを指定して、タグを選択、検索することができます。

設置すると、検索窓＋プルダウン式のタグ一覧が表示され、指定したタグが登録されていて、指定したキーワードを含む記事を検索することができます。

コードを表示する

php

<form method="get" action="<?php bloginfo( 'url' ); ?>">
<p>検索</p>
<input name="s" id="s" type="text" />
<?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->name ); ?></option>
<?php endforeach; ?>
</select>
<?php endif; ?>
<input id="submit" type="submit" value="検索" />
</form>

SANGOのキーワード＋タグ検索窓

コードを表示する

php

<form role="search" method="get" id="searchform" class="searchform" action="<?php bloginfo( 'url' ); ?>">
    <div>
        <input type="text" placeholder="サイト内検索" id="s" name="s" value="" />
<?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->name ); ?></option>
<?php endforeach; ?>
</select>
<?php endif; ?>
        <button type="submit" id="searchsubmit" ><i class="fa fa-search"></i>
        </button>
    </div>
</form>

キーワード＋カテゴリー＋タグの絞り込み検索

キーワードを指定して、カテゴリーを選択、タグを選択、検索することができます。

設置すると、検索窓＋プルダウン式のカテゴリー一覧が表示され、指定したカテゴリーにある指定したタグが登録されていて指定キーワードを含む記事を検索することができます。

検索

コードを表示する

php

<form method="get" action="<?php bloginfo( 'url' ); ?>">
<p>検索</p>
<input name="s" id="s" type="text" />
<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=カテゴリー選択'); ?>
<?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->name ); ?></option>
<?php endforeach; ?>
</select>
<?php endif; ?>
<input id="submit" type="submit" value="検索" />
</form>

SANGOのキーワード＋カテゴリー＋タグ検索窓

コードを表示する

php

<form role="search" method="get" id="searchform" class="searchform" action="<?php bloginfo( 'url' ); ?>">
    <div>
        <input type="text" placeholder="サイト内検索" id="s" name="s" value="" />
<?php wp_dropdown_categories('depth=0&orderby=name&hide_empty=1&show_option_all=カテゴリー選択'); ?>
<?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->name ); ?></option>
<?php endforeach; ?>
</select>
<?php endif; ?>
        <button type="submit" id="searchsubmit" ><i class="fa fa-search"></i>
        </button>
    </div>
</form>

検索条件を変える方法

wordpressに標準で実装されている検索には、カスタムフィールドが検索対象に含まれておらず、結構不便です。

ここではカスタムフィールドの対象範囲を指定する方法をご紹介します。

いずれの方法も、functions.phpにコードを追記するだけで実装が可能です。

カスタムフィールドの値をWordPressの検索対象に含める方法

以下のコードでカスタムフィールドの値全て検索対象となります。

コードを表示する

functions.php

function custom_search($search, $wp_query) {
global $wpdb;
if (!$wp_query->is_search)
return $search;
if (!isset($wp_query->query_vars))
return $search;
$search_words = explode(' ', isset($wp_query->query_vars['s']) ? $wp_query->query_vars['s'] : '');
if ( count($search_words) > 0 ) {
$search = '';
$search .= "AND post_type = 'post'";
foreach ( $search_words as $word ) {
if ( !empty($word) ) {
$search_word = '%' . esc_sql( $word ) . '%';
$search .= " AND (
{$wpdb->posts}.post_title LIKE '{$search_word}'
OR {$wpdb->posts}.post_content LIKE '{$search_word}'
OR {$wpdb->posts}.ID IN (
SELECT distinct post_id
FROM {$wpdb->postmeta}
WHERE meta_value LIKE '{$search_word}'
)
) ";
}
}
}
return $search;
}
add_filter('posts_search','custom_search', 10, 2);

投稿のカスタムフィールドに適当な値を登録して、その値をキーワード検索して
検索結果にその投稿が出力すれば、カスタマイズは成功です。

特定のカスタムフィールドのみ検索対象にしたい場合

特定のカスタムフィールドを検索対象にしたい場合、下記のコードをfunctions.phpに追記します。

コードを表示する

functions.php

function custom_search($search, $wp_query) {
global $wpdb;
if (!$wp_query->is_search) return $search;
if (!isset($wp_query->query_vars)) return $search;

$search_words = explode(' ', isset($wp_query->query_vars['s']) ? $wp_query->query_vars['s'] : '');
if ( count($search_words) > 0 ) {
$search = '';
$search .= "AND post_type = 'post'";
foreach ( $search_words as $word ) {
if ( !empty($word) ) {
$search_word = '%' . esc_sql( $word ) . '%';
$search .= " AND (
{$wpdb->posts}.post_title LIKE '{$search_word}'
OR {$wpdb->posts}.post_content LIKE '{$search_word}'
OR {$wpdb->posts}.ID IN (
SELECT distinct post_id
FROM {$wpdb->postmeta}
WHERE {$wpdb->postmeta}.meta_key IN ('カスタムフィールド名', 'カスタムフィールド名') AND meta_value LIKE '{$search_word}'
)
) ";
}
}
}
return $search;
}
add_filter('posts_search','custom_search', 10, 2);

このコードは調整が必要で、WHERE {$wpdb->postmeta}.meta_key IN (‘カスタムフィールド名’, ‘カスタムフィールド名’)へ検索対象にしたいカスタムフィールドの名前を記述する必要があります。

例えば、【00001】と【00002】というカスタムフィールドを検索対象にしたい場合は、('00001', '00002')と記述します。

さらに検索対象とするカスタムフィールドの値が2つ以上ある場合は、('カスタムフィールド名', 'カスタムフィールド名', 'カスタムフィールド名')で指定し、最後のカスタムフィールド名の後ろに【,】は付けないようにしましょう。

参考サイト

参考WordPressでカテゴリー＆タグを絞り込み検索をするWEBOPIXEL