初心者SWELLで旅行代理店のサイトって作れるの？
ツアーの検索機能を付けたい…
どんなデザインになるか知りたい…
そんな疑問に答えます。
WordPress有料テーマ「SWELL」を使って旅行のツアーを検索できるシステム付きの旅行代理店サイトを作ってみました。旅行代理店デモサイトの紹介と、検索システムの作り方について紹介します。
【デモサイト】SWELLで旅行代理店のサイトを作ってみた
まずはSWELLで作ったデモサイトです↓
デモサイト
ツアーの検索フォームは、次の場所に設置しています。
設置場所
- トップページのメインビジュアル内
- トップページのフッター直前
- サイドバー
- 詳細検索ページ
かんたメインビジュル内は簡素化した検索フォーム。
それ以外は「条件」を含めた検索フォームです。
ツアーのコンテンツは「標準投稿」＋「タクソノミー」
ツアーはWordPressの標準投稿（post）で作成しています。
Custom Post Type UIプラグインでタクソノミーを作成し、分類しています。
作成したタクソノミー
| タクソノミー | スラッグ | ターム |
|---|---|---|
| 目的地 | area | ハワイ、東南アジア、モルジブなど |
| 出発地 | dep | 首都圏、関西、北海道など |
| こだわり条件 | condition | プール付き、星が見える、エステを楽しめるなど |
かんたタクソノミー自体はいくつでも増やせるので、「予算」「お部屋タイプ」、「航空会社」など好きにアレンジできます。
ツアーの絞り込み検索はプラグインで作成
検索フォームはVK Filter Search Proプラグインで作成しています。
VK Filter Search Proプラグインをざっくり説明するとブロックエディター上から簡単に絞り込み検索フォームを作ることができるプラグインです。
↓次の動画はプラグイン開発会社がアップした公式動画です。
プログラムの知識のない人でもSWELLのように「直感的に」検索フォームを設置できるのが特徴です。
VK Filter Search Proプラグインのバージョン1.5.0から日付検索ブロックが追加されました。日付検索ブロックは検索フォームにカレンダーを表示して日付指定で情報を検索できる機能があります。
かんた旅行サイトでよく見る機能なので、試しに使ってみました！
公式 WordPress絞り込み検索プラグイン「VK Filter Search Pro」
ツアー検索フォームを作る
エディター上でVK Filter Search Proを使いフォームを作るステップです。
日付検索ブロックの「予約投稿を無効化オプション」で対象の投稿タイプを選択します。今回は標準投稿でツアーを作るので、「投稿」を選択します。
メインビジュアル上の検索フォームはシンプルなデザインに仕上げるために、選択オプションをプルダウン形式にしました。
かんたガッツリ検索オプションを表示させたい場合は、チェックボックス形式でもOKです。
【サイドバー用】ブログパーツで検索フォームを作る
サイドバー用の検索フォームを作るステップです。
作成方法はメインビジュアルと同じでVK Filter Search Proを使います。ブログパーツでフォームを作成し、呼び出しコードをサイドバーのウィジェットに貼り付けます。
かんたサイドバーはスペースに余裕あるので、チェックボックス形式で選択肢を一覧表示させています。
iPhone向けのCSSコードを追加
VK Filter Search ProをSWELLで使う場合、日付検索部分がスマホだとしっかり表示されないので対策用のコードを追加します。
追加CSS
.vkfs__input-date{
width:100%;
height:50px;
}CSSは管理しやすい任意の場所で構いません。設置場所がわからない場合は、カスタマイザー内「追加CSS」に貼り付けてください。
かんたheightプロパティーの値は任意の数値でOKです。
デモサイトでは他のinput要素と合うように50pxにしています。
タームの並び順を変更する
ツアーの検索フォームに表示される選択肢の並び順についてです。
WordPressの標準仕様ではカテゴリーやタグ、タームなどの並び順を変更する機能はありません。デモサイトではIntuitive Custom Post Orderプラグインを有効化し並び順を変更しています。
出力される要素をフックで微調整
SWELLのフックを使ってのカスタマイズです。
テーマ内のfucntions.phpにコードを追加するか、Code Snippetsプラグインを使ってください。
コードの追加場所
- 子テーマのfunctions.php
- Code Snippetsプラグイン
かんたお好みでどうぞ！
検索結果でマッチするツアーがなかった場合の出力
絞り込み検索の結果でマッチする条件のツアーがない場合の調整です。デフォルトだと「記事が見つかりませんでした」と表示されます。この部分を「条件にマッチするツアーはありません」に変更します。
以下のようにSWELL固有のフック（swell_post_list_404_text）を追加しましょう。
コード
function example01(){
return '条件にマッチするツアーはありません';
}
add_filter( 'swell_post_list_404_text', 'example01' );テキスト部分は任意の内容に変更可能です。
関連記事を同じ目的地のツアーに限定する
投稿記事の下に表示される関連記事部分です。SWELLの標準オプションではカテゴリーかタグのいずれかを選択する仕様になっています。タクソノミーで分類するフック（swell_related_post_args）を使ってカスタマイズします。
今回は「目的地タクソノミー」をキーにします。具体的な例をあげると「ハワイ」のツアー記事にハワイのツアー情報を表示するといった感じです。
コード
function example02($args){
$term = array_shift(get_the_terms($post->ID, 'area'));
$args['taxonomy'] = 'area';
$args['term'] = $term->slug;
return $args;
}
add_filter( 'swell_related_post_args', 'example02' );タクソノミー部分は自由に変更してください。
一覧表示に追加情報を表示
検索結果やアーカイブの一覧ページに追加情報を表示します。
デモサイトでは「費用」「催行人数」などを追加で表示しています。この情報はタクソノミーではなく、抜粋で入力した内容を一覧ページに表示させています。
抜粋を一覧に表示させる機能はSWELLの標準機能です。
抜粋内で使えるHTMLには制限があります。現在のバージョンだと<br> と<i> だけがサポートされています。デモサイトのように「表」を使う場合はカスタマイズが必要です。
かんたカスタマイズ手順は次の記事で解説しています。
検索結果にマッチした件数を変更
絞り込み検索結果のページに、条件にマッチした件数を表示するカスタマイズです。
対象はテーマファイル内のsearch.php。タイトル部分を以下のように変更します。
コード
<?php
if (isset($_GET['s']) && empty($_GET['s'])) {
echo '条件にマッチ：'.$wp_query->found_posts .'件';
}
?>検索結果のパンくずを変更
検索のキーワードが未入力の場合のパンくずのカスタマイズです。
SWELLは未入力時の分岐であるempty( get_search_query()）がないので検索結果のパンくずは次のように表示されます。
ホーム＞「」で検索した結果
カッコの中身がカラのままだと、検索が失敗したような印象を与えるためカスタマイズします。パンくずの出力ファイル（breadcrumb.php）のis_search部分にempty( get_search_query()）判定を追加します。
コード
} elseif ( is_search() ) {
if ( empty( get_search_query() ) ) {
$list_data[] = [
'url' => '',
'name' => '検索結果',
];
}
else{
$list_data[] = [
'url' => '',
'name' => '「' . get_search_query() . '」で検索した結果',
];
}このコードを実装すると、検索キーワードが未入力時に次にように表示されます↓
ホーム＞ 検索結果
この部分のカスタマイズについてSWELLのフォーラムの要望に投稿しました。テーマ開発者さんが実装を検討中とのことなので、将来的には不要になりそうです。
タクソノミーのTITLEタグの修正
追加設定したタクソノミーのmeta titleの調整です。
Simple SEO Pack管理メニュー上で、「タクソノミーアーカイブタブ」をクリックし、追加した各タクソノミーの「タイトルタグの形式」を次のように設定します。
%term_name% %sep% %site_title%
【おまけ】独自カスタマイズ
検索部分以外でこだわったカスタマイズについてです。
独自カスタマイズ
- ヘッダーに電話番号とボタンを設置
- グロナビをメインビジュアル動画の下に配置
- グロナビのメガメニュー化
- 検索フォームを設置
- 検索結果を並び替える
かんたそれぞれを紹介します。
【独自カスタマイズ①】ヘッダーに電話番号とボタンを設置
ページ上部に電話番号と、問い合わせページへのボタンを設置しました。どことなく企業系テーマのLightningっぽいデザインですよね？ファーストビューにはぜひとも入れたい要素だったので、テンプレートファイルを編集せずにアレンジしてみました。
かんたこのカスタマイズの方法は次の記事で紹介しています。
【独自カスタマイズ②】グロナビをメインビジュアル動画の下に配置
SWELLにはヘッダー透過オプションがあります。透過オプションを有効化すると、ロゴとグロナビの背景が透明になります。メインビジュアルの中に組み込んでもオシャレなんですが、中央の検索パーツに目が行くようあえて下に移動しました。
かんたこのカスタマイズの方法は次の記事で紹介しています。
【独自カスタマイズ③】グロナビのメガメニュー化
グロナビにカーソルを合わせると表示されるメガメニュー部分もこだわったパーツの1つです。
メガメニューはSWELLにはない機能なので独自に調整しました。メガメニューの背景を少し透明にしているのがオシャレポイントです！
かんたこのカスタマイズの方法は次の記事で紹介しています。
【独自カスタマイズ④】検索フォームの設置
メインビジュアル内に VK Filter Search Proの絞り込みフォームを配置しました。
ポイントは透過式の背景！
かんた検索フォームの設置方法は次の記事で解説しています。
【独自カスタマイズ⑤】検索結果を並び替える
今回紹介したデモサイトでは実装していませんが、以下のデモサイトではVK Filter Search Proの検索結果を並び替えるボタンを設置しました。
投稿日、更新日の他、カスタムフィールドの値で自由に並び替える機能です。旅行代理店のサイト場合だと、「ツアー料金の安い順」「人気の高い順」などでに使うと便利そうですかね！
かんた並び替えボタンの設置については次の記事で解説しています。
その他のカスタマイズ
デモサイトでは実装していませんが、固定ページ上にツアー一覧を表示させる時に使えるテクニックを紹介します。
投稿リストブロックを使うことで、投稿の一覧をカテゴリーやタームごとに分類して表示させることができます。この機能は便利ですが、カスタムフィールドを表示させるオプションは付いていません。
ツアーの一覧をカスタムフィールド付きで表示させる場合は独自カスタマイズが必要になります。
かんたトップページの新着一覧にカスタムフィールドを表示する方法は次の記事で解説しています。
まとめ
WordPressテーマSWELLを使った旅行代理店サイトの作り方を紹介しました。
ぜひ挑戦してみてください！