Webデザイナーブログから学ぶホームページ制作

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（ワードプレス）で標準搭載の検索フォーム「検索窓」のデザインをカスタマイズする方法

「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>

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

「カテゴリー選択」要素を表示するには、「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>

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

<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>

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