KEPRATE(ケプレイト)|大阪府枚方市・交野市・寝屋川市を中心に活動しているフリーランスWeb制作事務所 WordPress・レスポンシブ対応ならおまかせ!

WordPressのsearch関連【検索】のまとめ(検索窓・検索結果画面など)

2018/05/24
Category :
  1. WordPress
Tags :
  1. まとめ

WordPressのsearch(検索)に関する個人的なまとめ。

検索窓をつくる

まずは検索窓の設置から。

下記が一番シンプルな検索窓のコード。
name属性は必ずsである必要があるようです

<form method="get" action="<?php echo home_url('/'); ?>">
    <input type="text" name="s">
</form>

これだけでもPCでもエンターキーで検索は可能ですが
少々寂しくて涙が止まらないのでボタンとplaceholderを付加。

<form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">
    <label class="input-search-label" for="s"><input type="text" value="" name="s" placeholder="記事を検索"></label>
    <button type="submit" value="" class="input-search-btn"></button>
</form>

あとは設置したい箇所にソースを入れます。

cssでごにょごにょすると下記画像のようになります。

検索結果画面の作成

テンプレートファイルとしてsearch.phpを作成。

検索結果一覧リストの作成

検索ワードをWP_Queryのパラメータに渡し一覧リストを作成します。

検索ワードは上記画像でしたら『まとめ』になります。

検索窓のinput要素のname属性がsだったように urlパラメーターもsになります。
ちなみに他のzなどの値に変更したら動作しません。

必ず仕様上、sである必要があるようです。

<?php

    global $paged;

    $page_range = get_query_var('posts_per_page');

    $args = array(
        's' => $s,
        'cat' => 3,//必要ならカテゴリ指定 いらない場合は削除
        'posts_per_page' => $page_range,
        'paged' => $paged
    );

    $my_query = new wp_query($args);
    $total_posts_num = $my_query->found_posts;

?>

「8行目のパラメータ ‘s’ に$sを必ず入れる

この場合の$sは『まとめ』が入っています。

これさえ忘れなければあとは取得した値をループで処理すれば問題ないです。

下記は参考程度のhtml出力用のループ処理部分のコード。
これがあくまでベースの形です。

<nav class="cms-nav">
    <ul>
<?php if( $my_query -> have_posts() ) :?>
<?php while($my_query -> have_posts()) : $my_query -> the_post();?>
        <li>
            <a href="<?php the_permalink();?>">
                <div class="cms-nav-tit"><?php the_title(); ?></div>
                <div class="cms-nav-date"><?php the_time('Y/m/d'); ?></div>
            </a>
        </li>
<?php endwhile;?>
<?php endif; ?>
    </ul>
</nav>

以下出力されたhtml。

<nav class="cms-nav">
    <ul>
        <li>
            <a href="https://keprate.com/web/javascript/js-onload/">
                <div class="cms-nav-tit">window.onloadに関する個人的なまとめ</div>
                <div class="cms-nav-date">2018/05/14</div>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/web/javascript/js-debug/">
                <div class="cms-nav-tit">JavaScriptのalertの代わりになる簡易デバッグツール</div>
                <div class="cms-nav-date">2018/05/11</div>
            </a>
        </li>
        <li>
            <a href="https://keprate.com/web/javascript/js-url-get-param/">
                <div class="cms-nav-tit">JavaScriptでGET形式のURLパラメーターを取得する方法</div>
                <div class="cms-nav-date">2018/05/11</div>
            </a>
        </li>
    </ul>
</nav>

検索ワードの出力

検索ワードは上記画像でしたら『まとめ』になります。
このまとめの出力方法になります。

<?php echo get_search_query(); ?>
<?php echo wp_specialchars($s, 1); ?>

上記どちらの方法でも正しく出力されます。

検索ワードヒット数の出力

何件該当記事があるかは「検索結果一覧リストの作成」時のコードの15行目の$my_query->found_posts;で取得できます。

$total_posts_num = $my_query->found_posts;

あとは検索ヒット数が0の場合は振り分ける処理を記述。
以下参考コード。

<div class="search-hit-txt">
<?php if( $total_posts_num == 0 ) :?>
    ガッテム。該当データはございません・・・
<?php else:?>
    <span><?php echo $total_posts_num ?></span>件のデータが該当します。
<?php endif;?>
</div>

これで基本的なsearch(検索)ページは問題なく作成できます。
ページネーションが必要な場合はKEPRATEの下記ページでページネーションの作り方を説明しています。

                

以上。
WordPressのsearch(検索)関連のまとめでした。

  1. ソースの流用、改変は自由ですが自己責任とさせていただきます。
トラックバック URL
https://keprate.com/web/wordpress/search/trackback/
奇跡的に興味を持たれた方は
是非お問い合わせください。
  • 電話番号の掛け間違いにお気をつけください。
  • 女性は業務に一切関係ございません。
PAGE TOP