misallychan.com

読者です 読者をやめる 読者になる 読者になる

misallychan.com

はてなブログ初心者。デザイン、WordPress、HTML・CSS、アニメ、漫画、音楽についてとか。

【WordPressの検索機能を全網羅】絞り込み検索やカスタム投稿タイプでの検索、カテゴリ除外など検索機能カスタマイズまで!

WordPressで検索機能、よく使われているのを見かけるし、よく使いたい場面に出会います。
今回は、シーン別でWordPressの検索機能設置方法をご紹介します。


f:id:misallychan:20170412110835p:plain


まずは基本のフリーワード検索

ほぼブログ機能でまかなっているならこちら。

<form method="get" action="<?php bloginfo( 'url' ); ?>">
    <input name="s" id="s" type="text" />
    <input id="submit" type="submit" value="検索" />
</form>



これで、ブログ内のフリーワードで検索が可能になります!

絞り込み検索

ユーザにこのカテゴリでこの関連ワードで絞り込んで検索させたい!という場合はこちら。


プラグインで簡単絞り込み機能設置

→メリット:無料、分かりやすい。
→デメリット:出力コード書き換えが不自由、サポートが期待できない。


→メリット:分かりやすく使いやすくHTML書き換えも簡単。
→デメリット:有料、しかも高額。




どちらも、フリーワードやカテゴリ、タグ、タクソノミー、カスタムフィールドの値で絞り込むことが可能です。

プラグインを使わず絞り込み機能設置

引用元:WordPressでカテゴリー&タグを絞り込み検索をする

<div id="search">
<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>
</div>



カテゴリとタグとフリーワードで絞り込みが可能です。


こちらでも詳しく解説されています!詳細な絞り込み検索が可能!▼
絞り込み検索をプラグインを使わずに実装[WordPress]




絞り込む検索は、例えば住宅を探すとき…、例えばお店を探すとき…、例えば通販で買い物をするとき…、などなどに、使える機能です!
皆様も何度も、実際使用する場面に立ち会ったことがあるのではないでしょうか?


ブログではあまり必要ないかもしれませんが、大きな店舗を持つ企業様のコーポレートサイトや、幅広い商品やブランドを持つ通販サイトでは、ユーザにとっては大変便利な機能となるはず!ぜひ活用してくださいね。


固定ページや特定のカテゴリーをあらかじめ除外した検索

さて。検索機能をつけたはいいものの、「投稿」した記事全部表示されちゃうー!!!
このカテゴリはブログじゃないし、このページはここに表示させたくないのに!なんてこと、ありますよね。


投稿タイプでは、カテゴリによって違う表示をさせてる方も多いはず。
もちろん、カテゴリごとに役割も違うはず。


そんな場合はこちら。
除外はもちろん、検索機能を詳細に設定することができます。


検索機能拡張プラグイン!

こちらのプラグインで簡単設定!▼
wordpress.org
Search Everything


設定>Search Everythingから編集画面へ。
「指定したカテゴリーを検索対象に含めない」という項目で、除外したいカテゴリーIDを入力。
なんと、カスタムフィールドを検索対象に含めることもできます。


ただ、デフォルトの検索機能一つの設定に限るので、色々な場面で用途別の検索機能を設定したい時には邪魔になることもあるかもしれませんね・・・。


カスタム投稿タイプ内のフリーワード検索

カスタム投稿タイプ内で検索機能を設置したい場合はこちら。


これこれ…実はこの記事を書こうと思い当たったのは、実は検索機能でずっと悩んでいたことがありまして。
それが、カスタム投稿タイプでの検索機能。


カスタム投稿タイプとは、通常の「投稿」とは別に、新たにカスタマイズしたオリジナルの投稿タイプのことを言いますが・・・
これ、カテゴリまみれになったりとか、機能がごちゃごちゃになったりとか、管理をしやすくするときとかに、とーっても便利なんです。
カスタム投稿タイプの詳細は過去記事にて。
超便利!カスタム投稿タイプが簡単に作れるCustom Post Type UIの使い方と表示方法を解説! - misallychan.com




しかし!大変便利なこの機能で、検索機能を設置しても、通常の「投稿」が出てきてしまう。
きちんとsearch-カスタム投稿タイプ名.phpを作ったにも関わらず、色々な方法を試しても意図せずページに意図しない表示で飛んでしまう。
そんな問題を、今回解決しちゃいますよ。

まずはfunction.phpに付け加えます。
引用元:WordPressで特定のカスタム投稿内だけ検索する検索フォーム

// テンプレート読み込みフィルターをカスタマイズ
add_filter('template_include','custom_search_template');
function custom_search_template($template){
    // 検索結果の時
    if ( is_search() ) {
        // 表示する投稿タイプを取得
        $post_types = get_query_var('post_type');
        // search-{$post_type}.php の読み込みルールを追加
        foreach ( (array) $post_types as $post_type )
            $templates[] = "search-{$post_type}.php";
        $templates[] = 'search.php';
        $template = get_query_template('search',$templates);
    }
    return $template;
}



これをまるっと設置します。
その後、設置したい場所に以下を付け加えます。

<form method="get" action="<?php bloginfo( 'url' ); ?>">
<input type="hidden" name="post_type" value="カスタム投稿タイプ名">
    <input name="s" id="s" type="text" />
    <input id="submit" type="submit" value="検索" />
</form>



「カスタム投稿タイプ名」の箇所に、該当のカスタム投稿タイプ名を入力してください。
これで、指定したカスタム投稿タイプでもフリーワード検索が可能となります!!!


やったー!引用元のブログ様方ありがとうございます。涙!




ちなみに、query_postsで指示を出す手段も考えましたが、前回のことがあるので
こちらの「input type="hidden"」という隠し要素を埋め込んで、カスタム投稿タイプを表示する処理を施す方が良いかと思います!

まとめ

今回ご紹介させて頂いた機能たち


◎基本のフリーワード検索
◎絞り込み検索
◎カテゴリ除外検索
◎カスタム投稿内検索


いかがでしたかー!?長かったですが、ぎゅぎゅっっっと詰め込んでご紹介させて頂きました!!!
きっとお役立てるのではないかと!!お困りの方はぜひ!お試しあれ〜!!!