IT

워드프레스 필터 여러 드롭다운 분류법으로 ajax를 통해 사용자 정의 필드를 표시합니다.

itgroup 2023. 10. 15. 17:13
반응형

워드프레스 필터 여러 드롭다운 분류법으로 ajax를 통해 사용자 정의 필드를 표시합니다.

현재 사용자 지정 게시물 유형이 있습니다.newcpt. 이것은 2가지 분류법이 있습니다.region그리고.city. 나는 지역에 있습니다.regiona그리고.regionb, 그리고 나는 도시에 있습니다.citya그리고.cityb.

저는 현재 wp_dropdown_categories를 사용하여 다음의 드롭다운을(를)regiona. 다음과 같은 경우에만 표시되는 두 번째 드롭다운을 표시할 수 있는 빠르고 쉬운 해결책이 있습니까?regiona분류학적으로

예를 들면.게시물이 있습니다.testpost에 있는regiona에 있어서도citya언제regiona드롭다운에서 선택한 경우 두 번째 드롭다운이 이 지역으로 도시를 채우길 원합니다. 따라서 이 경우citya

도시 또한 선택되면, 이 cpt의 모든 게시물을 같은 페이지에 있는 일치하는 분류법과 함께 가져올 것입니다.어떤 팁이나 도움이 되는 링크라도 대단히 감사드립니다!!

가장 좋은 해결책은 PHP를 사용하여 데이터 세트를 생성하고 예를 들어 Angular를 사용하는 것이라고 생각합니다.클라이언트 사이트에 표시할 JS.

자바스크립트

angular
.module('app', [])
.controller('controller', [
  '$scope',
  '$attrs',
  function ($scope, $attrs) {
    $scope.data=JSON.parse($attrs.selects);
    $scope.region = {};
    $scope.city = {};

    $scope.loadCitys = function () {
      $scope.region = JSON.parse($scope.region);
    };

    $scope.loadPosts = function () {
      $scope.city = JSON.parse($scope.city);
    };
  }
]);

그리고 HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-controller="controller" data-selects='[{"name":"Region 1","citys":[{"name":"City 1","posts":[{"title":"Post 1","id":1},{"title":"Post 2","id":2}]}]},{"name":"Region 2","citys":[{"name":"City 2","posts":[{"title":"Post 3","id":3},{"title":"Post 4","id":4}]},{"name":"City 3","posts":[{"title":"Post 5","id":5},{"title":"Post 6","id":6}]}]}]'>
    <div>
      Region: {{region.name}} <br>
      City: {{city.name}}
    </div>

    <select ng-model="region" ng-change="loadCitys()">
      <option ng-repeat="tregion in data" value="{{tregion}}">{{tregion.name}}</option>
    </select>

    <select ng-model="city" ng-change="loadPosts()">
      <option ng-repeat="tcity in region.citys" value="{{tcity}}">{{tcity.name}}</option>
    </select>

    <select ng-model="post">
      <option ng-repeat="tpost in city.posts" value="{{tpost}}">{{tpost.title}}</option>
    </select>

    <script src="script.js"></script>
  </body>

</html>

사례: https://plnkr.co/edit/gyzCxMpn9luAcGsLZHYD

(완료하셔야 합니다)

FacetWP는 당신이 원하는 것을 수행하지만 당신이 제시한 것보다 더 나을 수도 있습니다. AJAX는 분류 체계 필터를 기반으로 데이터 세트를 업데이트합니다.지역과 도시를 보여주는 드롭다운이 둘 다 있고 사용자는 필요한 것을 전환할 수 있습니다.종속 드롭다운 개념을 수행하려면 사용자 지정 패싯을 만들 수 있습니다.

사용 방법은 간단합니다. WP_query와 함께 사용하는 방법은 다음과 같습니다.

<?php
  // 1- Setup WP_query variable to get all your content
  // Logic here is descending alphabetical of all content
  // FacetWP handles granular search winnowing
  // Note the facetwp array item
  $args = array(
    'posts_per_page' => 9999,
    'post_type' => array('new-cpt', 'work-featured'),
    'orderby' => 'rand',
    'facetwp' => true, // so we can hook into facetwp via functions.php
  );
  $the_query = new WP_Query( $args );

  // 2- Setup new loop
  if($the_query->have_posts()) {
    while($the_query->have_posts()) :
      $the_query->the_post();
      // do your thing 
        endwhile;
  }
  wp_reset_postdata();
?>

일단 당신이 분류를 설정하면,wp-admin, 코드에 분류체계 필터를 바로 출력할 수 있습니다(사이드바 또는 필요한 곳).

<?php echo facetwp_display( 'facet', 'region' ); ?>
<?php echo facetwp_display( 'facet', 'cities' ); ?>

또 다른 참고 - 사용자 지정 후 유형을 사용하기 때문에 사용자 지정 필터를 기능에 추가해야 합니다.php 파일:

// Adding in custom filter for FacetWP to detect custom WP_Query on facet page
function my_facetwp_is_main_query( $is_main_query, $query ) {
    if ( isset( $query->query_vars['facetwp'] ) ) {
        $is_main_query = true;
    }
    return $is_main_query;
}
add_filter( 'facetwp_is_main_query', 'my_facetwp_is_main_query', 10, 2 );

당신의 현실 문제를 파악하는 것은 어렵지만 최선을 다하겠습니다.

보관하려는 내용을 시각화해 보겠습니다.

jQuery(document).ready(function($){
  "use strict";
  var parentSelectBox = $("#parent-select-box");

  parentSelectBox.change(function(e){

    e.preventDefault();

    var childForm = $("#child-select-box"), parentTermID = parentSelectBox.val();
    var terms = {
      "1": [
        {id: 11, name: "Child Term 1.1"},
        {id: 12, name: "Child Term 1.2"}
      ],
      "3": [
        {id: 21, name: "Child Term 2.1"},
        {id: 22, name: "Child Term 2.2"}
      ]
    };

    childForm.empty(); // Remove all old options.
    childForm.append('<option disabled selected>--Select a child term--</option>');

    if (terms.hasOwnProperty(parentTermID)) {
      var childTerms = terms[parentTermID];
      $.each(childTerms, function(){ // Add new options.
        childForm.append('<option value="' + this.id + '">' + this.name + '</option>');
      });
    } else {
      console.log('There are no child terms.');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="parent-from" class="form parent" method="post">
  <select id="parent-select-box" name="parent-term">
    <option disabled selected>--Select a parent term--</option>
    <option value="1">Parent Term 1</option>
    <option value="2">Parent Term 2</option>
  </select>
</form>
<form id="child-form" class="form child" method="get">
  <select id="child-select-box" name="child-term">
    <option disabled selected>--Select a child term--</option>
    <option value="3">Default Child Term 3</option>
    <option value="4">Default Child Term 4</option>
  </select>
</form>

보다시피, 당신이 선택한 후에Parent Term 1첫 번째 선택 상자, 두 번째 선택 상자에서 하위 항(Child Term 1.1그리고.Child Term 1.2)이(가) 자동으로 채워집니다.선택한 경우Parent Term 2, 두고 보게 될 것입니다There are no child terms.콘솔에

하지만 이것은 쉬운 HTML/JS이므로, 우리는 이것을 워드프레스에 통합해야 합니다.

우선 워드프레스에서 AJAX를 이용하여 데이터를 검색하는 방법을 알고 있다고 생각합니다.

첫 번째 선택 상자는 두 번째 선택 상자의 데이터를 검색하는 필터입니다.우리는 AJAX를 기반으로 사용할 것입니다..change()트:

jQuery(document).ready(function($){
  "use strict";
  var parentSelectBox = $("#parent-select-box");
  parentSelectBox.change(function(e){ // .change()
    e.preventDefault();
    var parentTermID = parentSelectBox.val();
    // {
    //   Some code with AJAX to get child terms base on `parentTermID` here.
    // }
    // Now, suppose `terms` is AJAX response.
    if ($.isEmptyObject(terms)) { // There're no child terms.
      // Do something...
    } else {
      // Append them to the second select box.
    }
  });
});

두번째 select box는 당신의 문서의 DOM 구조를 잘 모르지만, AJAX는 필요 없을 것 같습니다. 사용하세요.GET을 지정합니다..change()트:

jQuery(document).ready(function($){
  "use strict";
  var childForm = $("#child-form"),
      childSelectBox = $("#child-select-box");
  childSelectBox.change(function(e){
    e.preventDefault();
    childForm.submit();
  });
});

가 하위 한 후 되고 됩니다가 child-term해 URL을 통해 합니다.GET방법.이 값을 작업과 함께 사용하여 게시물 결과를 필터링합니다.

add_action('pre_get_posts', function(\WP_Query $query) {
  // If you're using main query, remember to check `$query->is_main_query()` as well.
  if ( isset($_GET['child-term']) && !empty($_GET['child-term']) ) {
    $query->query_vars['tax_query'] = [
      [
        'field'    => 'term_id',
        'terms'    => absint($_GET['child-term']),
        'taxonomy' => 'city'
      ]
    ];
  }
});

자세한 내용은 분류 체계 모수를 참조해야 할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/38959919/wordpress-filter-multiple-drop-down-taxonomies-to-display-custom-field-via-ajax

반응형

'IT' 카테고리의 다른 글

Ajax post request in laravel 5 return error 500 (내부 서버 오류)  (0) 2023.10.15
ng-if(Angularjs)가 작동하지 않습니다.  (0) 2023.10.15
MariaDB - 기본 키가 특정 테이블의 조인에 사용되지 않는 이유는 무엇입니까?  (0) 2023.10.15
다른 특성에 의존하는 스프링 특성  (0) 2023.10.10
SELECT 문에서 다음 값 순서 지정  (0) 2023.10.10

'IT'의 다른글

  • 현재글워드프레스 필터 여러 드롭다운 분류법으로 ajax를 통해 사용자 정의 필드를 표시합니다.

관련글

댓글

티스토리툴바