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>

【「検索窓」のデザインをカスタマイズする方法】
1.検索フォーム「検索窓」のコードから必要の無い記述を削除
2.検索フォーム「検索窓」にclassコードを追記してボタンのデザインを変更
3.検索フォーム「検索窓」にclassコードを追記してテキストボックスのデザインを変更

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

検索フォーム「検索窓」のボタンのデザインを変更する場合は、ボタン要素の箇所に新しく「div」タグを追記し「class」を記述します。

「submit」が記載されている「input」の行がボタン部分のコードになりますので、「input」の行を「div」で囲み、囲んだ「class」にcssで色の変更や形の変更等を追記しすればボタンのデザインが変更できます。

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" value="" name="s" id="s" />
<div class="search_test01">
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>

.search_test01 {
  display:inline-block;
  margin: 0px 0 0 5px;
  border:none;
}
.search_test01 input[type="submit"] {
  color: #fff;
  background-color:#000;
  border:1px solid #000;
  padding: 0 15px 0 15px;
}
.search_test01:hover {
  opacity: .6;
}

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" value="" name="s" id="s" />
<div class="search_test02">
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>

.search_test02 {
  display:inline-block;
  margin: 0px 0 0 5px;
  border:none;
}
.search_test02 input[type="submit"] {
  color: #fff;
  background-image: linear-gradient(90deg, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));
  border:none;
  padding: 0 15px 0 15px;
  border-radius: 6px;
}
.search_test02:hover {
  opacity: .6;
}

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" value="" name="s" id="s" />
<div class="search_test03">
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>

.search_test03 {
  display:inline-block;
  margin: 0px 0 0 5px;
  border:none;
}
.search_test03 input[type="submit"] {
  color: #fff;
  background-image: linear-gradient(90deg, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));
  border:none;
  padding: 0 15px 0 15px;
  border-radius: 6px;
}
.search_test03:hover {
  opacity: .6;
}

検索フォーム「検索窓」のテキストボックスのデザインを変更する場合は、テキストボックス要素の箇所に新しく「class」を追記します。

「text」が記載されている「input」の行がテキストボックス部分のコードになりますので、「input」の行内に「class」を追記し、cssでボーダーラインや背景色等を追記しすればテキストボックスのデザインが変更できます。

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" class="search_test01_box" value="" name="s" id="s" />
<div class="search_test01">
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>

.search_test01_box{
  border:1px solid #000;
}

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" class="search_test02_box" value="" name="s" id="s" />
<div class="search_test01">
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>

.search_test02_box{
  border:1px solid #b0b0b0;
  background-color:#ebebeb;
}

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" class="search_test03_box" value="" name="s" id="s" />
<div class="search_test03">
<input type="submit" id="searchsubmit" value="検索" />
</div>
</form>

.search_test03_box{
  border:1px solid #b0b0b0;
  background-color:#ebebeb;
  border-radius:54px;
}

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

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