【絞り込み検索設置】WordPressのsearch.php(検索結果)のカスタマイズや作り方

WordPressで絞り込み検索を作成していますが、今回は検索結果のページをカスタマイズしていきます。いじるファイルはsearch.phpなど。

絞り込み検索の作り方

第1回から見る場合はこちらを参照してください。

おすすめ
実体験に基づき、Wordpressで条件の絞り込み検索を設置できるプラグイン比較していきます。おすすめはどれでしょう? Reactive LITE…

「あいおんな」ではSearch & Filter Proというプラグインを採用しています。検索結果もプラグイン側から好きなファイルを呼べるため便利です。

おすすめ記事
結婚・ネット婚活サイト・FACEBOOKアプリでおすすめで安いのは?比較と口コミなら「あいおんな」?

search.phpの作成

うちのテーマにはもともとありましたが、もしsearch.phpがなければ作るところからはじめましょう。このあたりはぐぐると情報があるので、そちらをみてください。うちのサイトはもともとあったため、この作業はやっていません。

あいおんなでは、子テーマを採用しているため、search.phpの子テーマを作成しています。

おすすめ記事

検索結果search.phpのカスタマイズしてワードプレスでサイト内検索のヒット件数を表示するコード

まず検索件数の表示されないとさすがにしょぼいので、そこを実装します。

件数の表示を行います。まず、基本。

<?php echo $wp_query->found_posts; ?>

日本語の補足とcssで装飾ができるように軽く変更します。

<p class="display-result-num"><?php echo $wp_query->found_posts; ?>件の記事がヒットしましたよ♪</p>

ページ数/ページ総数もつけておきます。

<p class="display-result-num">
<?php
	echo $wp_query->found_posts;
?>件の記事がヒットしましたよ♪現在のページ数は
<?php
	$paged = get_query_var( 'paged', 1 );
	$max_page = $wp_query->max_num_pages;
	echo $paged.' の '.$max_page;
?>!
</p>

検索結果にタクソノミーを表示

検索結果にもタグのようにラベル的にタクソノミーを表示します。search.phpなどから検索結果のレイアウトのコードを探します。get_template_partからソースコードを読んでいきますね。

子テーマを採用しているため、見つかったらこれまた子テーマにコピーしてファイルの子テーマ化を行います。

投稿記事のタクソノミーの名前を取得して表示します。スラッグはCustom Post Type UIで指定したものを使ってください。

//記事IDとタクソノミーのスラッグを指定してタームを取得
$service = 'products';			
$service_terms = wp_get_object_terms($post->ID, $service);

// 投稿に紐付いてるタームのタイトル一覧をリンク付きで表示
if(!empty($service_terms)){
	if(!is_wp_error( $service_terms )){
		foreach($service_terms as $term){
			$tag_term_link = get_term_link($term->slug, $service);
			$tag_term_name = $term->name;
			echo '<span class="term-name"><a href="'.$tag_term_link.'">'.$tag_term_name.'</a></span>';
		}
	}
}

cssでスタイルを調整します。

.term-name {
	margin: 10px;
  	padding: 10px;
	background:#f2f2f2;
}

wp_get_object_termは公式codexを参照して下さい。

12436288584_94d6bc46d2_b.jpg
Function Reference/wp get object terms

それに加えて引用や日付など不要な要素があれば削除しておきます。

この記事がよかったら「いいね!」「シェア♪」をお願いしますヽ(=´▽`=)ノ

基礎化粧品でおすすめで安いのは?比較と口コミなら「あいおんな」 結婚・ネット婚活サイト・FACEBOOKアプリでおすすめで安いのは?比較と口コミなら「あいおんな」?