検索用のフォームを設置する【wordpress】
| HTML/CSS/PHP、WordPressWordPressで制作したWebサイトは更新が簡単なので、ちゃんと更新してれば、100本200本の記事を書くことができるかと思います。
ぼくは、5年で100本いってませんが・・・
まぁコンテンツが記事が増えてきたら、検索フォームがあると便利ですよね。
製品サイトとかでも、検索フォームを設置してくださいとかという依頼があったりもしますしね。
ってなわけで、今回は検索フォームの設置に関してのメモを!
シンプルに検索フォームを設置
WordPressには検索フォームのための関数があります。
<?php get_search_form(); ?>
とても簡単ですね。
これを設置するフォームが勝手にできちゃうってわけですね。
カスタマイズしたい
大体の方はget_search_form関数をつかってCSSで弄くれば問題ないかなって思います。
それでもやっぱり、カスタムしたいよーって方は下記のコードをsearchform.phpって名前のテンプレートに書いてください。
<form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s"><?php _x( 'Search for:', 'label' ); ?></label>
<input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" />
<input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" />
</form>
このコードが入っていたら、あとはクラスとかdivとか追加していじっちゃってください。
searchform.phpって名前でテンプレートを作ればget_search_form関数で呼び出せるので
これまた簡単です。
あとはsearch.phpつくって検索結果を表示させるだけでございます。
search.php
検索結果のページをざっくり説明ってほどじゃないですが、
search.phpってテンプレートで
記事表示させたら基本的には表示されます。
<?php
if(have_posts()):
while(have_posts()):
the_post();
// 記事があったときの処理
endwhile;
else:
// 記事がなかったときの処理
endif;
?>
まぁ、これで検索の結果はでます。
あとはちょこっと装飾したり、特定の投稿タイプを指定したりとかですかね。
<?php get_header(); ?>
<div id="serch">
<?php
parse_str( $query_string, $args );
$args += array(
'post_type' => '特定の投稿タイプ',
'posts_per_page' => 12
);
$the_query = new WP_Query($args);
if($the_query->have_posts()):
?>
<h1 class="page-title"><?php printf( __( '検索結果%s', 'wiingsearch' ), '<span>『' . esc_html( get_search_query() ) . '』</span>' ); ?></h1>
<div class="e-posts">
<?php
while($the_query->have_posts()) : $the_query->the_post();
// 記事があったときの処理
endwhile;
if(function_exists('wp_pagenavi')){
wp_pagenavi(array('query'=>$the_query));
}
wp_reset_postdata();
else:
// 記事がなかったときの処理
endif;
?>
</div>
</div>
<?php get_footer(); ?>
ざっくりとですがこんな感じです。
検索結果ページにフォーム追加したかったらget_search_form関数をどっかに設置してください。
まぁ、ざっくりとですが検索関連のメモでした。