LoginSignup
1
1

More than 3 years have passed since last update.

@cut_yocchan_ika

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

Last updated at Posted at 2020-07-05

ポイント

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をインストール

image.png

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

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

項目を作成します。
image.png

記事の作成

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

ページを作成します。

一覧画面

※追加しても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="xxxxx@abcde.com（半角）"></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>

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

https://ドメイン/area/

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

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1