首頁 >後端開發 >php教程 >如何使用 AJAX 在 WordPress 中按標籤過濾多個帖子,而不使用任何插件

如何使用 AJAX 在 WordPress 中按標籤過濾多個帖子,而不使用任何插件

Patricia Arquette
Patricia Arquette原創
2024-12-06 11:10:17379瀏覽

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 步:
在functions.php中建立函數:

// 為登入使用者註冊AJAX操作(您也可以為非登入使用者新增)
add_action('wp_ajax_fetch_subjects', 'fetch_subjects');
add_action('wp_ajax_nopriv_fetch_subjects', 'fetch_subjects');
函數 fetch_subjects() {
    // 驗證隨機數以確保安全
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'ajax_nonce')) {
        wp_send_json_error(array('message' => '隨機數驗證失敗。'));
        wp_die();
    }

    // 從 AJAX 請求中取得分類和術語
    $taxonomy = isset($_POST['taxonomy']) ? sanitize_text_field($_POST['分類']) : '';
    $terms = isset($_POST['terms']) ? array_map('sanitize_text_field', $_POST['terms']) : array();

    // 預設查詢參數
    $args = 數組(
        'post_type'=>; '工作表',
        'posts_per_page' =>; -1, // 取得所有帖子
    );

    // 如果選擇了條件,則修改查詢
    if (!empty($taxonomy) && !empty($terms)) {
        $args['tax_query'] = 數組(
            大批(
                '分類法' => $分類法,
                '字段' => '蛞蝓',
                '條款' => $terms, // 傳遞所選術語的陣列
                '操作員' => 'IN', // 符合任何選定的術語
            ),
        );
    }

    // 執行 WP_Query 來取得帖子
    $query = new WP_Query($args);

    // 檢查是否發現任何帖子
    if ($query->have_posts()) {
        $html = '';
        while ($query->have_posts()) {
            $query->the_post();
            // 輸出貼文 HTML
            $html .= '<div>




          </div>

            
        

以上是如何使用 AJAX 在 WordPress 中按標籤過濾多個帖子,而不使用任何插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn