HOME  /WordPress(応用)
 /Bootstrapを使った検索ボタンの作成
2020年03月22日

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

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。一方、WordPressもアイコンフォントを持っています。ここではこれらの使い方を説明しています。

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。但し、これは画面サイズではありません。

Flexboxは素晴らしい機能ですがプロパティの設定に悩まされます。本稿では具体的な事例を挙げながらFlexboxの使い方を解説しています。

ここではビジュアルエディタでタブ切替のコンテンツを作成する方法を解説しています。しかしタブの単純な作り方ではスマホ表示でタブが複数行になる!等の問題が発生します。そこでflexboxの機能を使ってスマホでも使えるタブを実現しました。

wordpress関数のwp_mailを使った事例を解説しています。このフォームのボタンはBootstrapで、ダブルクリックによる二重送信防止機能も付けています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラム③ajaxからのデータを受け取るphpプログラムが必要になります。またajax経路はWordPressのデフォルト経路ではなく独自経路を使っています。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

Bootstrapのナビゲーション・バー(Navbar)機能を使うとスマホ画面がスマートになります。但しデフォルトでは使いづらいのでNavbarボタンの関数化とWordPressメニュを使う方法を解説しています。