日本全国の親子で参加できるイベントの情報を、企業サービスサイトと併設し配信されているサイト様のイベント情報検索システムの作成のご依頼をいただきましたのでその事例をご紹介いたします。
カスタム投稿のイベントを様々なパラメータで検索できるようにしたい
クライアント様のご相談は、すでに20イベント程ワードプレスサイトにイベントを配信されているが、今後イベントを日本全国すべてを網羅し、情報も増やしていくため、複雑なパラメータでそのイベントを検索するような仕組みをサイトに導入されたいとのご依頼でした。
ワードプレスにカスタム検索システムを追加する制作の流れ
下記のような流れでワードプレスサイトにカスタマイズを行わせていただきました。
イベント情報をパラメータが設定できるカスタム投稿へ移行
まず、現状イベントをワードプレスの標準投稿にカテゴリを分けて配信されていたものをカスタム投稿という種別の違う投稿として再度作成し、現在すでに投稿されているデータをこちらのカスタム投稿に移行いたしました。
カスタム投稿を作成するには、Custom Post Type UI プラグインを利用いたします
カスタム投稿に検索パラメータを追加する
またそのカスタム投稿の投稿編集画面に、ビジュアルエディタだけで出なく、オリジナルな設定欄を付け加えます。検索に使用するパラメータは下記の4つとなりますが、カスタムフィールドが必要な物は都道府県、市区村町、開催日時範囲となります。
検索パラメータ カテゴリ、都道府県➡市区村町、開催日時範囲、フリーワード
難しいのは、都道府県を選択した瞬間に市区村町が自動で出るようにする部分です。ACFプラグインを利用するとこのような段階的に地域を表示する仕組みも構築が可能となります。
検索システムの実装
次に、ユーザー様が複雑なパラメータでイベントを検索できるフォームを表示できるようにする部分の製作を行います。コードが多少大きめとなるため、テーマのfunction.phpに追加するのもあまりよくないですので、こちらはオリジナルなプラグインを作成することによって実装いたしました。
好きなページにショートコードを挿入することによって、検索ウィンドウが表示されるようにいたしました。
カスタム投稿を様々なオリジナルなパラメータによって検索するコードは下記のようなものとなります
$args = array( 'post_type' => 'カスタム投稿名', 'meta_key' => 'ACFで検索したいフィールドID', 'meta_value' => 'ACFで検索したいフィールドの値' ); $the_query = new WP_Query( $args );
またショートコードでお好きなコンテンツを表示するようなコードは下記のようなものとなります。[MyShortcode]と投稿や固定ページに書き込むとaaa bbb cccと表示するサンプルです。
function get_myshortcode($atts = [], $content = null)
{
$content = "aaa bbb ccc";
return $content;
}
add_shortcode('MyShortcode', 'get_myshortcode');
検索結果の表示
検索結果の表示は、現在のサイトの検索結果の表示テーマをコピーして新しいファイル名で保存し、上記のクエリの結果を表示するように改造することで現サイトのデザインと全く同じ検索結果表示画面を構築することが可能です。
