simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.12.5

【WordPress】シンプルなオリジナルテーマの作り方(8)~検索フォーム~

WordPress

前回は固定ページのテンプレートを作りました。今日は検索フォームを作っていきたいと思います。

現時点ではナビゲーションの右側にbootstrapデフォルトの検索フォームがあると思います。当然ですが、このままでは検索フォームとしては全く機能しません。なので、この検索フォームをWordPressのウィジェットにある検索フォームと入れ替えたいと思います。

ウィジェットをつかえるようにする

現時点ではウィジェット機能がつかえないはずなので、前回のカスタムメニューと同じようにまずはウィジェット機能を有効にします。

functions.php

functions.phpに下記を記述してください。

register_sidebar( array( 
     'name' => __( 'ヘッダーウィジェット' ), 
     'id' => 'header-widget', 
      'before_widget' => '<div>', 
      'after_widget' => '</div>'
) );

ウィジェットを表示させる

header.php

header.phpにウィジェットが表示されるようにするので、

<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

を下記に差し替えます。

<?php dynamic_sidebar( 'header-widget' ); ?>

検索ウィジェットを設定する

WordPressの管理画面から「外観」>「ウィジェット」と進んで、「検索」ウィジェットをヘッダーウィジェットの中に放り込みます。すると、下の画像のようになります。

フォームをカスタマイズする

searchform.php

このままでも構わないのですが、よりシンプルになるようにします。なので、テーマフォルダ内に新しく「searchform.php」というファイルを作り、下記をコピペします。

<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>"> 
    <input type="search" placeholder="" name="s" class="searchfield" value="" /> 
    <input type="submit" value="SEARCH" alt="検索" title="検索" class="searchsubmit"> 
</form> 

style.css

CSSには下記を記述します。

.searchform .searchfield{
    border: #ccc solid 1px;
    border-radius: 5px;
    padding: 0.5rem;
}
.searchform .searchsubmit{
    background: #666;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0.65rem 0.85rem;
}
@media screen and (max-width: 768px){
    .searchform .searchfield{
        width: 100%;
        margin: 0.5rem 0 0.3rem 0;
        padding: 0.3rem;
    }
    .searchform .searchsubmit{
        width: 100%;
        padding: 0.5rem;
    }
}

検索結果を表示する

これで検索自体はできるようになりましたが、まだ肝心の検索結果を表示することが出来ません。検索結果を表示するには「search.php」というテンプレートが必要です。

search.php

新しくsearch.phpというファイルを作って下記を記述します。

<?php get_header(); ?>

<div class="container">
	
	<?php 
	global $wp_query; 
	$total_results = $wp_query->found_posts; 
	$search_query = get_search_query(); 
	?> 

	<p class="headline"><?php echo $search_query; ?>の検索結果 </p>

	<?php 
	if( $total_results >0 ): 
		if(have_posts()): 
			while(have_posts()): the_post(); 
				?> 

				<article>
					<p class="cat"><?php the_category(', ') ?></p>
					<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<p class="postdate"><?php the_time('Y/m/j') ?></p>
				</article>

			<?php endwhile; ?>

			<section class="pagination_wrap">
				<?php 
				if (function_exists("pagination")) { 
					pagination($additional_loop->max_num_pages); 
				} 
				?> 
			</section>

		<?php endif; ?>

	<?php else : ?>
		「<?php echo $search_query; ?>」に一致する情報は見つかりませんでした。 
	<?php endif; ?> 
</div>

<?php get_footer(); ?>

簡単に説明をします。

<?php 
global $wp_query; 
$total_results = $wp_query->found_posts; 
$search_query = get_search_query(); 
?> 

の部分では、検索キーワードと検索結果の件数を取得しています。

if( $total_results >0 ): 

検索の結果が0でない場合は該当の投稿を表示させ、0の場合にはメッセージを表示させるようにしたいので、この部分で検索結果の件数を判定しています。

それ以降のループの部分はこれまでのテンプレートとほぼ変わらないので問題無いかと思います。で、実際検索するとこんな感じになります。

検索結果がないとき

想像力の欠如が害になる

THOUGHT

想像力の欠如が害になる

祝・生後8ヶ月!これまでに買った赤ちゃんグッズ

LIFE

祝・生後8ヶ月!これまでに買った赤ちゃんグッズ

Bootstrap4でデバイス別に表示・非表示を切り替えるclass

WEB

Bootstrap4でデバイス別に表示・非表示を切り替えるclass

「マタ旅」なる言葉があるようですが

THOUGHT

「マタ旅」なる言葉があるようですが

ウィンドウの大きさに合わせて高さ100%にする方法

WEB

ウィンドウの大きさに合わせて高さ100%にする方法

アイキャッチ画像が未設定の場合に代替画像を表示する方法

WordPress

アイキャッチ画像が未設定の場合に代替画像を表示する方法

日野皓正のビンタ事件について思うこと

THOUGHT

日野皓正のビンタ事件について思うこと

アラフォーおっさんが体型維持のために行うこと

LIFE

アラフォーおっさんが体型維持のために行うこと