初心者WordPressテーマSWELLで求人サイトを作ってみたい
複数の条件で求人を検索する仕組みって作れるの？
こんな悩みを解決します。
WordPress有料テーマSWELLを使って、求人案件を複数条件で検索できるデモサイトを作ってみました。プラグインを活用したのでけっこう余裕で作れちゃいました。
本記事では求人サイト制作に使ったプラグインとカスタマイズの内容を紹介します。
求人案件を検索できる転職デモサイト
まずはSWELLで作ったデモサイトです。
複数条件で求人を絞り込むシステム
今回の一番のポイントは「業種」や「給料」といった複数の条件で求人を絞り込む検索機能です。SWELLのテーマにはない機能なので、有料プラグインのVK Filter Search Proを使いました。
次のYouTube動画は開発会社の公式動画です↓
難しい操作がなく、直感的に検索システムを作ることができます。
日本語対応していない海外のプラグインを使った経験もありますが、正直イマイチだったので今回は国産の有料プラグインを使いました。
かんたちなみに僕が調べた限り、絞り込み検索プラグインを開発している日本の会社は2社だけです。
| 開発会社 | プラグイン名 | 公式サイト |
|---|---|---|
| 株式会社ベクトル | VK Filter Search Pro | ダウンロード |
| 株式会社ファーストエレメント | FE Advanced Search | ダウンロード |
両方のプラグインを購入してSWELLで試しましたが両プラグインともに問題なく使えます。
今回のデモサイトではVK Filter Search Proを使っています。理由は単純にVK Filter Search Proプラグインのほうがレスポンシブに対応していて実装が簡単だからです。
公式 絞り込み検索プラグイン「VK Filter Search Pro」
かんたVK Filter Search ProとFE Advanced Searchの違いについては次の記事で解説しています。
求人ページは標準の投稿機能で作成
求人のページはWordPress標準の投稿（post）で作成しています。
Custom Post Type UIプラグインで以下のタクソノミーを作り、求人ページを作成するさいに「業種」「勤務地」「条件」などを選ぶ仕組みです。
作成したタクソノミー
| タクソノミー | 選択オプション |
|---|---|
| 業種 | IT、美容系、飲食系など |
| 勤務地 | 東京、神奈川、埼玉、千葉、山梨など |
| 条件 | 未経験可、服装・髪型自由、在宅ワーク、高校生OKなど |
| 給与 | 20万円～、25万円～、30万円～など |
かんたタクソノミーの作り方については次の記事で解説しています。
アーカイブページにカスタムフィールドの情報を追加する
「検索結果のページ」と、求人情報が一覧で表示される「アーカイブページ」についてです。
SWELの抜粋機能を使って、カスタムフィールドの値を表示させています。求人サイトなんかだと定番ですが、勤務地や業種、給料といった情報は一覧で見れたほうがいいですよね？
SWELLでカスタムフィールドを一覧ページに出力するカスタマイズは簡単です。
テンプレートファイルは一切編集せずに、任意のカスタムフィールドを表示できます。テーマのアップデートで上書きされる心配はいりません。
かんたカスタマイズの詳しい方法は次の記事で解説しています。
検索結果ページに「マッチする件数」を表示する
検索結果を表示するページに「マッチする件数」を表示するカスタマイズをしました。求人サイトや不動産サイトで定番のやつです。
今回のデモサイト制作でこの部分のカスタマイズだけテンプレートの編集が必要になりました。対象のテンプレートファイルは検索結果を出力するsearch.phpです。
子テーマで編集すればテーマのアップデートによる影響はありません。
付け加えたコード
<?php
if (isset($_GET['s']) && empty($_GET['s'])) {
echo '条件にマッチ：'.$wp_query->found_posts .'件';
}
?>実装すると以下のようになります。
<main id="main_content" class="l-mainContent l-article">
<div class="l-mainContent__inner">
<h1 class="c-pageTitle">
<span class="c-pageTitle__inner">
<?php
if (isset($_GET['s']) && empty($_GET['s'])) {
echo '条件にマッチ：'.$wp_query->found_posts .'件';
}
?>
</span>条件にマッチする求人がなかった場合の表示
複数の条件で検索したさいに、マッチする求人が1件もない場合があります。SWELLの標準仕様だと以下のように出力されます。
記事が見つかりませんでした。
かんた記事？
「記事」だと違和感があるので、「条件にマッチする求人は見つかりませんでした」に変更です。この部分をカスタマイズするフックとしてswell_post_list_404_textが用意されています。
コード
function example01(){
return '条件にマッチする求人は見つかりませんでした';
}
add_filter( 'swell_post_list_404_text', 'example01' );SWELL固有のフックについては次の記事で解説しています。
同じ業種の求人を関連記事部分に表示する
投稿記事の下に表示される「関連記事」部分です。閲覧している業種と同じ業種の求人を表示するカスタマイズをしました。
IT系の求人ページの関連記事には、IT系の求人が表示されるといった構成です。
関連記事部分はSWELL固有のswell_related_post_argsフックでアレンジできます。今回は業種タクソノミーをキーにして同じタームのものを表示するようフックのコードを書きました。
業種タクソノミーは以下の構成にしています。
| 投稿 | タクソノミー | ターム |
|---|---|---|
| 標準（post） | 業種：sort | IT系： it 飲食： food 美容：beauty 医療：medical |
以下、今回のカスタマイズコードです。
コード
function example02($args){
$term = array_shift(get_the_terms($post->ID, 'sort'));
$args['taxonomy'] = 'sort';
$args['term'] = $term->slug;
return $args;
}
add_filter( 'swell_related_post_args', 'example02' );業種でなく、「勤務地」が同じエリアのものを関連記事にしたい場合は次のようにコードを書きます。
コード
function example02($args){
$term = array_shift(get_the_terms($post->ID, 'area'));
$args['taxonomy'] = 'are';
$args['term'] = $term->slug;
return $args;
}
add_filter( 'swell_related_post_args', 'example02' );【おまけ】ファーストビューのカスタマイズについて
求人案件の検索システム以外でファーストビューを独自カスタマイズしました。
カスタマイズの内容
- 電話番号と問い合わせボタンを設置
- グロナビをメインビジュアルの下に配置
- 開閉するメガメニュー
- 検索フォームを透過式に配置
ファーストビューのカスタマイズではテーマファイルを一切編集していません。
SWELLはアップデートの頻度が高めです。テーマファイルを編集してしまうとアップデートで編集したファイルが上書きされてしまいカスタマイズが消えてしまいます。
かんたそれぞれを解説します。
【独自カスタマイズ①】電話番号と問い合わせボタンを設置
企業サイトだとよく見るデザインですが、SWELLの機能だけだとちょっと厳しそうなのでアレンジしてみました。ヘッダーに電話番号と問い合わせページへのボタンがあるだけで、コーポレート感がでますよね？
表示させた内容
- 電話番号
- 営業時間
- 問い合わせページへのリンク
- 資料請求ページへのリンク
かんたカスタマイズの詳しい方法はnoteで解説しています。
【独自カスタマイズ②】グロナビをメインビジュアルの下に配置
メインビジュアルをスッキリさせたかったので、グロナビをメインビジュアル内から外しました。ファーストビューでグロナビが画面に含まれるよう、グロナビをメインビジュアル画像の下に配置しました。
かんたカスタマイズの詳しい方法はnoteで解説しています。
【独自カスタマイズ③】開閉するメガメニュー
グロナビにカーソルを合わせるとフワッと広がるメガメニューを付けました。
ジャンルや条件といったカテゴリーページに移動できるよう導線として設置しました。
かんたカスタマイズの詳しい方法はnoteで解説しています。
【独自カスタマイズ④】検索フォームを透過式に配置
メインビジュアルに重なるようにVK Filter Search Proの検索フォームを配置しました。検索フォーム上のテキストが読めるように、少しだけ透明の背景を設置しているがオシャレポイントです。
かんた検索フォームの設置方法は次の記事で解説しています。
まとめ
WordPressテーマ「SWELL」で求人サイトを作る方法を紹介しました。
コードをバリバリ書くような作業はほとんどないので、難易度はそれほど高くありません。今回のカスタマイズを覚えると、不動産サイトなんかも作れます。
かんたぜひカスタマイズにチャレンジしてみてください。
公式 絞り込み検索プラグイン「VK Filter Search Pro」
