2023.10.1|WordPress

WordPress(ワードプレス)で検索フォームにカテゴリー選択を追加してデザインする方法

WordPress(ワードプレス)で検索フォームにカテゴリー選択を追加してデザインする方法

WordPress(ワードプレス)では、標準搭載の機能として検索フォーム「検索窓」が用意されています。
WordPress(ワードプレス)の検索フォームは、通常ウェブサイトのヘッダーまたはサイドバーに配置されています。一般的には、テキストボックスと検索ボタンから構成されており、訪問者はキーワードやフレーズを入力して検索ボタンをクリックすることで、関連するコンテンツを見つけることができます。

検索フォームは非常に便利で使いやすいですが、デフォルトのデザインはテーマによって異なります。また、デザインや機能に関してカスタマイズしたい場合もあります。 また、デフォルトで用意されている検索フォームは「キーワード」で検索するのみの機能となっておりますが、「カテゴリー一覧」を追加して検索フォームを作成することができます。 「カテゴリーから探す」を追加することで、「カテゴリー一覧」+「キーワード」を組み合わせて検索することができます。
※検索フォーム「検索窓」のスタイルや位置、表示される検索結果の設定などを変更したり、プラグインを使用して高度な検索機能を追加したりすることが可能です。

今回は、WordPress(ワードプレス)で検索フォームにカテゴリー選択を追加してデザインする方法を解説します。

検索フォーム「検索窓」とは

WordPress(ワードプレス)では、テーマによってデフォルトの検索フォームが提供されます。通常、テーマのヘッダーやサイドバーに配置されており、訪問者はテキストボックスにキーワードやフレーズを入力して検索ボタンをクリックすることで、サイト内の関連するコンテンツを検索することができます。

検索フォームのデザインや表示方法は、使用しているテーマによって異なります。一部のテーマでは、検索フォームがシンプルなテキストボックスのみで表示される場合もあります。他のテーマでは、検索ボタンやアイコン、検索結果の表示方法など、より洗練されたデザインが採用されています。

WordPress(ワードプレス)の検索フォームをカスタマイズする方法はいくつかあります。HTMLやCSSの知識があれば、テーマのファイルを編集することができます。

標準搭載の検索フォーム「検索窓」にカテゴリー選択を追加してデザインする方法

標準搭載の検索フォーム「検索窓」のデザインをカスタマイズする場合は、テーマファイル内の「searchform.php」ファイルをカスタマイズする必要があります。

サーバーにインストールされたWordPressの「テーマ」ファイルから「searchform.php」ファイルを探します。
「searchform.php」ファイルを開き、検索フォーム「検索窓」として記述されているコードにcss等を追記することでデザインの変更ができます。

標準搭載の検索フォーム「検索窓」
標準搭載の検索フォーム「検索窓」コード
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
WordPress(ワードプレス)で標準搭載の検索フォーム「検索窓」のデザインをカスタマイズする方法
【「検索窓」にカテゴリー選択を追加してデザインする方法】
1.検索フォーム「検索窓」のコードから必要の無い記述を削除
2.検索フォーム「検索窓」にカテゴリー選択を追加
3.検索フォーム「検索窓」に「html」と「class」にコードを追記してデザインを変更

1.検索フォーム「検索窓」のコードから必要の無い記述を削除

「searchform.php」ファイル内に記述されている検索フォーム「検索窓」のコードから必要の無い記述を整理ましょう。

検索フォーム「検索窓」のタイトル部分・タイトルラベル「Search for:」が必要ない場合は、テキストで記述されているテキストのみを削除する方法とタイトル部分が記述されているラベル「label」一行をそのまま削除する方法があります。
「div」コードのみ記述されている個所がありますが、こちらのタグも必要が無いので一度削除しても良いです。 また、「value」に記述されている「Search」は英語表記になっているので、英語表記を「検索」に変更いたします。

変更前検索フォーム「検索窓」
変更前コード
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
変更後検索フォーム「検索窓」
変更後コード
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</form>

2.検索フォーム「検索窓」にカテゴリー選択を追加

検索フォーム「検索窓」にカテゴリー選択を追加する場合は、「カテゴリー選択」要素のコードを追加します。

「カテゴリー選択」要素を表示するには、「wp dropdown categories」のテンプレートタグを利用して「セレクトボックス(ドロップダウンメニュー)」で表示します。 また、「wp dropdown categories」テンプレートタグは、パラメータを渡すことで、絞り込みやカテゴリーID等の指定をすることができます。

カテゴリー選択
カテゴリー選択コード
<?php wp_dropdown_categories( 'show_option_all=カテゴリー選択' ); ?>
カテゴリー選択を検索フォーム「検索窓」に追加
カテゴリー:  
キーワード:
  
カテゴリー選択を検索フォーム「検索窓」に追加したコード
<form name="search_form" method="get" action="<?php echo home_url(); ?>">
<input type="hidden" name="post_type" value="post">
カテゴリー:<?php wp_dropdown_categories( 'show_option_all=カテゴリー選択' ); ?>&nbsp;<br>キーワード:<input type="text" name="s" value="<?php the_search_query(); ?>"><br>&nbsp;&nbsp;
<input id="submit" type="submit" value="検索" />
</form>
パラメータ要素
パラメータ 説明
show_option_all カテゴリーIDの昇順にソートを指定
show_option_none カテゴリーがない場合のテキストを指定
option_none_value 未選択時のoption要素のvalue属性値を指定
orderby ソート順を指定
order ソート順を示すASC・DESCを指定
show_count 投稿数を表示・非表示を指定
hide_empty 投稿記事がないカテゴリーを取得・非取得を指定
child_of 親カテゴリーIDを指定
exclude 取得したくないカテゴリーのIDを指定
echo 表示する場合はtrue、取得する場合はfalseを指定
selected フォームのselected(初期選択値)とするカテゴリーなしを指定
hierarchical カテゴリーを階層型構造で表示しない指定
name select要素のname属性値を指定
id select要素のid属性値を指定
class select要素のclass属性値を指定
depth 階層付きの場合はtrue、階層なし(フラット)の場合はfalseを指定
tab_index select要素のtabindex属性値を指定
taxonomy タクソノミーのスラッグを指定
hide_if_empty カテゴリー(タクソノミー ‘category’ のターム)が一つもなければフォーム自体を非表示
value_field option要素のvalue属性値を指定

3.検索フォーム「検索窓」に「html」と「class」にコードを追記してデザインを変更

「カテゴリー選択」要素のコードを追加した検索フォーム「検索窓」にclassコードを追記します。 検索フォーム「検索窓」の「form」に「html」と「class」を追記し、「form」全体のデザインを変更します。

テキストボックスを変更(ボーラーラインを黒色)した検索フォーム「検索窓」
検索
 
キーワード:
  
htmlコード
<div class="box02">
<table width="100%">
  <tr>
    <th>検索</th>
    <td><form name="search_form" method="get" action="<?php echo home_url(); ?>">
<input type="hidden" name="post_type" value="post">
<?php wp_dropdown_categories( 'depth=3&exclude=1&orderby=name&hide_empty=1&order=DESC&hierarchical=1&show_option_all=カテゴリー選択' ); ?>&nbsp;<br>キーワード:<input type="text" name="s" value="<?php the_search_query(); ?>"><br>&nbsp;&nbsp;
<input id="submit" type="submit" value="検索" />
</form></td>
  </tr>
</table>
</div>
cssコード
.box02{
  margin:5% auto 5%;
  padding:3%;
  background-color:#f4f4f4;
  border-radius: 18px;
}
.box02 table{
  font-size:14px;
  border-radius: 18px;
  background-color: #8b5e3e;
}
.box02 table tr th {
  width:15%;
  font-weight:bold;
  color:#fff;
  padding:2%;
  vertical-align:middle;
}
.box02 table tr td {
  width:85%;
  padding:2%;
  border:1px solid #8b5e3e;
  background-color:#fff;
  vertical-align:middle;
}
.box02 table tr td br {
  display: none;
}
.box02 input{
  border:1px solid #cdcdcd;
  padding:1px;
}
.box02 input[type=submit]{
  color:#FFF;
  border-radius: 40px;
  box-shadow: 0px 0px 0px 5px #ff9532;
  border: 1px dashed #FFF;
  background-color: #ff9532;
}
.box02 select{
  padding: 4px 5px 4px 5px;
  border:1px solid #cdcdcd;
}
.box02 input[type="submit"]{
  padding:5px 20px 5px 20px;
}

まとめ

WordPress(ワードプレス)の標準搭載の検索フォーム「検索窓」は、デザイン的にも利用しずらいですね。検索フォーム「検索窓のデザインカスタマイズは自由にデザイン変更できるのでカスタマイズ方法は覚えておくとよいです。

WordPress(ワードプレス)の検索フォーム「検索窓」は、ホームページの訪問者がサイト内のコンテンツを検索するためのツールであり、デザインと機能をカスタマイズすることで、より使いやすく効果的な検索体験を提供することができます。より検索を利用しやすいように「カテゴリー選択」を追記することでユーザービリティが向上いたします。
ユーザービリティを考え、ホームページのデザインに合わせて調整することをおすすめいたします。