この記事は「Vektor WordPress Solutions Advent Calendar 2023」の12月17日の記事になります。前回のChiaki Sugishitaさんの「投稿タイプを追加するならLightning+VK All in One Expansion Unitが超便利！」はチェックしましたか？他社さんの作ったサイトの引っ越し作業って、大変ですよね。しかもWordPressではないプラットフォームの移行作業は神経を使います。
さて、今回は日付検索機能付きのポータルサイトの作り方について書きたいと思います。
初心者イベント系のポータルサイトを作りたい…
イベント日で検索できるようにしたい….
便利なプラグインってないの？
そんな悩みを解決します。
日付検索付はプラグインを使うと簡単に作れます。というのが本記事のメインテーマです。コードの知識はなくてもサクッと作れてしまう方法を紹介します。
まずは今回紹介するプラグインを使って、シンプルなデモサイトを作ってみました↓
本記事ではWordPressのプラグインを使い、日付検索機能付きのポータルサイトを作る方法を紹介します。
ポータルサイトの構成は？
まずはサイトの構成です。先ほど紹介したデモサイトはWordPressで作っています。
テーマは無料の「Lightning」を使っています。ちなみにLightningは日本の会社ベクトルさんのプロダクトです。
プラグインの構成は？
検索フォーム部分はVK Filter Search Proプラグインで作成しています。
プラグインに関してはAdvanced Custom FieldsプラグインやCustom Post Type UIなど、ポータルサイトではお馴染みのものをいくつか使っています。
デモサイトで有効化しているプラグインは次の通りです↓
プラグイン一覧
| プラグイン | 区分 | 役割 |
|---|---|---|
| Advanced Custom Fields | 任意 | カスタムフィールドの管理用。 |
| Code Snippets | 任意 | テンプレートを編集せずにカスタマイズコードを追加する用途で使っています。 |
| Custom Post Type UI | 任意 | 音楽のジャンル、アーティスト、場所などの分類用。 |
| Lightning G3 Pro Unit | 任意 | カスタマイザーの拡張機能をアップさせるLightning専用プラグイン。 |
| VK Blocks Pro | 任意 | カスタムブロックプラグイン。 |
| VK Filter Search Pro | 必須 | 絞り込み検索機能プラグイン。 |
VK Filter Search Proは必須。
その他のプラグインは任意です。
かんたデザインや実現したい機能に合わせて選びましょう！
日付で絞り込み検索するには？
VK Filter Search Proには日付検索機能が標準で付いています。
そして、
予約投稿を無効化する
結論これだけです。
これだけの作業であっという間に日付検索機能を実装できます。
日付検索を導入する操作手順を紹介。
具体的な手順を画像を使って紹介します。
まずは検索フォームを作るステップです。
「VK Filter Search」→「新規投稿を追加」をクリック↓
タイトル部分に管理用の名前を入力します↓
「VK Filter Search Pro」を選択し、エディター上にフォームを配置します↓
配置したフォーム上で「VK Post Date Search Pro」を選択します↓
VK Post Date Search Pro = 日付検索ボックス機能です。
日付検索ブロックを選択します。
画面右側のブロックオプション内、「予約投稿を無効化する投稿タイプ」で「投稿」を選びます↓
以上で必須の作業は終わりです。
その他ブロックオプションから好みの設定をしてください。
ちなみに、デモサイトでは「いつからいつまで」と範囲指定できる構成です。
これはプラグインのオプションで「範囲内指定」を選んでいるだけです↓
デモサイトの設定
| オプション | 設定した内容 |
|---|---|
| 日付タイプ | 公開日 |
| 比較条件 | 範囲指定内 |
デモサイトで設定したオプション以外にも選択肢があるので、お好みで選んでください。
その他のオプション
| オプション | 選択肢 |
|---|---|
| 日付タイプ | – 公開日 – 更新日 |
| 比較条件 | – 指定日のみ – 指定日以前 – 指定日以降 – 範囲指定内 |
フォームをページに設置するステップです。
任意の固定ページを作成します。
「Call Filter Seach Form」をクリック↓
右側のブロックオプション「絞り混み検索フォームを選択」から、作成済みのフォームを選択↓
フォームが表示されたら「更新」をクリック↓
かんた以上で設定終了です！
サイト運用側では何をすれば良いの？
デモサイトでは「公開日」を日付検索の対象にしています。サイト運営者は「公開日＝イベント開催日」として、記事を投稿する必要があります。
例えば、2024年1月1日のイベントであれば、公開日を2024年1月1日にするという運用です↓
本来だと投稿する日付より先の日付を指定すると予約投稿になってしまいます。
予約投稿は、指定した日付まで記事は公開されません。
予約投稿を無効化すると、未来の日付で投稿しても即公開されます。
この即公開される仕組みを使い、未来のイベントを検索対象に含めるという仕組みです。
【備考】その他ポータルサイト作りで設定したこと
これまでは日付検索部分を中心に解説しました。
ここからはそれ以外の部分について少し解説します。日付検索とは関係のない話なので、読み飛ばしても構いません。
検索の「分類」を作る
検索フォームに「アーティスト」「場所」「ジャンル」といった項目を作成しました。
各項目はCustom Post Type UIプラグインで作成したタクソノミーです。
タクソノミーは、カテゴリーやタグなどの親戚です。
設定した分類
| タクソノミー名 | タクソノミースラッグ |
|---|---|
| アーティスト | artist |
| 場所 | location |
| ジャンル | genre |
タクソノミーの設定はプラグインの管理画面から、ポチポチするだけです。
かんたコードは一切編集していません。
カスタムフィールドを設定する
アーカイブページ上にイベントの詳細情報を表示するため、ACFプラグインで次のカスタムフィールドを設定しています↓
設定した内容
| フィールドタイプ | フィールドラベル | フィールド名 |
|---|---|---|
| 番号 | チケット代金 | price |
| 時間選択ツール | 開演時間 | opening |
カスタムフィールドの設定もプラグインの管理画面からポチポチと作業するだけ。
かんたコードレベルでの作業はありません。
アーカイブページに「カスタムフィールド」＋「ターム」名を出力
デモサイトでは検索結果を含むアーカイブページに、イベントの詳細情報を表示しています。
表示している詳細内容
| 項目 | 内容 |
|---|---|
| 公演日 | 記事の公開日 |
| 開演時間 | カスタムフィールド |
| 公演場所 | ターム名 |
| チケット代金 | カスタムフィールド |
VK Filter Search Proの検索結果ページのデザインは、有効化しているテーマのsearch.php次第です。
例えば…
- 子テーマ化し、functions.phpにコードを追加する
- 子テーマ化し、対象テンプレートをコピーしカスタマイズする
- Code Snippetsなどのプラグインにコードを追加する
テーマ開発元のベクトルさんがサンプルコードを紹介しています↓
紹介しているサンプルコード
/**
* 賃貸物件で表示する投稿情報にカスタムフィールドの値を追加
*/
function my_vk_post_options_chintai_add_cf( $options ) {
if ( 'chintai' === get_post_type() ) {
// カスタムフィールドの値など独自に表示したい要素
global $post;
$append_html = '';
if ( $post->yachin ){
$append_html .= '<p class="data-yachin"><span class="data-yachin-number">' . esc_html( $post->yachin ) . '</span>万円</p>';
}
$append_html .= '<table class="table-sm mt-3">';
$append_html .= '<tr><th>管理費</th><td class="text-right">' . esc_html( $post->kanrihi ) . '円</td></tr>';
$append_html .= '<tr><th>礼金</th><td class="text-right">' . esc_html( $post->reikin ) . '円</td></tr>';
$append_html .= '<tr><th>築年数</th><td class="text-right">' . esc_html( $post->chikunen ) . '年</td></tr>';
$append_html .= '</table>';
$options['body_append'] .= $append_html;
}
return $options;
}
add_filter( 'vk_post_options', 'my_vk_post_options_chintai_add_cf' );上記コードでは、カスタム投稿（chintai）を対象にしている点に注意しましょう。
通常の投稿（post）でイベントを管理している場合は、次の通り置き換えます↓
/**
* 標準の投稿にカスタムフィールドの値を追加
*/
function my_vk_post_options_chintai_add_cf( $options ) {
if ( 'post' === get_post_type() ) {
// カスタムフィールドの値など独自に表示したい要素
global $post;
$append_html .= '<table">';
$append_html .= '<tr><th>セルの名称</th><td>'. ACF出力用のコードを書く.'</td></tr>';
$append_html .= '<tr><th>セルの名称</th><td>'. ACF出力用のコードを書く.'</td></tr>';
$append_html .= '<tr><th>セルの名称</th><td>'. ACF出力用のコードを書く.'</td></tr>';
$append_html .= '</table>';
$options['body_append'] .= $append_html;
}
return $options;
}
add_filter( 'vk_post_options', 'my_vk_post_options_chintai_add_cf' );「ACF出力用のコードを書く」部分は、ベクトルさんが紹介しているサンプルコードを使っても構いませんし、ACF固有の関数で書いても構いません。
ちなみに、アーティスト名や場所などターム名を出力することもできます。
例えば、タクソノミースラッグがlocationのタームをリンク無しで表示させる場合は次のように書きます↓
$terms = get_the_terms($post->ID, 'location');
foreach($terms as $term):
endforeach;
$append_html .= '<tr><th>公演場所</th><td>'.$terms = $term->name.'</td></tr>';絞り込み検索フォームの装飾
デモサイトの絞り込み検索フォーム部分はCSSでアレンジしています。
「フォームの背景を透明」にしたり「文字サイズを変更する」といった装飾方法については、次の記事で詳しく解説しています。
かんたサンプルのコード付きです！
まとめ
プラグインを活用してポータルサイトに日付検索を付ける方法を紹介しました。
本記事で紹介した通りタネを知ってしまうと、コードの編集なしで誰でも簡単にできる方法です。
ちなみにVK Filter Search Proは有料です。
「無料の検索プラグインを探していたのに….」という人もいるでしょう。ボクもWordPressを始めたばかりの時は、無料のものだけを利用していました。
「無料のプラグインを選んで、WordPressのアプデに対応してくれなかったら…」
「困ったときに自己解決できなかったら….」
長く利用するサイトで大事な機能を使う場合は、しっかりとアップデートやサポートのある有料タイプを選ぶ方が無難です。特にスキルや時間的に、自作したりメンテするのが厳しいと感じる人は、プラグインの選定をしっかりしましょう。
ちなみにVK Filter Search Proを含むベクトルさんのプロダクトは全てGPLライセンスです。1個購入すれば、複数のサイトに利用できます。もちろんクライアントワークにも利用できます。
ボクは発売当時から使っていますが、お値段以上の価値があるとハッキリ感じます。
かんたぜひお試しください！
明日はChiaki Kouno（@chiaki_kouno）さんが書いてくれるそうです。どんな記事なんでしょうか？楽しみですね？
