WordPress

【WordPress】カテゴリ内検索を実現する方法!




任意のカテゴリの中の記事を対象にキーワード検索を行うフォームを実現する方法です。

本サイトでは、カテゴリのページ( 例:https://irojiroharaguro.com/topics/web-it/wordpress )の中で、この 【カテゴリ記事の中から検索する機能】 を利用しています。


カテゴリ内検索とは


任意のカテゴリの中の記事を対象にキーワード検索を行うフォームを実現します。


ポイント


カテゴリ [WordPress] の中の記事から検索します。

お好きなキーワード(例:"セキュリティ対策")を入れて検索ボタンを押してください。

(新しいウィンドウを表示します)




WordPress の検索の仕組み


WordPress の基本仕様(機能)で検索は URL の後ろにパラメータを指定することで実現しています。


サイト全体から "キーワード" を検索する場合


サイト全体から特定のキーワードで検索する場合は、以下の URL を発行します。


http(s)://(ドメイン)/?s=キーワード


ドメインの "/" のあとの "?" (クエッション)が、この後にパラメータがあることを意味し、[s=キーワード] で検索したいキーワードを指定します。


ポイント

リンクをクリックすると新しいウィンドウを開きます。

https://irojiroharaguro.com/?s=セキュリティ対策


カテゴリで絞り込む場合


カテゴリで絞り込む場合(カテゴリーページを表示する)は、以下の URL を発行します。


http(s)://(ドメイン)/?cat=カテゴリID


[cat=カテゴリID] で絞り込みたいカテゴリを指定します。カテゴリIDは WordPress の管理画面から [投稿] → [カテゴリ] を選択し場合にカテゴリごとに割り当てられている ID です。


ポイント

リンクをクリックすると新しいウィンドウを開きます。

(カテゴリーページを表示します)

https://irojiroharaguro.com/?cat=10


特定のカテゴリ内の記事から "キーワード" を検索する場合


特定のカテゴリ内の記事から "キーワード" を検索する場合は、カテゴリ検索とキーワード検索のパラメータを組み合わせます。以下の URL を発行します。


http(s)://(ドメイン)/?s=キーワード&cat=カテゴリID


パラメータを [&] で連結して指定します。


ポイント

リンクをクリックすると新しいウィンドウを開きます。

https://irojiroharaguro.com/?s=セキュリティ対策&cat=10


カテゴリ内検索を実現する方法


記事内に埋め込む場合


簡単な HTML のフォームタグで実現することが可能です。


■(サンプルコード)

<form>
    <input style="width : 80%;" name="s" type="search" />
    <input name="cat" type="hidden" value="カテゴリID" />
    <input type="submit" value="検索" />
</form>


このコードの場合は、表示しているページが切り替わり、検索結果を表示します。

カテゴリID は適宜、書き換えてください。

※ ブロックエディタ(Gutenberg)の場合、[カスタム HTML] で上記コードを埋め込みます。


新しいウィンドウを表示する場合


記事上部のサンプルのように新しいウィンドウを表示する場合は、JavaScript を併用して実現しています。


■(サンプルコード)

<script language="javascript" type="text/javascript">
function functionWinOpenForSearch(){
    let varSearchString = document.getElementById('myIdSearchString').value;
    let varURLString = 'https://(ドメイン)/?s=' + varSearchString + '&cat=カテゴリID';
    // alert(varURLString);

    window.open(varURLString);
}
</script>

<form>
    <input style="width : 80%;background-color: #FFFCDB;" id="myIdSearchString" type="search" value="ログイン">
    <input style="width : 15%;" type="button" value="検索" Onclick="functionWinOpenForSearch()">
</form>


このコードの場合は、あたらしいウィンドウを表示して検索結果を表示します。

ドメイン(URL)、カテゴリID は適宜、書き換えてください。

※ ブロックエディタ(Gutenberg)の場合、[カスタム HTML] で上記コードを埋め込みます。


まとめ


任意のカテゴリの中の記事を対象にキーワード検索を行うフォームを実現する方法です。



  • WordPress の検索は URL のパラメータの指定で行います
  • 検索キーワードと、カテゴリの絞り込みはパラメータを連結することで実現可能です
  • 検索フォームは HTML の form タグで実現可能です


探して探してお宝を見つけ出せ―!(笑)

(お宝ないけど(笑))




WordPress の情報、テクニック一覧はこちらをクリック!









Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ