Markup knowledge
※社内専用

カスタム投稿タイプを用いて複雑な絞り込み機能を実装する

  • HOME
  • Education
  • カスタム投稿タイプを用いて複雑な絞り込み機能を実装する

投稿日：2024/07/04

外販で、WordPressのカスタム投稿タイプを利用した複雑な絞り込み機能を実装したので、備忘録として残しておきます。
イレギュラーな実装になりますので、外販や超過で似たような依頼が来た時のみ実装してください。

下記が実装した実案件のサイトです。
http://s10182526000004.c31.hpms1.jp/property_list

下記のような見た目になります。

今回は、上記の実装例を元に紹介するので、制作サイトに合わせて情報を書き換えてください。

絞り込み機能の前提条件

  • カスタム投稿タイプで投稿した記事を絞り込み対象とする。
  • カスタム投稿タイプのタクソノミーを絞り込み項目として利用する。
  • 絞り込み項目としてのタクソノミーは入れ子構造にする。
  • カスタム投稿タイプの投稿記事のカスタマイズは特にしない。カスタムフィールドなどでカスタマイズする場合は別途対応が必要。


実装手順

カスタム投稿タイプを導入

まず、WordPressにカスタム投稿タイプを導入します。
functions > _settings.phpの最下部に下記を追記してください。

//物件情報カスタム投稿追加

function create_post_type() {
    // 「物件情報」のカスタム投稿追加
      register_post_type(
        'property',//カスタム投稿タイプ名
        array(
          'label' => '物件情報',
          'labels' => array(  //管理画面に表示されるラベルの文字を指定
            'add_new' => '物件情報追加',
            'edit_item' => '物件情報投稿の編集',
            'view_item' => '物件情報投稿を表示',
            'search_items' => '物件情報投稿を検索',
            'not_found' => '物件情報投稿は見つかりませんでした。',
            'not_found_in_trash' => 'ゴミ箱に物件情報投稿はありませんでした。',
          ),
          'public' => true,
          'has_archive' => true, //trueにすると投稿した記事の一覧ページを作成することができる
          'menu_position' => 2,
          'menu_icon' => 'dashicons-admin-customizer',
          'show_ui' => true,
          'supports' => array(  //記事編集画面に表示する項目を配列で指定することができる
            'title',  //タイトル
            'editor',  //本文の編集機能
            // 'thumbnail',  //アイキャッチ画像（add_theme_support('post-thumbnails')が必要）
            // 'excerpt',  //抜粋
            'custom-fields', //カスタムフィールド
            'revisions'  //リビジョンを保存
          ),
        )
      );
    // 「物件情報」のカスタム投稿にカテゴリーを追加
      register_taxonomy( // カスタムタクソノミーの追加関数
        'property_area', // カテゴリーの名前（半角英数字の小文字）
        'property', // カテゴリーを追加したいカスタム投稿タイプ名
        array( // オプション（以下
          'public' => true,
          'label' => '物件地域', // 表示名称
          'has_archive' => true, //trueにすると投稿した記事の一覧ページを作成することができる
          'public' => true, // 管理画面に表示するかどうかの指定
          'hierarchical' => true, // 階層を持たせるかどうか
        )
      );
    }
    
    add_action( 'init', 'create_post_type' );

上記の「物件情報」「property」「物件地域」「property_area」は制作サイトに合わせて書き換えてください。
また必要があれば、設定内容を変更してください。

下記のように管理画面のサイドメニューに項目が追加されていれば、OKです。

前述の通り、絞り込み項目はタクソノミーを利用して、入れ子構造にするので、下記のように必要な絞り込み項目を追加してください。（例では「地域」「都道府県」「市区町村」を入れ子で設定）


絞り込み部分の作成

絞り込み箇所のフォームを使いまわすので、パーツとして作成します。
テーマフォルダ直下に「common」フォルダを作成して、その中に「customform-template.php」ファイルを作成して、下記のように記述してください。

common/customform-template.php

<?php
$region = filter_input(INPUT_GET, 'region');
$prefecture = filter_input(INPUT_GET, 'prefecture');
$city = filter_input(INPUT_GET, 'city');

if (!is_null($region)) {

    $args['post_type'] = 'property';
    $args['post_status'] = 'publish';
    $args['posts_per_page'] = '30';
  
    $args['meta_query'] = array('relation' => 'AND');
  
    if (!empty($region)) {
      $args['meta_query'][] = array(
          'key' => 'region',
          'compare' => '=',
          'value' => $region,
      );
    }
    if (!empty($prefecture)) {
      $args['meta_query'][] = array(
          'key' => 'prefecture',
          'compare' => '=',
          'value' => $prefecture,
      );
  }
  if (!empty($city)) {
    $args['meta_query'][] = array(
        'key' => 'city',
        'compare' => '=',
        'value' => $city,
    );
}
}

$the_query = new WP_Query($args);

// 条件があっているのかのデバック
// echo '<pre>';
// print_r($the_query->request);
// echo '</pre>';

// echo '<pre>';
// var_dump($options_sitecat);
// var_dump($options_siteprefecture);
// var_dump($options_tonmana);
// echo '</pre>';

?>

<?php
// sec_searchに関する記述
$terms_property_area_region = get_terms('property_area', ['parent' => 0]);
$terms_property_area_prefecture = array();
$terms_property_area_city = array();
?>

<section class="sec_search">
  <div class="container gutters qa">
    <div class="row">
      <div class="col span_12">
        <h3 class="question">地方と都道府県から探す</h3>
        <div class="answer">
          <form method="get" action="<?= home_url('/') ?>result">
            <div class="search_box">
              <div class="search_title">地方</div>
              <fieldset>
                <?php $index = 0; ?>
                <?php
                  $count = 0;
                  foreach ($terms_property_area_region as $term):
                  $terms_property_area_prefecture[$count] = get_terms('property_area', ['parent' => $term->term_id]);
                  $count++;
                  ?>
                  <div class="region_wrap region<?= $index ?>">
                  <input type="radio" id="region<?= $index ?>" name="region"
                    value="<?= $term->term_id ?>">
                  <label for="region<?= $index ?>"><?= $term->name ?></label>
                  </div>
                  <?php $index++; ?>
                <?php endforeach; ?>
              </fieldset>
            </div>
            <div class="search_box">
              <div class="search_title">都道府県</div>
              <fieldset>
                <?php
                for($i = 0; $i < $count; $i++):
                  $j = 0;
                  foreach ($terms_property_area_prefecture[$i] as $term):
                    $terms_property_area_city[$i][$j] = get_terms('property_area', ['parent' => $term->term_id]);
                  ?>
                  <div class="region<?= $i ?>_prefecture region<?= $i ?>_prefecture<?= $j ?> prefecture_wrap">
                    <input type="radio" id="region<?= $i ?>_prefecture<?= $j ?>" name="prefecture"
                      value="<?= $term->term_id ?>">
                    <label for="region<?= $i ?>_prefecture<?= $j ?>"><?= $term->name ?></label>
                  </div>
                  <?php $j++; ?>
                <?php endforeach; ?>
                <script>
                  $(function(){
                    $(".region<?= $i ?>").on("click", function(){
                      $(".prefecture_wrap").removeClass("open");
                      $(".prefecture_wrap input").prop('checked', false);
                      $(".city_wrap").removeClass("open");
                      $(".city_wrap input").prop('checked', false);
                      $(".region<?= $i ?>_prefecture").addClass("open");
                    })
                  })
                </script>
                <?php endfor; ?>
              </fieldset>
            </div>
            <div class="search_box">
              <div class="search_title">市・区</div>
              <fieldset>
                <?php
                  $i = 0;
                  foreach ($terms_property_area_city as $term):
                    $j = 0;
                    foreach ($term as $prefecture):
                      foreach ($prefecture as $k => $city):
                  ?>
                  <div class="prefecture<?= $i ?>_city region<?= $i ?>_prefecture<?= $j ?>_city city_wrap">
                    <input type="radio" id="region<?= $i ?>_prefecture<?= $j ?>_city<?= $k ?>" name="city"
                      value="<?= $city->term_id ?>">
                    <label for="region<?= $i ?>_prefecture<?= $j ?>_city<?= $k ?>"><?= $city->name ?></label>
                  </div>
                  <?php endforeach; ?>
                  <script>
                  $(function(){
                    $(".region<?= $i ?>_prefecture<?= $j ?>").on("click", function(){
                      $(".city_wrap").removeClass("open");
                      $(".city_wrap input").prop('checked', false);
                      $(".region<?= $i ?>_prefecture<?= $j ?>_city").addClass("open");
                    })
                  })
                </script>
                <?php $j++; endforeach; ?>
                <?php $i++; endforeach; ?>
              </fieldset>
            </div>
            <button type="submit">絞り込む</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

「region」「prefeture」「city」「地方と都道府県から探す」「地域」「都道府県」「市・区」などは制作サイトに合わせて、書き換えてください。

カスタム投稿タイプのアーカイブのテンプレファイル作成

作成したカスタム投稿タイプのアーカイブテンプレファイルを作成します。
このファイル内には先ほど作成した絞り込みと記事一覧が表示されるようにします。

テーマフォルダ直下に「archive-property.php」を作成して、下記のように記述してください。

archive-property.php

@layout('view.master')

@section('content')

<?php get_template_part('common/customform-template'); ?>


<article class="row row_inline article_list sp_image_cols sp_col2 sec04">
  @wpposts
    <?php

      $sitename = get_the_title();
      // $sitename = get_field( 'sitename' );
      // if (empty($sitename)) {
      //   $sitename = get_the_title();
      // }

      
    ?>
    <div class="col span_4 article_list_wrap wow fadeIn">
      <a href="{{the_permalink()}}">
        <?php if(has_post_thumbnail()): ?>
          <figure>
            <img src="{{ the_post_thumbnail_url() }}" alt="{{ the_title() }}">
          </figure>
        <?php endif; ?>
        <p class="title text-left text-large">
          {{ the_title() }}
        </p>
      </a>
    </div>
  @wpempty
  @wpend
</article>

  {{epress_pagination()}}
@endsection


絞り込み結果ページの作成

絞り込み結果ページを作成します。
まず固定ページを追加してください。
ページ名は「絞り込み結果」、スラッグ名は「result」にしましょう。

続いて、絞り込み結果のファイルを作成します。
テーマフォルダ直下に「page-result.php」ファイルを作成して、下記のように記述してください。

page-result.php

@layout('view.master')

@section('content')

<?php

$region = filter_input(INPUT_GET, 'region');
$prefecture = filter_input(INPUT_GET, 'prefecture', FILTER_DEFAULT);
$city = filter_input(INPUT_GET, 'city', FILTER_DEFAULT, [
  'flags' => FILTER_REQUIRE_ARRAY
]);

if (!is_null($region) || !is_null($prefecture) || !is_null($city)) {

    $args['post_type'] = 'property';
    $args['post_status'] = 'publish';
    $args['posts_per_page'] = '30';
  
    $args['meta_query'] = array('relation' => 'AND');
  
    if (!empty($region)) {
      $args['meta_query'][] = array(
          'key' => 'region',
          'compare' => '=',
          'value' => $region,
      );
    }
    if (!empty($prefecture)) {
      $args['meta_query'][] = array(
          'key' => 'prefecture',
          'compare' => '=',
          'value' => $prefecture,
      );
  }
  if (!empty($city)) {
    $args['meta_query'][] = array(
        'key' => 'city',
        'compare' => '=',
        'value' => $city,
    );
}
}

?>

<?php get_template_part('common/customform-template'); ?>

<?php 
$category_ids = array();

$last_param = end($_GET);

$category_id = intval($last_param);

if ($category_id > 0) {
  $category_ids[] = $category_id;
}
echo '<script>console.log('.json_encode($category_ids).');</script>';
$args = array(
  'post_type' => 'property', // カスタム投稿タイプの名前を指定します
  'tax_query' => array(
      array(
          'taxonomy' => 'property_area', // カスタム投稿タイプのタクソノミーの名前を指定します
          'field' => 'term_id', // term_idでカテゴリーIDを使用します
          'terms' => $category_ids, // カテゴリーIDの配列を指定します
          'operator' => 'IN' // カテゴリーIDの配列をいずれか含む記事を取得します
      )
  )
);

$the_query = new WP_Query($args);

?>


<article class="row row_inline article_list sp_image_cols sp_col2 sec04">
<?php 
  if ($the_query->have_posts()) :
    while ($the_query->have_posts()) : $the_query->the_post();
?>

    <div class="col span_4 article_list_wrap wow fadeIn">
      <a href="{{the_permalink()}}">
        <?php if(has_post_thumbnail()): ?>
          <figure>
            <img src="{{ the_post_thumbnail_url() }}" alt="{{ the_title() }}">
          </figure>
        <?php endif; ?>
        <p class="title text-left text-large">
          {{ the_title() }}
        </p>
      </a>
    </div>

<?php
endwhile;
    wp_reset_postdata();
else :
?>
<p style="letter-spacing: normal;">該当の記事はありません。</p>
<?php endif;?>

</article>

@endsection

「region」「prefeture」「city」などは制作サイトに合わせて、書き換えてください。

検索の際に三つの絞り込み要素をパラメーターで渡して、絞り込み結果ページではそのパラメーターを元に記事を絞り込むような仕様になっています。

CSSスタイルの追加

最後に絞り込み検索部分のCSSスタイルを追加します。
main.cssの最下部に下記を追加してください。

/* 絞り込み */

.child_wrap:not(.open),
.grandchild_wrap:not(.open) {
  display: none;
}

.sec_search .qa h3.question {
  margin-bottom: 0;
  background: #002060;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  font-size: 2rem;
  border-radius: 40px;
  z-index: 1;
  position: relative;
  cursor: pointer;
}
.sec_search .qa h3.question:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 29px;
  transform: translateY(-50%);
  width: 2px;
  height: 20px;
  margin: 0 auto;
  background: #fff;
  transition: all 0.3s ease-out;
}
.sec_search .qa h3.question:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  bottom: 0;
  left: auto;
  right: 20px;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 0;
}
.sec_search .qa h3.question.open:before {
  content: "";
  right: 20px;
  width: 20px;
  height: 2px;
  transition: all 0.3s ease-out;
}
.sec_search .answer {
  padding: 50px 2em 2em;
  background: #fff;
  position: relative;
  transform: translateY(-30px);
  display: none;
}
.sec_search .answer .search_box {
  margin-bottom: 3%;
}
.sec_search .answer .search_box .search_title {
  font-weight: bold;
  font-size: 18px;
  font-size: 1.8rem;
  border-bottom: 1px solid #000000;
  margin-bottom: 1.2em;
  padding-bottom: 0.2em;
}
.sec_search form fieldset {
  display: -moz-flex;
  display: flex;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  border: none;
  background: none;
  padding: 0;
}
.sec_search form fieldset input[type=radio] {
  display: none;
}
.sec_search form label {
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333333;
  border: 1px solid #bbbbbb;
  background: #fff;
  padding: 5px 15px;
  border-radius: 15px;
  text-decoration: none;
  display: block;
  margin: 0.8em 1em 0.8em 0;
  cursor: pointer;
}
.sec_search form input[type=radio]:checked + label {
  background-color: #f3f1e4;
  color: #002060;
}
.sec_search form .prefecture_wrap:not(.open),
.sec_search form .city_wrap:not(.open) {
  display: none;
}
.sec_search form button {
  display: block;
  border: 1px solid #002060;
  color: #fff;
  background: #002060;
  padding: 0.8em;
  margin: 0 auto;
  max-width: 300px;
  width: 100%;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  border-radius: 30px;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.8;
  cursor: pointer;
}
.sec_search form button:hover {
  background: #fff;
  color: #002060;
}
@media screen and (min-width: 768px) {
  .sec_search form button button {
    max-width: 260px;
  }
}

.property_list a {
  text-decoration: none;
}

.property_list a .property_title {
  display: block;
  font-weight: bold;
  margin-top: 5px;
  font-size: 16px;
  font-size: 1.6rem;
}

「property」「prefecture」「city」などは制作サイトに合わせて、適宜変更してください。

また、今回Q&Aの開閉コンテンツを使用するため、main.jsの下記の箇所はコメントアウトを外してください。

  // Q&A
  $('.qa:not(.qa-open) .question').click(function() {
    $(this).toggleClass('open').next('.answer').slideToggle();
  });



カテゴリー

最近の投稿

タグ抜粋

.htaccess All in One SEO API Atom cgi chrome Contact Form 7 css document DreamWeaver FTP GMO Google Calendar HTML5 Instagram ios javascript Javascript連載 jQuery OliveCart PageSpeed Insights php Plugin reCAPTCHA Rook rss slick subtitle viet Vietnamese Wordpress WP Mail SMTP オーエス サブタイトル シード スパム スライド タイトル属性 デバック バグ ブックマークレット プラグイン ホームページセキュリティオプション マルチサイト メモ 初心者 制作ツール 投稿 検品 高速化

1