プラグインなしでアイコンをクリックすると WordPressの検索フォームが拡大されて表示されるスニペット

検索フォームは、WordPressにも標準で付いていますがデフォルトの状態はベタでそのまま表示されます。

この検索フォームを、多少のアニメーションを使い「虫眼鏡アイコンをクリックすると、フォームがヒョイっと拡大されて現れる」ものをカスタマイズして作ってみました。

スニペットの手順や方法はPHPを前提にしていますが、HTMLとCSSだけでの設置も可能な方法もご紹介しているので、是非最後までご覧いただけると嬉しいです。

クリックで拡大検索フォームのサンプル
実装の手順と方法
コピペ用コード一式
ざっくりとしたコードの解説

クリックで拡大検索フォームのサンプル

虫眼鏡アイコンをクリックすると、検索フォームが左から右にゆっくりと大きくなりながら表示されます。

そして検索せずにフォーム以外の場所がクリックされると、フォームが非表示になりアイコンだけの表示に戻ります。

かかかず

こんな感じで、小さいスペースに検索フォームを設置する時に使えるスニペットです。

実装の手順と方法

それでは、実装の手順と方法についてです。言語は、PHP・CSSの2種で、4つの手順です。

これらを順に説明していきます。

PHPのファイルを使えるよう準備

記事ページにPHPのコードをそのまま記述をしても、表示されません。

その為、PHPをショートコードで好きな場所で使用できるように準備しておく必要があるので、以下の記事を参考に準備しておきましょう。

2020年11月2日プラグインなしでページ内にPHPを読み込む方法

かかかず

これでウィジェットや記事内など、好きな場所にPHPを設置する事ができます。

PHPを記述

次に、表示させたい場所。もしくはショートコードで読み込みさせるPHPのファイルにコードを記述します。

PHP

<div class="searchFromMini">
<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" id="search-formmini">
  <input type="hidden">
  <input type="search" placeholder="サイト内検索" id="search-field" autocomplete="off" class="search-field" name="s" value="">
　<button class="search-submit"><i class="fa fa-search"></i></button>
</form>
</div>

PHPじゃなく、HTMLで好きなところに設置したい場合は以下の方法で可能です。

PHPを使わずHTMLで設置したい場合

form タグ内の action="<?php echo esc_url(home_url('/')); ?>" の「action」部分を action="サイトのURL" に書き換えて設置すればOKです。

CSSを記述

最後に、見た目を整える為にCSSをコピペします。

CSS

/* Search */
.searchFromMini {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    position: relative;
}
#search-formmini {
    display: flex;
    position: relative;
    justify-content: center;
    flex-wrap: wrap;
    line-height: 1;
	 height: 40px;
}

.search-field {
  position: absolute;
  transition: all 0.5s ease-in-out;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #FFF;
  box-sizing: border-box;
  color: #FFF;
  cursor: pointer;
  font-weight: 300;
  opacity: 0;
  width: 0;
  z-index: 3;
}
.search-field:focus {
    cursor: text;
    opacity: 1;
    outline: none;
    width: 100%;
    z-index: 1;
    background: #FFF;
    border-radius: 9999px;
    padding-left: 20px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 11%);
    line-height: 1.2;
}
.search-field:focus:hover ~ .search-submit .fa-search {
  color: #1565C0;
}
.search-field:hover ~ .search-submit .fa-search {
  color: #1565C0;
}

.search-submit {
    transition: all 0.5s ease-in-out;
    background-color: transparent;
    position: absolute;
    z-index: 2;
    right: 20px;
    height: 100%;
    color: #1565C0;
    border: none;
}
.search-submit:hover .fa-search {
  color: #1565C0;
}
form#search-formmini input[type="search"] {
    width: 40px;
    position: relative;
	 transition: all 0.5s ease-in-out;
	 margin: 0;
	 height: 40px;
}
form#search-formmini input[type="search"]:focus {
    width: 300px;
    font-size: 0.9rem;
    line-height: 1.4;
}
form#search-formmini input[type="search"]:focus ~ .search-submit {
    right: 24px;
    color: #6bb6ff;
}

かかかず

ちなみに虫眼鏡アイコンはFontAwesomeを使っているので、そのまま使う場合はFontAwesome本体も読み込むようにしましょう。

表示させたい場所に記述

最後に、検索フォームを表示させたい場所に記述します。

STEP.1 でPHPを読み込ませる設定をして、「searchformcustom.php」という検索フォームのPHPファイルを作った場合は、HTMLに以下のような記述をすればOKです。

ショートコード

[call_php file='searchformcustom']

かかかず

あとは上記で紹介したPHPを使わない方法や、後述するget_search_form 関数でもOKなので、好みに応じた方法で設置してみてください。

コピペ用コード一式

上記の「手順と方法」で紹介した同じコードです。

「詳しい説明等は不要でコピペして使いたい」方は、こちらのコードをそれぞれまるっとコピペすれば完了です。

コードを表示する

PHP

<div class="searchFromMini">
<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" id="search-formmini">
  <input type="hidden">
  <input type="search" placeholder="サイト内検索" id="search-field" autocomplete="off" class="search-field" name="s" value="">
　<button class="search-submit"><i class="fa fa-search"></i></button>
</form>
</div>

CSS

/* Search */
.searchFromMini {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    position: relative;
}
#search-formmini {
    display: flex;
    position: relative;
    justify-content: center;
    flex-wrap: wrap;
    line-height: 1;
	 height: 40px;
}

.search-field {
  position: absolute;
  transition: all 0.5s ease-in-out;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #FFF;
  box-sizing: border-box;
  color: #FFF;
  cursor: pointer;
  font-weight: 300;
  opacity: 0;
  width: 0;
  z-index: 3;
}
.search-field:focus {
    cursor: text;
    opacity: 1;
    outline: none;
    width: 100%;
    z-index: 1;
    background: #FFF;
    border-radius: 9999px;
    padding-left: 20px;
    box-shadow: 0 1px 6px rgb(0 0 0 / 11%);
    line-height: 1.2;
}
.search-field:focus:hover ~ .search-submit .fa-search {
  color: #1565C0;
}
.search-field:hover ~ .search-submit .fa-search {
  color: #1565C0;
}

.search-submit {
    transition: all 0.5s ease-in-out;
    background-color: transparent;
    position: absolute;
    z-index: 2;
    right: 20px;
    height: 100%;
    color: #1565C0;
    border: none;
}
.search-submit:hover .fa-search {
  color: #1565C0;
}
form#search-formmini input[type="search"] {
    width: 40px;
    position: relative;
	 transition: all 0.5s ease-in-out;
	 margin: 0;
	 height: 40px;
}
form#search-formmini input[type="search"]:focus {
    width: 300px;
    font-size: 0.9rem;
    line-height: 1.4;
}
form#search-formmini input[type="search"]:focus ~ .search-submit {
    right: 24px;
    color: #6bb6ff;
}

ざっくりとしたコードの解説

ざっくりながらコードの解説です。

PHP：検索フォームの基本

WordPressには、検索フォームを設置するための get_search_form という便利なテンプレートタグがあります。

php

<?php get_search_form(); ?>

これだけで、設置したい場所に上記を書くだけで検索フォームが表示されるようになりますが、カスタマイズをする場合は、searchform.php を作り、その中をいじっていきます。

そうすることで、get_search_formの関数を記述した場合、searchform.phpの内容が読み込まれるようになります。

なので、この記事のPHPのコードをsearchform.php にコピペして、読み込みたい場所でget_search_form の関数を記述してあげればOKです。

カスタム投稿タイプを指定して検索をする場合

検索フォームで、カスタム投稿を対象にしたい場合 input の type="hidden" の記述があるタグの中に、name="post_type" value="カスタム投稿タイプ名" を記述してあげればOKです。

例えば、カスタム投稿タイプが「food」の場合、以下のようになります。

php

<div class="searchFromMini">
<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" id="search-formmini">
  <input type="hidden" name="post_type" value="food">
  <input type="search" placeholder="サイト内検索" id="search-field" autocomplete="off" class="search-field" name="s" value>
　<button class="search-submit"><i class="fa fa-search"></i></button>
</form>
</div>

こうすることで、カスタム投稿タイプ「food」のみを対象とした検索が実行されるようになります。

CSS：クリックでフォームが大きくなる

クリックされた時の大きさが変わって拡大される様子は、主に以下の3つで表現しています。

css

form#search-formmini input[type="search"] {
    width: 40px;
    position: relative;
	 transition: all 0.5s ease-in-out;
	 margin: 0;
	 height: 40px;
}
form#search-formmini input[type="search"]:focus {
    width: 300px;
    font-size: 0.9rem;
    line-height: 1.4;
}
form#search-formmini input[type="search"]:focus ~ .search-submit {
    right: 24px;
    color: #6bb6ff;
}

はじめに、クリックが当たっていない時のフォームの状態をform#search-formmini input[type="search"] で定義。次に、form#search-formmini input[type="search"]:focus で、「虫眼鏡アイコンがクリックされた時」のフォームの状態を定義して、最後に、form#search-formmini input[type="search"]:focus ~ .search-submit で「虫眼鏡アイコンがクリックされた時」の虫眼鏡アイコンの位置と色を定義しています。