BLOG

検索用のフォームを設置する【wordpress】

| HTML/CSS/PHPWordPress

WordPressで制作した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関数をどっかに設置してください。
まぁ、ざっくりとですが検索関連のメモでした。

PAGE TOP