SWELLで求人案件を検索できる転職系のポータルサイトを作ってみた

【比較】ユーザーの口コミ
初心者

WordPressテーマSWELLで求人サイトを作ってみたい
複数の条件で求人を検索する仕組みって作れるの?

こんな悩みを解決します。

WordPress有料テーマSWELLを使って、求人案件を複数条件で検索できるデモサイトを作ってみました。プラグインを活用したのでけっこう余裕で作れちゃいました。

本記事では求人サイト制作に使ったプラグインとカスタマイズの内容を紹介します。

公式 WordPressテーマ「SWELL公式サイト」

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

求人案件を検索できる転職デモサイト

求人案件を検索できるデモサイト

まずはSWELLで作ったデモサイトです。

複数条件で求人を絞り込むシステム

絞り込み検索プラグイン VK Filter Search Pro

今回の一番のポイントは「業種」や「給料」といった複数の条件で求人を絞り込む検索機能です。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)業種:sortIT系: 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' );

勤務地タクソノミー:area

【おまけ】ファーストビューのカスタマイズについて

ファーストビューのカスタマイズについて

求人案件の検索システム以外でファーストビューを独自カスタマイズしました。

カスタマイズの内容

  1. 電話番号と問い合わせボタンを設置
  2. グロナビをメインビジュアルの下に配置
  3. 開閉するメガメニュー
  4. 検索フォームを透過式に配置

ファーストビューのカスタマイズではテーマファイルを一切編集していません

SWELLはアップデートの頻度が高めです。テーマファイルを編集してしまうとアップデートで編集したファイルが上書きされてしまいカスタマイズが消えてしまいます。

かんた

それぞれを解説します。

【独自カスタマイズ①】電話番号と問い合わせボタンを設置

SWELLのヘッダーに電話番号と問い合わせボタンを設置

企業サイトだとよく見るデザインですが、SWELLの機能だけだとちょっと厳しそうなのでアレンジしてみました。ヘッダーに電話番号と問い合わせページへのボタンがあるだけで、コーポレート感がでますよね?

表示させた内容

  • 電話番号
  • 営業時間
  • 問い合わせページへのリンク
  • 資料請求ページへのリンク
かんた

カスタマイズの詳しい方法はnoteで解説しています。

【独自カスタマイズ②】グロナビをメインビジュアルの下に配置

【独自カスタマイズ②】グロナビをメインビジュアルの下部に配置

メインビジュアルをスッキリさせたかったので、グロナビをメインビジュアル内から外しました。ファーストビューでグロナビが画面に含まれるよう、グロナビをメインビジュアル画像の下に配置しました。

かんた

カスタマイズの詳しい方法はnoteで解説しています。

【独自カスタマイズ③】開閉するメガメニュー

【独自カスタマイズ③】開閉するメガメニュー

グロナビにカーソルを合わせるとフワッと広がるメガメニューを付けました。

ジャンルや条件といったカテゴリーページに移動できるよう導線として設置しました。

かんた

カスタマイズの詳しい方法はnoteで解説しています。

【独自カスタマイズ④】検索フォームを透過式に配置

絞り込み検索プラグイン VK Filter Search Pro

メインビジュアルに重なるようにVK Filter Search Proの検索フォームを配置しました。検索フォーム上のテキストが読めるように、少しだけ透明の背景を設置しているがオシャレポイントです。

かんた

検索フォームの設置方法は次の記事で解説しています。

まとめ

WordPressテーマ「SWELL」で求人サイトを作る方法を紹介しました。

コードをバリバリ書くような作業はほとんどないので、難易度はそれほど高くありません。今回のカスタマイズを覚えると、不動産サイトなんかも作れます。

かんた

ぜひカスタマイズにチャレンジしてみてください。

公式 絞り込み検索プラグイン「VK Filter Search Pro」

公式 WordPressテーマ「SWELL公式サイト」

よかったらシェアしてね!
  • URLをコピーしました!
目次