> 백엔드 개발 > PHP 튜토리얼 > 플러그인을 사용하지 않고 AJAX를 사용하여 WordPress에서 태그로 여러 게시물을 필터링하는 방법

플러그인을 사용하지 않고 AJAX를 사용하여 WordPress에서 태그로 여러 게시물을 필터링하는 방법

Patricia Arquette
풀어 주다: 2024-12-06 11:10:17
원래의
378명이 탐색했습니다.

How to Filter multiple Posts in WordPress by tag Using AJAX, without using any plugin

1단계:
HTML 체크박스 다음과 같습니다:

<div>



<p>display all tabs or subjects container:<br>
</p>

<pre class="brush:php;toolbar:false"><!-- Container to display worksheets -->
<div>



<p><strong>Step-2:</strong><br>
create js file:<br>
</p>

<pre class="brush:php;toolbar:false">jQuery(document).ready(function ($) {
    // Fetch Subjects on any checkbox change
    $('.subject-filter').on('change', function () {
        // Gather all selected grades
        var taxonomy = $(this).data('taxonomy'); // Taxonomy name
        var terms = []; // Array to hold selected terms
        $('.subject-filter:checked').each(function () {
            terms.push($(this).val());
        });

        // Fetch Subjects for selected grades
        fetchSubjects(taxonomy, terms);
    });

    // Function to fetch Subjects
    function fetchSubjects(taxonomy = '', terms = []) {
        $.ajax({
            url: ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'fetch_subjects',
                nonce: ajax_object.nonce,
                taxonomy: taxonomy,
                terms: terms, // Send array of selected terms
            },
            beforeSend: function () {
                $('.worksheet-container').html('<p>Loading...</p>');
            },
            success: function (response) {
                if (response.success) {
                    $('.worksheet-container').html(response.data.html);
                } else {
                    $('.worksheet-container').html('<p>' + response.data.message + '</p>');
                }
            },
            error: function () {
                $('.worksheet-container').html('<p>An error occurred. Please try again.</p>');
            },
        });
    }
});

로그인 후 복사

3단계:
function.php에서 함수 만들기:

// 로그인한 사용자를 위한 AJAX 액션 등록(로그인하지 않은 사용자에 대해서도 추가 가능)
add_action('wp_ajax_fetch_subjects', 'fetch_subjects');
add_action('wp_ajax_nopriv_fetch_subjects', 'fetch_subjects');
함수 fetch_subjects() {
    // 보안을 위해 nonce를 확인합니다.
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'ajax_nonce')) {
        wp_send_json_error(array('message' => 'Nonce 확인에 실패했습니다.'));
        wp_die();
    }

    // AJAX 요청에서 분류 및 용어를 가져옵니다.
    $분류 = isset($_POST['분류']) ? sanitize_text_field($_POST['taxonomy']) : '';
    $terms = isset($_POST['terms']) ? array_map('sanitize_text_field', $_POST['terms']) : array();

    // 기본 쿼리 인수
    $args = 배열(
        '포스트 유형' => '워크시트',
        '게시물_페이지당' => -1, // 모든 게시물을 가져옵니다.
    );

    // 용어가 선택되면 쿼리를 수정합니다.
    if (!empty($taxonomy) && !empty($terms)) {
        $args['tax_query'] = 배열(
            정렬(
                '분류' => $분류,
                '필드' => '강타',
                '용어' => $terms, // 선택한 용어의 배열을 전달합니다.
                '연산자' => 'IN', // 선택한 용어 중 하나와 일치
            ),
        );
    }

    // WP_Query를 실행하여 게시물을 가져옵니다.
    $쿼리 = 새로운 WP_Query($args);

    // 게시물이 발견되었는지 확인
    if ($query->have_posts()) {
        $html = '';
        while ($query->have_posts()) {
            $query->the_post();
            // 게시물 HTML을 출력합니다.
            $html .= '<div>




          

            
        
로그인 후 복사

위 내용은 플러그인을 사용하지 않고 AJAX를 사용하여 WordPress에서 태그로 여러 게시물을 필터링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿