2. WordPress
  3. 検索フォーム・検索結果ページの設定方法【プラグインなし】【WordPress】
検索フォーム・検索結果ページの設定方法【プラグインなし】【WordPress】
wordpress

検索フォーム・検索結果ページの設定方法【プラグインなし】【WordPress】

どうも、Tommy(@SitommyBlog)です。

今回は、ブログサイトにも必要な検索フォームや検索結果ページの設定方法を紹介したいと思います。

私自身が検索フォームで必要な機能の設定の紹介にはなってしまいますがご了承ください。
まず必要だと感じていることは、

  • 何も記入しないで検索した場合は、TOPページにリダイレクトする
  • 投稿ページのみに検索されるようにする

これを踏まえて、設定をしていきます。
とても簡単ですので、是非参考にしてみて下さい。

functions.phpに設定する

まず、投稿ページのみ検索されるように設定を行います。

function my_posy_search($search) {
if(is_search()) {
$search .= " AND post_type = 'post'";
}
return $search;
}
add_filter('posts_search', 'my_posy_search');

そして、何も記入せずに検索をすると、TOPページにリダイレクトされる設定をします。

function empty_search_redirect( $wp_query ) {
if ( $wp_query->is_main_query() && $wp_query->is_search && ! $wp_query->is_admin ) {
$s = $wp_query->get( 's' );
$s = trim( $s );
if ( empty( $s ) ) {
wp_safe_redirect( home_url('/') );
exit;
}
}
}
add_action( 'parse_query', 'empty_search_redirect' );

search.phpに検索結果ページの設定をする

まず、ページの頭に設定を記述します。

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

これで、先程『functions.php』で設定したとおりの検索をしてくれるようになります。

続いて、設定したいのは『〇〇の検索結果（△△件）』と表記させたい場合。

<h2><span><?php echo $search_query; ?>の検索結果（<?php echo $total_results; ?>件）</span></h2>
たから たから

検索ページには、必ずあるよね！

search.phpに検索結果を表記しましょう

検索して見つかった場合と見つからなかった場合、それぞれの条件分岐を記述しましょう。

ここでは、『ulタグ』を使ったリストでの条件分岐で紹介します。

<?php if(have_posts()) : ?>
<ul class="mainArea-list">
<?php while(have_posts()):the_post() ?>
    <li>
        <div class="imgArea">
            <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail('post-thumbnails', array('width' => '100%', 'alt' => the_title_attribute('echo=0'))); ?>
            </a>
        </div>
        <div class="textArea">
            <span class="m-category">
                <?php $arr = get_the_tags(); foreach ( $arr as $tag ) { echo '<a href="' .$homeurl. '/archives/tag/' .$tag->slug. '" class="m-' .$tag->slug. '">' .$tag->name. '</a>'; } ?>
            </span>
            <time><?php the_time( get_option( 'date_format' ) ); ?></time>
            <h3 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <p class="lead"><?php echo get_the_excerpt(); ?></p>
        </div>
    </li>
<?php endwhile; ?>
</ul>
<?php else: ?>
    <div class="post">
        <p>申し訳ございません。<br>該当する記事がございません。</p>
    </div>
<?php endif;?>

こんな感じになるかと思います。
ここでアイキャッチ画像の取得設定などもソースコードに記述していますが、こちらはwidth100%設定で取得方法の書き方になります。

じぃじ じぃじ

詳しく知りたい場合は下記からチェックしてみると良いぞ！

上記の設定により、検索結果で見つからなかった場合、
『申し訳ございません。該当する記事がございません。』
表示されれば成功です。

まとめ

プラグインなしでも、簡単に設定ができますのでチャレンジしてみてはいかがでしょうか。

私自身も、始めなかなかうまく行かなかったのですがいろいろ検索して試行錯誤してこの記述に収まりました。

コピペで設定可能かと思います。誰かの参考になってくれれば幸いです。

wordpress

Related

Ranking

目次