WordPressでプラグインを使って検索機能を作ってみよう!【初心者向け】

WordPressで検索機能を作る解説記事です。初心者でもできるようにプラグインを使って説明していきます。ブログなどを書いている中で記事がどんどん増えてくると検索機能が必要になってきます。ぜひトライしてみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

WordPressで検索機能の作り方を解説している記事になります。検索機能を自分の力で開発しようとすると大変なので、今回はプラグインを使って行います。

WordPressのウィジェットには標準でシンプルなキーワード検索フォームが備わっていますが、「WP Custom Fields Search」というプラグインを使用することでカテゴリーやタグによる絞り込みが可能な検索フォームを作成することができます。

プラグインを使えば簡単に設置できるので、ぜひ試してみましょう。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター!!WordPressの記事数が多くなって、検索機能をつけたいって要望がきたんですけど・・・。

田島悠介

WordPressのウィジェットにもあるけど、詳細な検索をつけたいのならプラグインを使うと良いよ。良いプラグインを教えてあげるね。

大石ゆかり

はい、お願いします!!!

 

プラグインを使って検索機能を作ってみる

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

 

WP Custom Fields Searchはウィジェットの管理画面内でフォームの設置や編集をすべて行うことが出来ます。
「外観」「ウィジェット」を選択します。

cfs_p_1

「利用できるウィジェット」内から「Custom Fields Search」を右の欄の表示させたい場所にドラッグ&ドロップで移動させます。今回はサイドバー内に配置しています。

cfs_p_2

サイドバー内の表示させたい位置に上下に移動させます。ここでは一番上にしています。

cfs_p_3

右の▼をクリックし設定画面を開きます。

有効化してすぐの状態では「キーワードによる検索」「カテゴリーによる検索」が配置されています。

cfs_p_4

今回はここに「タグによる検索」の項目を追加してみます。
「Add Field」をクリックします。

cfs_p_5

新しい項目が追加されました。

「Show/Hide Config」をクリックすると項目の設定画面表示のオン・オフを切り替えることができます。

cfs_p_6r

「Show/Hide Config」から設定画面を開いたところです。

「Label」の部分には検索に分かりやすい名前を付けます。今回は「Tag」としています。(※日本語入力も可能です)
「Data Type」では検索を行う対象を「Post Field」(投稿記事)「Category」(カテゴリー)などの項目から選択します。今回は「Tag」を選択します。

cfs_p_9

「Widget」の項目では検索フォームの形式を設定します。ここではテキスト入力の他にドロップダウンやラジオボタン・チェックボックスなどを選択することができます。

cfs_p_10

また、各検索項目の表示される順番はドラッグで並び替えることができます。
設定が完了したら「保存」をクリックします。

cfs_p_11

サイドバーに検索フォームが追加されました。
各項目の名前・対象や表示形式などの設定項目はフォームを設置した後でもウィジェットの管理画面から変更が可能です。

cfs_p_12

これで検索機能を作ることができました。

たったこれだけで、自分のサイト内をキーワード検索できるようになるので、活用しない手はないですね。

ぜひ、WordPressの使い方を覚えましょう!

 

大石ゆかり

キーワードだけでなく、カテゴリーやタグで絞って検索できるのっていいですね♪

田島悠介

そうだね。これで記事数の多いサイトも使いやすくなるね。

大石ゆかり

はい♪

 

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する