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 のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


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










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




Presented By Irojiro Haraguro .Com