Bootstrapを使った検索ボタンの作成

WordPressでBootstrapを使った検索ボタンを作成する為には下記を理解する必要があります。

①Bootstrapのインプットグループ機能

②WordPressの検索機能

上記の使い方が分かったうえで、これらを使った検索ボタン関数を作成していきます。

1.Bootstrapのインプットグループ機能の基本形

Bootstrapのインプットグループ機能とは、テキスト入力欄の左、右、もしくは両方に、テキストやボタンを配置する機能です。

ここでは、テキスト入力欄の右に検索ボタンを配置するのに、この機能を利用しています。

表示例

<div class="input-group">
	<input type="text" class="form-control" placeholder="テキスト入力欄">
	<span class="input-group-btn">
		<button type="button" class="btn btn-default">ボタン</button>
	</span>
</div>

ポイントは下記です。

※1.<div class=”input-group”>～</div>で、「検索文字の入力エリア(input)」と「ボタン」を囲みます。

※2.「検索文字の入力エリア(input)」にはclass=”form-control”を指定します。

※3.「ボタン」は<span>で囲み、class=”input-group-btn”を指定します。

※4.class=”btn btn-default”は、ボタンの色でdefault以外に色々な色が指定できます。

2.Wordpressの検索機能の基本形

PHPプログラムの中で<?php get_search_form(); ?>を指定すると下記のフォームが呼び出されます。

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

※1.WordPressのサーチ機能の働かせる為には下記設定が必要になります。

・inputで「name=”s” id=”s”」を指定する。

・formで「action=”<?php echo home_url(‘/’); ?>”」を指定する

上記のid=”s”を指定すると大文字と小文字を区別しない検索機能になります。
これを削除すると、大文字と小文字を意識した検索機能になります。

　メモ

ブログサイトではあまり必要でありませんが、検索対象を絞る場合は基本系に下記を追加します。

<input type="hidden" name="post_type"　value="××">

※1.type=“hidden”は、表示しないinput情報を意味します。

※2.name=“post_type”は、「post_type」という名前を持ったフィールドを作るという意味です。
絞り込み検索を行う場合は「post_type」の名前は変更できません。

※3.value=“××”は、「post_type」に”××”をセットしろ！という意味です。
ここにセットされたポストタイプが検索対象になります。

①例えば、検索対象を「投稿文書」に絞りたい場合は「post」を指定します。

<input type="hidden" name="post_type"　value="post">

※1.post以外に固定ページ(page)やカスタム投稿名(作成時に指定した名前)が指定できます。

3.Bootstrapを使った検索ボタンの作成方法

ここではWordPressの検索機能のカスタマイズではなく、引数を持った新たな関数を新設します。

引数を持つ様な複雑な関数はfunctions.phpを2つに分けて管理した方が維持メンテが用意になります。

2-1.functions.phpへの記述

// 検索BOX
get_template_part('func/my_searchform');

※1.上記はfuncフォルダの中にあるmy_searchform.phpを取り込め！という命令です。

2-2.func￥my_searchform.phpに記述するプログラムは下記になります。

<?php 
/*****************************************************************************
my_searchformの設定
引数：$color ボタンの色[1:default(灰色),2:primary(青),3:success(緑),4:info(水色),5:warning(オレンジ),6:danger(赤)]
*******************************************************************************/
function my_searchform($color)
 {
	if($color==2){$color='primary';}
	elseif($color==3){$color='success';}
	elseif($color==4){$color='info';}
	elseif($color==5){$color='warning';}
	elseif($color==6){$color='danger';}
	else{$color='default';}
?>

<form  action="<?php echo home_url('/');?>" >
	<div class="input-group">
		<input type="text" name="s" id="s" value="" class="form-control" style="height:32px;" placeholder="ブログ検索">
		<span class="input-group-btn">
			<button type="submit" class="btn btn-<?php echo $color;?>  btn-sm"><span class="dashicons dashicons-search" aria-hidden="true"></span></button>
		</span>
	</div>
</form>
	
<?php
 }
?>

※1.引数でボタンのカラーを指定できるようにしています。

※2.Bootstrapのインプットグループ機能の設定条件は赤です。

※3.WordPressの検索の設定条件はピンクです。

4.この関数の使い方

この関数は下記の様に使います。

<div id='search-box'> <?php my_searchform(2);?></div>

CSSで検索BOXの幅を指定します。

#search-box{width:30%;padding:5px 0;}

注）関数の中で検索BOXの幅を持たせないのは、表示デバイスに応じて幅を変更したい為です。

＜ボタンのカラサンプル＞

引数	ボタン
1
2
3
4
5
6