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

7分

拡大される検索フォーム

SHARE

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

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

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

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

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

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

かかかず
かかかず

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

実装の手順と方法

手順と方法

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

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

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

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

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

phpのショートコードのイラスト プラグインなしでページ内に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 で「虫眼鏡アイコンがクリックされた時」の虫眼鏡アイコンの位置と色を定義しています。

前の記事

複数のタブ
JavaScriptの.querySelectorAll()で…

次の記事

プラグインなしでもっと見るをクリックで表示される記事リストのサ…
もっと見る

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら