Maison > développement back-end > tutoriel php > Comment filtrer plusieurs publications dans WordPress par balise en utilisant AJAX, sans utiliser de plugin

Comment filtrer plusieurs publications dans WordPress par balise en utilisant AJAX, sans utiliser de plugin

Patricia Arquette
Libérer: 2024-12-06 11:10:17
original
378 Les gens l'ont consulté

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

Étape 1 :
Case à cocher HTML comme ceci :

<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>');
            },
        });
    }
});

Copier après la connexion

Étape 3 :
Créer des fonctions dans function.php :

// Enregistrez l'action AJAX pour les utilisateurs connectés (vous pouvez également en ajouter pour les utilisateurs non connectés)
add_action('wp_ajax_fetch_subjects', 'fetch_subjects');
add_action('wp_ajax_nopriv_fetch_subjects', 'fetch_subjects');
fonction fetch_subjects() {
    // Vérifier nonce pour la sécurité
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'ajax_nonce')) {
        wp_send_json_error(array('message' => 'La vérification ponctuelle a échoué.'));
        wp_die();
    }

    // Récupère la taxonomie et les termes de la requête AJAX
    $taxonomie = isset($_POST['taxonomie']) ? sanitize_text_field($_POST['taxonomie']) : '';
    $terms = isset($_POST['terms']) ? array_map('sanitize_text_field', $_POST['terms']) : array();

    // Arguments de requête par défaut
    $args = tableau(
        'post_type' => 'feuille de travail',
        'posts_per_page' => -1, // Récupère tous les messages
    );

    // Si les termes sont sélectionnés, modifiez la requête
    if (!empty($taxonomy) && !empty($terms)) {
        $args['tax_query'] = tableau(
            tableau(
                'taxonomie' => $taxonomie,
                'champ' => 'limace',
                'termes' => $terms, // Passe le tableau des termes sélectionnés
                'opérateur' => 'IN', // Correspond à l'un des termes sélectionnés
            ),
        );
    }

    // Exécutez WP_Query pour récupérer les publications
    $query = nouveau WP_Query($args);

    // Vérifiez si des messages ont été trouvés
    if ($query->have_posts()) {
        $html = '';
        while ($query->have_posts()) {
            $query->the_post();
            // Sortie du message HTML
            $html .= '<div>




          

            
        
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal