wordpressにadvancedCustomFieldを使って絞り込み機能付きリクルートページを実装してみる

ポイント

1.カスタム投稿タイプ
2.アドバンスドカスタムフィールド
3.絞り込み機能

カスタム投稿タイプの追加

function.php

// カスタム投稿タイプの追加
add_action('init', 'create_post_type');
function create_post_type() {
  //カスタム投稿タイプ（ここから）
  register_post_type(
      'area',
      array(
          'labels' => array(
              'name' => __('リクルート'), // 表示する投稿タイプ名
              'singular_name' => __('リクルート')
          ),
          'public' => true,
          'menu_position' => 7,
          'supports' => array('title', 'editor', 'thumbnail'),
          'has_archive' => true,
      )
  );
}

Advanced Custom Fieldをインストール

プラグインをインストールして有効化してください。

カスタムフィールドの作成

項目を作成します。

記事の作成

リクルート情報を入力していきます。

ページを作成します。

一覧画面

※追加しても404になる場合はパーマリンクを更新してみてください。

archive-area.php

<?php
/**
 * The template for displaying archive pages
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<header class="entry-header">
  <h1 class="entry-title"> Recruit<span>募集要項一覧</span></h1>
</header>
<?php
// ?getarea=&getregion=&kinmu=&type=&time=&job=
$params = "&getregion=".$_GET['getregion']."&kinmu=".$_GET['kinmu']."&type=".$_GET['type']."&time=".$_GET['time']."&job=".$_GET['job'];

/**
 * getarea：募集エリア
 * getregion：拠点名
 */
if ($_REQUEST["getarea"] == "東北エリア" || $_REQUEST["getregion"] == "仙台") {
  $breadcrumbs1 = '<a href="?getarea=東北エリア">東北エリア</a>';
}
if ($_REQUEST["getarea"] == "関東エリア" || $_REQUEST["getregion"] == "東京" || $_REQUEST["getregion"] == "横浜") {
  $breadcrumbs1 = '<a href="?getarea=関東エリア">関東エリア</a>';
}
?>

<div id="topicpath"><a href="/">HOME</a> &gt; <a href="/area/">募集要項一覧</a> <?php echo $breadcrumbs1 ? " &gt; ".$breadcrumbs1 : ""; ?> <?php echo $_REQUEST["getregion"] ? " &gt; ".$_REQUEST["getregion"] : ""; ?></div><!-- /#topicpath -->

<?php
if (!$_REQUEST["getarea"] && !$_REQUEST["getregion"]) {
  ?>

  <div class="areaList">
    <div class="areaListInner">
      <div><a href="/area/?getarea=東北エリア<?php echo $params;?>" class="<?php getCountArea("東北エリア"); ?>">東北エリア</a></div>
      <div><a href="/area/?getarea=関東エリア<?php echo $params;?>" class="<?php getCountArea("関東エリア"); ?>">関東エリア</a></div>
    </div><!-- /.areaListInner -->
  </div><!-- /.areaList -->
  <?php
}
?>
<?php
// ?getarea=&getregion=&kinmu=&type=&time=&job=
$params = "&kinmu=".$_GET['kinmu']."&type=".$_GET['type']."&time=".$_GET['time']."&job=".$_GET['job'];


if ($_REQUEST["getarea"] == "東北エリア" || $_REQUEST["getregion"] == "仙台") {
  ?>
  <div class="areaList">
    <div class="areaListInner">
      <div><a href="/area/?getregion=仙台<?php echo $params;?>" class="<?php getCountKyoten("仙台"); ?>">宮城県<span>(仙台市)</span></a></div>
    </div><!-- /.areaListInner -->
  </div><!-- /.areaList -->
  <?php
}
?>
<?php
if ($_REQUEST["getarea"] == "関東エリア" || $_REQUEST["getregion"] == "東京" || $_REQUEST["getregion"] == "横浜") {
  ?>
  <div class="areaList">
    <div class="areaListInner">
      <div><a href="/area/?getregion=東京<?php echo $params;?>" class="<?php getCountKyoten("東京"); ?> <?php setActive("東京"); ?>">東京<span>(23区)</span></a></div>
      <div><a href="/area/?getregion=横浜<?php echo $params;?>" class="<?php getCountKyoten("横浜"); ?> <?php setActive("横浜"); ?>">神奈川県<span>(横浜市)</span></a></div>
    </div><!-- /.areaListInner -->
  </div><!-- /.areaList -->
  <?php
}
?>

<?php
$acf_args = array(
    'post_type' => 'area', //取得したい投稿タイプ
    'post_per_page' => 1, //とりあえず、１つだけ取得
);
$acf_posts = get_posts($acf_args);
$field_kinmu_arr = get_field_object('拠点名', $acf_posts->ID);
$field_type_arr = get_field_object('雇用形態', $acf_posts->ID);
$field_job_arr = get_field_object('職種別のみ', $acf_posts->ID);
$field_time_arr = get_field_object('勤務時間帯', $acf_posts->ID);
?>
<section>
  <h2>検索条件<span>Search</span></h2>
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="pulldownMenu">
        <ul>

          <input type="hidden"  id="submit_select1" value="<?php echo $_GET["kinmu"];?>">

          <li>
            <div class="select-wrap">
              <form id="submit_form1" method="get" action="#">
                <select name="type" id="submit_select2">
                  <option value="">雇用形態</option>
                  <?php
                  foreach ($field_type_arr["choices"] as $value => $label) {
                    if (!empty($_GET["type"]) && $_GET["type"] == $value) {
                      $selected = "selected";
                    } else {
                      $selected = "";
                    }
                    echo "<option value=\"{$value}\" $selected>{$label}</option>";
                  }
                  ?>
                </select>
              </form>
            </div>
          </li>
          <li>
            <div class="select-wrap">
              <form id="submit_form2" method="get" action="#">
                <select name="job" id="submit_select3">
                  <option value="">職種</option>
                  <?php
                  foreach ($field_job_arr["choices"] as $value => $label) {
                    if (!empty($_GET["job"]) && $_GET["job"] == $value) {
                      $selected = "selected";
                    } else {
                      $selected = "";
                    }
                    echo "<option value=\"{$value}\" $selected>{$label}</option>";
                  }
                  ?>
                </select>
              </form>
            </div>
          </li>

          <input type="hidden"  id="submit_select3" value="<?php echo $_GET["job"];?>">

        </ul>
      </div>
      <?php
      /**
       * 各種絞り込み
       */
      $meta_array = array();
      if ($_REQUEST["kinmu"]) {
        $meta_array[] = array(
            'key' => '拠点名',
            'value' => $_REQUEST["kinmu"],
            'compare' => '=',
        );
      }
      if ($_REQUEST["type"]) {
        $meta_array[] = array(
            'key' => '雇用形態',
            'value' => $_REQUEST["type"],
            'compare' => '=',
        );
      }
      if ($_REQUEST["job"]) {
        $meta_array[] = array(
            'key' => '職種別のみ',
            'value' => $_REQUEST["job"],
            'compare' => '=',
        );
      }
      if ($_REQUEST["time"]) {
        $meta_array[] = array(
            'key' => '勤務時間帯',
            'value' => $_REQUEST["time"],
            'compare' => '=',
        );
      }
      if ($_REQUEST["getarea"]) {
        $meta_array[] = array(
            'key' => '募集エリア',
            'value' => $_REQUEST["getarea"],
            'compare' => '=',
        );
      }
      if ($_REQUEST["getregion"]) {
        $meta_array[] = array(
            'key' => '拠点名',
            'value' => $_REQUEST["getregion"],
            'compare' => '=',
        );
      }

      $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
      $args = array(
          'posts_per_page' => 10,
          'post_type' => 'area',
          'orderby' => 'modified',
          'order' => 'desc',
          'post_status' => 'publish',
          'meta_query' => array(
              $meta_array,
              'relation' => 'AND'
          ),
          'paged' => $paged,
      );

//      echo count($args);

      $my_query = new WP_Query($args);
      // 件数表示
      if ($my_query->found_posts > 0) {
        echo "<p class=\"text-right\">検索結果：<span class=\"lead\">".$my_query->found_posts."</span>件</p>";
      }


      if ($my_query->have_posts()) : ?>
        <?php
        /* Start the Loop */
        while ($my_query->have_posts()) : $my_query->the_post();

          ?>
          <div class="post_item">
          <h3><?php echo get_field('募集要項タイトル') ? get_field('募集要項タイトル') : "no title"; ?></h3>
          <?php
          $new = "";
//          $day1 = strtotime(the_date('Y-m-d', '', '', false));
          $day1 = strtotime(the_modified_date('Y-m-d', '', '', false));
          $day2 = strtotime(date('Y-m-d'));
          $sa = ($day2 - $day1) / (60 * 60 * 24). '日';
          // 投稿日が新着マーク表示日数以内ならNEWマーク出す:新着マーク表示日数
          $hyoji_nissuu = get_field('新着マーク表示日数') ? get_field('新着マーク表示日数') : 7;
          if($sa < $hyoji_nissuu) $new = "NEW!";
          ?>
          <p class="tag">
<!--            <span class="label label-default">--><?php //echo get_field('募集エリア') ? get_field('募集エリア') : ""; ?><!--</span>-->
            <span class="label label-default"><?php echo get_field('雇用形態') ? get_field('雇用形態') : ""; ?></span>
            <span class="label label-default"><?php echo get_field('職種別のみ') ? get_field('職種別のみ') : ""; ?></span>
            <span class="label label-default"><?php echo get_field('勤務時間帯') ? get_field('勤務時間帯') : ""; ?></span></p>
          <span class="new_mark"><?php echo $new; ?></span>
          <table class="outline-table table">
            <tr>
              <th>職種</th>
              <td><?php echo get_field('職種') ? get_field('職種') : ""; ?></td>
            </tr>
            <tr>
              <th>募集拠点</th>
              <td><?php echo get_field('募集エリア') ? get_field('募集エリア') : ""; ?>　<?php getShi(get_field('拠点名')); ?></td>
            </tr>
            <tr>
              <th>勤務地住所</th>
              <td><?php echo get_field('勤務地住所') ? get_field('勤務地住所') : ""; ?></td>
            </tr>
            <tr>
              <th>雇用形態</th>
              <td><?php echo get_field('雇用形態') ? get_field('雇用形態') : ""; ?></td>
            </tr>
            <tr>
              <th>勤務時間</th>
              <td><?php echo get_field('勤務時間帯st') ? get_field('勤務時間帯st') : ""; ?> ～ <?php echo get_field('勤務時間帯ed') ? get_field('勤務時間帯ed') : ""; ?></td>
            </tr>
            <tr>
              <th>給与</th>
              <td><?php echo get_field('給与種類') ? get_field('給与種類') : ""; ?> <?php echo get_field('給与範囲下') ? get_field('給与範囲下')."円" : ""; ?> ～ <?php echo get_field('給与範囲上') ? get_field('給与範囲上')."円" : ""; ?></td>
            </tr>
            <tr>
              <th>休日・休暇</th>
              <td><?php echo get_field('休日') ? implode('／', get_field('休日')) : ""; ?>  <?php echo get_field('休暇') ? implode('／', get_field('休暇')) : ""; ?></td>
            </tr>
            <tr>
              <th>受付担当者</th>
              <td><?php echo get_field('採用受付担当者') ? get_field('採用受付担当者') : ""; ?></td>
            </tr>
          </table>
          <div class="row">
            <div class="col-sm-12"><a href="<?php the_permalink() ?>" class="btn recruit_more">詳細情報を見る</a></div>
          </div>
          </div>
        <?php
        endwhile;

      else :
        get_template_part('template-parts/post/content', 'none');
      endif; ?>
    </div>
  </div>
</section>
<div class="pagenavi">
  <p class="btn">
    <?php
    $big = 999999999; // need an unlikely integer

    echo paginate_links(array(
        'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format' => '?paged=%#%',
        'current' => max(1, get_query_var('paged')),
        'total' => $my_query->max_num_pages
    ));
    ?>
  </p>
</div>
<?php get_footer(); ?>
<script>
  $(function () {
    var curURL = document.URL
    var arg = new Object
    var pair = location.search.substring(1).split('&')
    for (var i = 0; pair[i]; i++) {
      var kv = pair[i].split('=')
      arg[kv[0]] = kv[1]
    }
    console.log(arg)
    $('[id^=submit_select]').change(function () {
      var getarea = arg.getarea === undefined ? '' : arg.getarea
      var getregion = arg.getregion === undefined ? '' : arg.getregion
      location.href = '/area/?getarea=' + getarea + '&getregion=' + getregion + '&kinmu=' + $('#submit_select1').val() + '&type=' + $('#submit_select2').val() + '&time=' + $('#submit_select4').val() + '&job=' + $('#submit_select3').val()
    })
  })
</script> 

記事画面

※追加しても404になる場合はパーマリンクを更新してみてください。

single-area.php

<?php
/**
 * Template part for displaying page content in page.php.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package
 */
?>
<style>
  h3 {
    padding-left: 30px;
    background-image:url(/recruit/wp-content/themes/under-material-master/img/h3.png);
  }
</style>
<hr class="sp" style="border-top: 2px solid #000;">
<h1 class="entry-title pc">Details<span>募集要項詳細</span></h1>
<div id="topicpath"><a href="/recruit/">HOME</a> &gt; <a href="/recruit/area/">募集要項一覧</a> &gt;
  <a href="/recruit/area/?getarea=<?php echo get_field('募集エリア') ? get_field('募集エリア') : ""; ?>"><?php echo get_field('募集エリア') ? get_field('募集エリア') : ""; ?></a> >
    <a href="/recruit/area/?getregion=<?php echo get_field('拠点名') ? get_field('拠点名') : ""; ?>"><?php getShi(get_field('拠点名')); ?></a> >
  <?php echo get_field('求人コード') ? get_field('求人コード') : ""; ?>-<?php echo get_field('求人コードNo') ? get_field('求人コードNo') : ""; ?></div>
<!-- /#topicpath -->
<section>
  <div class="heading">
    <h2><?php echo get_field('募集要項タイトル') ? get_field('募集要項タイトル') : "no title"; ?></h2>
  </div>
  <h3><?php getShi(get_field('拠点名')); ?></h3>
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <div class="yokoIco">
        <ul class="tag list-inline">
          <li class="keitai list-inline-item">
            <p class="label label-default"><?php echo get_field('雇用形態') ? get_field('雇用形態') : ""; ?></p>
          </li>
          <li class="keitai list-inline-item">
            <p class="label label-default"><?php echo get_field('職種別のみ') ? get_field('職種別のみ') : ""; ?></p>
          </li>
          <li class="hours list-inline-item">
            <p class="label label-default"><?php echo get_field('勤務時間帯') ? get_field('勤務時間帯') : ""; ?></p>
          </li>
        </ul>
      </div>
      <!-- /.yokoIco -->
      <!-- 修正・追加 2018-04-08 ここまで -->

      <div class="areaDetail">
        <div class="areaDetailInner row">
          <div class="col-xs-6">
            <?php
            if (get_field('拠点紹介画像1')): ?>
              <img src="<?php the_field('拠点紹介画像1'); ?>"/>
            <?php else: ?>
              <img src="https://placehold.jp/32/006699/99bbdd/320x200.png?text=Now+printing"/>
            <?php endif; ?>
          </div>
          <div class="col-xs-6">
            <?php
            if (get_field('拠点紹介画像2')): ?>
              <img src="<?php the_field('拠点紹介画像2'); ?>"/>
            <?php else: ?>
              <img src="https://placehold.jp/32/006699/99bbdd/320x200.png?text=Now+printing"/>
            <?php endif; ?>
          </div>
        </div>
        <!-- /.areaDetailInner -->
      </div>
      <!-- /.areaDetail -->
        <div class="leader">
          <?php
          if (get_field('拠点長画像')): ?>
            <img src="<?php the_field('拠点長画像'); ?>"/>
          <?php else: ?>
            <img src="https://placehold.jp/32/006699/99bbdd/320x200.png?text=Now+printing"/>
          <?php endif; ?>
        <div class="introduction"><p><?php echo get_field('拠点紹介文') ? get_field('拠点紹介文') : ""; ?></p></div>
        <!-- /.introduction -->
</div>
      <div style="clear: both;"></div>
      <h3>職場の雰囲気</h3>

      <div class="threeCol pc_view">
        <div class="threeColInner row horizontal_scroll">
          <div class="photoText">
            <?php
            if (get_field('職場の雰囲気画像1')): ?>
              <img src="<?php the_field('職場の雰囲気画像1'); ?>"/>
            <?php endif; ?>
            <p>
              <?php echo get_field('職場の雰囲気1場面説明') ? get_field('職場の雰囲気1場面説明') : ""; ?>
            </p>
          </div><!-- /.photoText -->

          <div class="photoText">
            <?php
            if (get_field('職場の雰囲気画像2')): ?>
              <img src="<?php the_field('職場の雰囲気画像2'); ?>"/>
            <?php endif; ?>
            <p>
              <?php echo get_field('職場の雰囲気2場面説明') ? get_field('職場の雰囲気2場面説明') : ""; ?>
            </p>
          </div><!-- /.photoText -->

          <div class="photoText">
            <?php
            if (get_field('職場の雰囲気画像3')): ?>
              <img src="<?php the_field('職場の雰囲気画像3'); ?>"/>
            <?php endif; ?>
            <p>
              <?php echo get_field('職場の雰囲気3場面説明') ? get_field('職場の雰囲気3場面説明') : ""; ?>
            </p>
          </div><!-- /.photoText -->
        </div><!-- /.threeColInner -->
      </div><!-- /.threeCol -->

      <!-- Slider main container -->
      <div class="swiper-container mb60 sp_view">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <?php
          if (get_field('職場の雰囲気画像1')): ?>
            <div class="swiper-slide">
              <img src="<?php the_field('職場の雰囲気画像1'); ?>"/>
              <p>
                <?php echo get_field('職場の雰囲気1場面説明') ? get_field('職場の雰囲気1場面説明') : ""; ?>
              </p>
            </div>
          <?php endif; ?>

          <?php
          if (get_field('職場の雰囲気画像2')): ?>
            <div class="swiper-slide">
              <img src="<?php the_field('職場の雰囲気画像2'); ?>"/>
              <p>
                <?php echo get_field('職場の雰囲気2場面説明') ? get_field('職場の雰囲気2場面説明') : ""; ?>
              </p>
            </div>
          <?php endif; ?>

          <?php
          if (get_field('職場の雰囲気画像3')): ?>
            <div class="swiper-slide">
              <img src="<?php the_field('職場の雰囲気画像3'); ?>"/>
              <p>
                <?php echo get_field('職場の雰囲気3場面説明') ? get_field('職場の雰囲気3場面説明') : ""; ?>
              </p>
            </div>
          <?php endif; ?>

        </div>
        <div class="swiper-pagination"></div>

        <div class="swiper-button-prev">
          <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 27 44">
            <path class="arrow arrow-left" d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z"  />
          </svg>
        </div><!-- .swiper-button-prev -->

        <div class="swiper-button-next">
          <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 27 44">
            <path class="arrow arrow-right" d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" />
          </svg>
        </div><!-- .swiper-button-next -->
      </div>

      <!-- /.slide -->

      <h3>仕事の特徴</h3>
      <div class="threeCol pc_view">
        <div class="threeColInner row horizontal_scroll">
          <div class="photoText col-sm-4">
            <?php
            if (get_field('仕事の特徴画像1')): ?>
              <img src="<?php the_field('仕事の特徴画像1'); ?>"/>
            <?php else: ?>
              <img src="https://placehold.jp/32/006699/99bbdd/320x200.png?text=Now+printing"/>
            <?php endif; ?>
          </div>
          <!-- /.photoText -->
          <div class="photoText col-sm-4">
            <?php
            if (get_field('仕事の特徴画像2')): ?>
              <img src="<?php the_field('仕事の特徴画像2'); ?>"/>
            <?php else: ?>
              <img src="https://placehold.jp/32/006699/99bbdd/320x200.png?text=Now+printing"/>
            <?php endif; ?>
          </div>
          <!-- /.photoText -->
          <div class="photoText col-sm-4">
            <?php
            if (get_field('仕事の特徴画像3')): ?>
              <img src="<?php the_field('仕事の特徴画像3'); ?>"/>
            <?php else: ?>
              <img src="https://placehold.jp/32/006699/99bbdd/320x200.png?text=Now+printing"/>
            <?php endif; ?>
          </div>
          <!-- /.photoText -->
        </div>
        <!-- /.threeColInner -->
        <hr>
        <div class="photoText">
          <p> <?php echo get_field('仕事内容紹介文') ? get_field('仕事内容紹介文') : ""; ?> </p>
        </div>
        <!-- /.threeCol -->
      </div>
      <!-- /.threeCol -->
      <!-- Slider main container -->
      <div class="swiper-container mb60 sp_view">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <?php
          if (get_field('仕事の特徴画像1')): ?>
            <div class="swiper-slide">
              <img src="<?php the_field('仕事の特徴画像1'); ?>"/>
            </div>
          <?php endif; ?>

          <?php
          if (get_field('仕事の特徴画像2')): ?>
            <div class="swiper-slide">
              <img src="<?php the_field('仕事の特徴画像2'); ?>"/>
            </div>
          <?php endif; ?>

          <?php
          if (get_field('仕事の特徴画像3')): ?>
            <div class="swiper-slide">
              <img src="<?php the_field('仕事の特徴画像3'); ?>"/>
            </div>
          <?php endif; ?>

        </div>
        <div class="swiper-pagination"></div>

        <div class="swiper-button-prev">
          <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 27 44">
            <path class="arrow arrow-left" d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z" />
          </svg>
        </div><!-- .swiper-button-prev -->

        <div class="swiper-button-next">
          <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 27 44">
            <path class="arrow arrow-right" d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" />
          </svg>
        </div><!-- .swiper-button-next -->
      </div>
      <!-- /.slide -->

      <div class="heading">
        <h3>募集要項</h3>
      </div>
      <div class="box3 mb20">
        <div class="areaJob">
          <p class="catch"><?php echo get_field('募集要項タイトル') ? get_field('募集要項タイトル') : ""; ?></p>
        </div>
        <!-- /.areaJob -->
        <table class="outline-table table">
          <tbody>
          <tr>
            <th>職種</th>
            <td><?php echo get_field('職種') ? get_field('職種') : ""; ?></td>
          </tr>
          <tr>
            <th>募集エリア</th>
            <td><?php echo get_field('募集エリア') ? get_field('募集エリア') : ""; ?></td>
          </tr>
          <tr>
            <th>求人コード</th>
            <td><?php echo get_field('求人コード') ? get_field('求人コード') : ""; ?>-<?php echo get_field('求人コードNo') ? get_field('求人コードNo') : ""; ?></td>
          </tr>
          <tr>
            <th>仕事内容</th>
            <td><?php echo get_field('仕事内容紹介文') ? get_field('仕事内容紹介文') : ""; ?>
            </td>
          </tr>
          <tr>
            <th>拠点名</th>
            <td><?php echo get_field('拠点名') ? get_field('拠点名') : ""; ?></td>
          </tr>
          <tr>
            <th>勤務地住所</th>
            <td><?php echo get_field('勤務地住所') ? get_field('勤務地住所') : ""; ?></td>
          </tr>
          <tr>
            <th>給与</th>
            <td><?php echo get_field('給与種類') ? get_field('給与種類') : ""; ?> <?php echo get_field('給与範囲下') ? get_field('給与範囲下')."円" : ""; ?> ～ <?php echo get_field('給与範囲上') ? get_field('給与範囲上')."円" : ""; ?></td>
          </tr>
          <?php
          if (get_field('年収例')){
          ?>
          <tr>
            <th>年収例</th>
            <td><?php echo get_field('年収例') ? get_field('年収例') : ""; ?></td>
          </tr>
          <?php
          }
          ?>
          <?php
          if (get_field('給与特記事項')){
          ?>
          <tr>
            <th>給与特記事項</th>
            <td><?php echo get_field('給与特記事項') ? get_field('給与特記事項') : ""; ?></td>
          </tr>
            <?php
          }
          ?>
          <?php
          if (get_field('交通費')){
          ?>
          <tr>
            <th>交通費</th>
            <td><?php echo get_field('交通費') ? get_field('交通費') : ""; ?></td>
          </tr>
            <?php
          }
          ?>
          <tr>
            <th>手当</th>
            <td><?php echo get_field('手当') ? implode('／', get_field('手当')) : ""; ?></td>
          </tr>
          <tr>
            <th>賃金の締め・支払い日</th>
            <td><?php echo get_field('賃金〆日支払日') ? get_field('賃金〆日支払日') : ""; ?></td>
          </tr>
          <tr>
            <th>雇用形態</th>
            <td><?php echo get_field('雇用形態') ? get_field('雇用形態') : ""; ?></td>
          </tr>
          <tr>
            <th>勤務時間（勤務体系）</th>
            <td><?php echo get_field('勤務時間帯st') ? get_field('勤務時間帯st') : ""; ?> ～ <?php echo get_field('勤務時間帯ed') ? get_field('勤務時間帯ed') : ""; ?></td>
          </tr>
          <?php
          if (get_field('勤務時間特記事項')){
          ?>
          <tr>
            <th>勤務時間特記事項</th>
            <td><?php echo get_field('勤務時間特記事項') ? get_field('勤務時間特記事項') : ""; ?></td>
          </tr>
            <?php
          }
          ?>
          <tr>
            <th>待遇・福利厚生</th>
            <td><?php echo get_field('待遇・福利厚生') ? implode('／', get_field('待遇・福利厚生')) : ""; ?><?php echo get_field('待遇・福利厚生特記事項') ? get_field('待遇・福利厚生特記事項') : ""; ?></td>
          </tr>
          <tr>
            <th>加入保険</th>
            <td><?php echo get_field('加入保険') ? implode('／', get_field('加入保険')) : ""; ?></td>
          </tr>
          <tr>
            <th>休日・休暇</th>
            <td><?php echo get_field('休日') ? implode('／', get_field('休日')) : ""; ?><br>

              <?php echo get_field('休暇') ? implode('／', get_field('休暇')) : ""; ?><br>
              <?php echo get_field('休日・休暇特記事項') ? get_field('休日・休暇特記事項') : ""; ?>
            </td>
          </tr>
          <tr>
            <th>必要資格・免許等</th>
            <td><?php echo get_field('必要資格・免許') ? implode('／', get_field('必要資格・免許')) : ""; ?>
              <p><?php echo get_field('必要資格・免許特記事項') ? get_field('必要資格・免許特記事項') : ""; ?></p></td>
          </tr>
          <tr>
            <th>採用プロセス</th>
            <td><?php echo get_field('採用プロセス') ? get_field('採用プロセス') : ""; ?></td>
          </tr>
          <tr>
            <th>採用受付担当者</th>
            <td><?php echo get_field('採用受付担当者') ? get_field('採用受付担当者') : ""; ?></td>
          </tr>
          </tbody>
        </table>
      </div>
      <span style="color: white;font-size: 0px;">ハローワーク、未経験歓迎、未経験者、フリーター、シニア、主婦、主夫、20代、30代、40代、50代、新卒、第二新卒、中高年、バスドライバー、バス運転手、タクシードライバー、タクシー運転手、送迎ドライバー、回送ドライバー、普通免許、中型免許、準中型免許、大型免許、フォークリフト免許、運送会社、ロジスティック、物流、運送、輸送、倉庫、倉庫作業、トレーラードライバー、大型ドライバー、大型トラック運転手、中型ドライバー、中型トラック運転手、小型トラック、軽自動車ドライバー、平ボディ、バンボディ、保冷車、冷凍冷蔵車、ウィングボディ、ウィング車、幌ウィング、2tトラック、2トン、3tトラック、3トン、3.5tトラック、3.5トン、4tトラック、4トン、5tトラック、5トン、10tトラック、10トン、近距離、地場、中距離、長距離</span>

      <!-- /.box3 -->
  <div class="heading">
    <h2>応募フォーム</h2>
  </div>
  <p class="text-center sp_text_l">下記入力欄に必須事項をご記入の上、確認画面に進むボタンを押して下さい。<br>
  お送り頂きました個人情報は厳重な管理の上取り扱います。<br>
  採用審査目的以外には一切使用致しません。</p>
  <section class="contact_form">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="form">
          <img src="/recruit/wp-content/themes/under-material-master/img/step_1.png" alt="フォーム入力">
          <form method="post" action="/recruit/area_job-offer_form/postmail.cgi" class="contact">
            <table class="contact_sp">
              <tbody>
              <tr>
                <th>求人コード</th>
                <td><input type="text" name="code" value="<?php echo get_field('求人コード') ? get_field('求人コード') : ""; ?>-<?php echo get_field('求人コードNo') ? get_field('求人コードNo') : ""; ?>" readonly></td>
              </tr>
              <tr>
                <th>お名前 <span class="required">必須</span></th>
                <td><input type="text" name="_name" id="name" placeholder="山田　太郎"></td>
              </tr>
              <tr>
                <th>フリガナ <span class="required">必須</span></th>
                <td><input type="text" name="_name2" id="name2" placeholder="ヤマダ　タロウ"></td>
              </tr>
              <tr>
                <th>生年月日</th>
                <td>
                  <input type="number" class="birth1" style="width:80px;float: left;"> <span style="width:20px;float: left;line-height: 32px;"> 年 </span>
                  <input type="number" class="birth2" style="width:70px;float: left;"> <span style="width:20px;float: left;line-height: 32px;"> 月 </span>
                  <input type="number" class="birth3" style="width:70px;float: left;"> <span style="width:20px;float: left;line-height: 32px;"> 日 </span>
                  <input type="hidden" name="_birth" value="" id="birth">
                </td>
              </tr>
              <tr>
                <th>住所</th>
                <td><input type="text" name="address" id="address" placeholder="東京都千代田区">
              </tr>
              <tr>
                <th>お電話番号 <span class="required">必須</span></th>
                <td>半角数字、固定・携帯どちらも可
                    <input type="tel" class="tel1" style="width:80px;float: left;"> <span style="width:10px;float: left;line-height: 32px;"> - </span>
                    <input type="tel" class="tel2" style="width:90px;float: left;"> <span style="width:10px;float: left;line-height: 32px;"> - </span>
                    <input type="tel" class="tel3" style="width:90px;float: left;">
                    <input type="hidden" name="_tel" value="" id="tel">
                </td>
              </tr>
              <tr>
                <th>メールアドレス <span class="required">必須</span></th>
                <td><input type="text" name="_email" id="email" placeholder="[e-mail]（半角）"></td>
              </tr>
              <tr>
                <th>備考（要望・質問など）</th>
                <td><textarea rows="5" name="message" id="message"></textarea>
                  <input type="hidden" name="url" id="url" value="<?php echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?>" readonly>
                </td>
              </tr>
              </tbody>
            </table>
            <p class="button">
              <input id="submit_button" type="submit" value="確認画面に進む">
            </p>
          </form>
        </div>
      </div>

      <div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
            $('[class^=tel]').blur(function () {
              var tel1 = $('.tel1').val()
              var tel2 = $('.tel2').val()
              var tel3 = $('.tel3').val()
              $('#tel').val(tel1 + '-' + tel2 + '-' + tel3)
              console.log(tel1 + '-' + tel2 + '-' + tel3)
            })

            $(document).ready(function () {
              var tel1 = $('.tel1').val()
              var tel2 = $('.tel2').val()
              var tel3 = $('.tel3').val()
              $('#tel').val(tel1 + '-' + tel2 + '-' + tel3)
            })
        </script>

        <script>
          $('[class^=birth]').blur(function () {
            var birth1 = $('.birth1').val()
            var birth2 = $('.birth2').val()
            var birth3 = $('.birth3').val()
            $('#birth').val(birth1 + '年' + birth2 + '月' + birth3 + '日')
            console.log(birth1 + '年' + birth2 + '月' + birth3 + '日')
          })

          $(document).ready(function () {
            var birth1 = $('.birth1').val()
            var birth2 = $('.birth2').val()
            var birth3 = $('.birth3').val()
            $('#birth').val(birth1 + '年' + birth2 + '月' + birth3 + '日')
          })
        </script>
      </div>

    </div>
  </section>
  <!-- /.form -->
</section>

ひとまず表示できるようになりました

で一覧が表示できるようになっていると思います。
上のプログラムコピペで動くと思うけど、おかしいところが多々あるのでメンテして行ければと思う。
解説も入れていきたい。

あとはここから応募もできるんですが、postmail使っているんですよね。
mwwpでできないかを試行錯誤する予定。
一番しんどいのはCSSです・・・