search-postdt_アイキャッチ

【WordPress】サイト内検索をカスタマイズして投稿日で検索する方法

はじめに

WordPressでブログを運営していくと、記事が少ないうちは良いですが、記事が多くなってくると目的の記事に到達する前にユーザーが離脱してしまう可能性が高くなります。
そこで、サイト内検索機能を使うことになると思いますが、デフォルトの検索機能だとあまり十分ではありません。
今回は、投稿日時で記事を検索できるようにWordPressをカスタマイズしてみたいと思います。
確認動作環境

 WordPress 6.1

WordPressの検索機能について

最初にWordPressの検索機能がどのような仕組みになっているか確認しましょう。

検索機能の仕組み

WordPressの検索機能は以下の2つのテンプレートから構成されています。

  • searchform.php
  • search.php

searchform.phpは検索内容を入力する検索フォームと検索を実行するための検索ボタンを表示するためのPHPコードが記載されています。

search.phpには入力された検索内容をもとに、対象の記事を検索結果として表示します。

検索機能の詳細

検索する際に入力するキーワードはスペースを入れることで複数ワードに対応しています。

複数検索キーワードが入力された際は、AND検索となっています。

検索機能の対象

WordPressの検索対象はデフォルトの状態だと投稿記事固定ページタイトルと本文から検索を行っています。

そのため、カテゴリやタグといったページは検索対象に入っていません。

検索機能をカスタマイズする

まずは、検索機能をカスタマイズするための基本的な方法についてまとめていきます。

検索フォームのテンプレートを作成する

デフォルトではキーワードを入力するテキストボックスしかないので、検索したい内容を入力できるエリアを用意する必要があります。

searchform.phpを準備し以下のようなコードを入力しましょう。

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
    <input type="text" name="s" id="s" placeholder="検索キーワード"/>
    <button type="submit">検索する</button>
</form>

searchform.phpが準備できたら、FTPやVPSの管理画面からテーマディレクトリにアップロードしましょう。

親テーマ、子テーマが存在するテーマを利用している方は、子テーマのほうにアップロードしてください。

本ブログの場合はConoHAサーバーを使ってWordPressを構築しているので、管理画面からファイルアップロードすることができます。

filemanager

public_html > [blogドメイン] > wp-content > themes > [テーマディレクトリ] という構成になっていると思います。

the-thorというテーマを利用しているのでこちらの子テーマのthe-thor-childにsearchform.phpをアップロードします。

検索フォームの設置

先ほど作ったsearchform.phpのテンプレートは、get_search_form()という関数で好きな箇所に呼び出すことで表示することができます。

次のコードを、検索フォームを設置したいテンプレートに追加します。

<?php get_search_form(); ?>

検索結果ページの作成

次に検索結果を表示するため 、search.php ページテンプレートを作成します。

search.phpを準備し以下のようなコードを入力しましょう。

<?php if (have_posts()): ?>
<?php
  if (isset($_GET['s']) && empty($_GET['s'])) {
    echo '検索キーワードが未入力です'; // 検索キーワードが未入力の場合のテキストを指定
  } else {
    echo '“'.$_GET['s'] .'”の検索結果:'.$wp_query->found_posts .'件'; // 検索キーワードと該当件数を表示
  }
?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
検索キーワードにマッチする記事はありませんでした
<?php endif; ?>

search.phpが準備できたら、searchform.phpと同様にFTPやVPSの管理画面からテーマディレクトリにアップロードしましょう。

これで検索結果に応じて該当する記事を表示することができるようになります。

検索機能に日付での検索機能を追加する

ここまでで検索ワードを入力しその結果を表示することができるようになりました。

次は、検索方法をカスタマイズして投稿日時で検索できるようにしてみます。

検索方法をカスタマイズするには、外観 > テーマファイルエディタ からfunction.phpに以下のcustom_search()を追加します。

投稿日時による検索を可能とする場合は以下のコードをfunction.phpに追加します。

//サイト内検索 日付で検索可能とする。
function custom_search($search, $wp_query) {
    //検索テキストが空でも検索ページを表示
    if ( isset($wp_query->query['s']) ) $wp_query->is_search = true;  
    //検索ページ以外終了
    if (!$wp_query->is_search) return;
    //日付で検索
    if (!empty($_REQUEST['date_start']) && !empty($_REQUEST['date_end'])) {
        $start_date = "'" .date('Y-m-d',  strtotime($_REQUEST['date_start'])). "'";
        $end_date = "'" .date('Y-m-d',  strtotime($_REQUEST['date_end'])). "'";
        $search .= "AND DATE(post_date) BETWEEN {$start_date} AND {$end_date}";
    }else if(!empty($_REQUEST['date_start'])){
        $start_date = "'" .date('Y-m-d',  strtotime($_REQUEST['date_start'])). "'";
        $search .= "AND DATE(post_date) >= {$start_date}";
    }else if(!empty($_REQUEST['date_end'])){
        $date_end = "'" .date('Y-m-d',  strtotime($_REQUEST['date_end'])). "'";
        $search .= "AND DATE(post_date) <= {$date_end}";
    }

    return $search;
}
add_filter('posts_search','custom_search', 10, 2);

customer_search()の第一引数であるsearchはデータベースから記事を検索するための条件が保持されています。第二引数は検索された値が保持されています。

また、$_REQUESTでも検索されたリクエストパラメータの値を保持しています。

そのため、$_REQUEST[‘date_start’]$_REQUEST[‘date_end’]のリクエストパラメータの値が存在する場合に、検索条件のsearch変数に抽出条件を追加している形となります。

 

function.phpを保存して以下のURLにアクセスすると、投稿日時を条件に加えた記事が一覧として検索結果に表示されます。

https://mi-sukeblog.com/?s=&date_start=20221030&date_end=20221105

まとめ

WordPressでサイト内検索をカスタマイズする方法についてまとめました。
ブログの規模が大きくなって記事数が多くなると検索機能が本領発揮してくるので、アクセス数やサイト分析を行って追加する検索条件を決定するのが良いですね。
WordPressやPHPのプログラミング言語についてより詳しく知りたい方は以下のような書籍を参考にしてみてください。
たった1日で基本が身に付く! WordPress超入門 (たった1 日で基本が身に付く!)
著者:佐々木 恵 (著)
出版社:技術評論社
WordPressによるWebサイト作成の基本がわかる入門書です。
初期設定からサイトのデザイン、カスタマイズまでのひととおりをすばやく学ぶことができます。
ローカル環境で試せるので、レンタルサーバーと契約する必要もありません。
自分のパソコンで今すぐ試すことができます。出典:Amazon
いちばんやさしいWordPressの教本 第5版 5.x対応 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)
著者:石川 栄和 (著), 大串 肇 (著), 星野 邦敏 (著)
出版社: インプレス; 第55.X対応版
高機能でデザイン性に優れた人気テーマ「Lightning」を使って
パソコン&スマートフォン両方の表示に対応したWebサイトが完成します。WordPressの最新バージョンに対応した操作手順が

すべて画面付きで解説されているので、Webサイトをはじめて作る人でも安心です。HTML、CSS、PHPなどの専門知識がなくても、
本格的なWebサイトを作れます。出典:Amazon
エンジニアのためのWordPress開発入門 (Engineer’s Library)
著者:野島 祐慈 (著), 菱川 拓郎 (著), 杉田 知至 (著), 細谷 崇 (著), 枢木 くっくる (著)
出版社:技術評論社
WordPressを使った開発案件は依然多く、それに携わるWebエンジニアも多数存在します。ただし、モダンな開発手法に慣れたWebエンジニアがWordPressに初めて触れたとき、その独特のアーキテクチャやシステムの構成に戸惑いを感じることがあるかもしれません。だが、WordPressは、それらを補ったうえにさらに強力なメリットを持ち合わせています。本書は、PHPプログラマがWordPressで開発する際に必要な基礎知識から、現場で役立つ具体的なカスタマイズ手法や開発のポイントについて詳しく解説しています。出典:Amazon