WordPressで絞り込み検索を作成していますが、今回は検索結果のページをカスタマイズしていきます。いじるファイルはsearch.phpなど。
♥ 見たいところを押してね♪ 戻るのは【最初から↑】♥
絞り込み検索の作り方
第1回から見る場合はこちらを参照してください。
Wordpressで条件の絞り込み検索を設置できるプラグイン比較、おすすめで安いのは?
実体験に基づき、Wordpressで条件の絞り込み検索を設置できるプラグイン比較していきます。おすすめはどれでしょう?
Reactive LITE(最安レベル)
Reactive LITEは最安レベルで機能も豊富なので購...
i-onna.com
「あいおんな」ではSearch & Filter Proというプラグインを採用しています。検索結果もプラグイン側から好きなファイルを呼べるため便利です。
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を参照して下さい。
それに加えて引用や日付など不要な要素があれば削除しておきます。
コメント