web-dev-qa-db-fra.com

Modifier ou mettre à jour la boucle WordPress en fonction de la sélection déroulante

J'ai une page Contactez-nous qui affiche 9 emplacements sur la barre latérale en interrogeant le type de message personnalisé "Distributeurs". Je souhaite que l'utilisateur puisse utiliser un menu déroulant contenant la taxonomie "Emplacement". Par exemple, si l'utilisateur sélectionne "Californie" dans le menu déroulant, il mettra automatiquement à jour la liste avec uniquement les publications étiquetées avec Californie. Quelle est la meilleure manière de s'occuper de ça? De plus, le fait que la page soit actualisée lorsque l'utilisateur se limite à son pays ou à son État ne me dérange pas.

Idéalement, j'aimerais que les catégories de parents soient affichées dans une liste déroulante, c'est-à-dire. Allemagne, Japon, États-Unis, etc. Une deuxième liste est ensuite peuplée d'enfants de cette catégorie. Par exemple, la première liste déroulante afficherait USA, puis la Californie s'afficherait dans la deuxième liste déroulante.

Merci.

custom-post-typesquery-poststaxonomyloop
1
nurain

Commencez par utiliser ce code pour remplir le menu déroulant parent.

<select id="parent">
    <option>-</option>
    <?php
        if(taxonomy_exists('parent_taxonomy_name')):
            $results = get_terms('parent_taxonomy_name',array('fields'=>'all','parent'=>0));
            if ($results):
                foreach ($results as $result):
    ?>                                                                 
                    <option value="<?php echo $result->name; ?>"><?php echo $result->name; ?></option>
    <?php 
                endforeach;
            endif;
        endif;
    ?>
</select>

Vous devrez peut-être utiliser ajax/jquery pour renseigner la deuxième zone de liste déroulante.

 <select id="child">
        <option>-</option>
    </select>

jQuery code serait quelque chose comme ça:

jQuery("#parent").change(function(){
    jQuery.post(
        // see tip #1 for how we declare global javascript variables
        MyAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
            action : 'myajax-submit',

            // other parameters can be added along with "action"
            parent : jQuery(this).val()
        },
        function( response ) {
            if(response['success'] != false)
            {
                jQuery('#child').empty().append('<option value="">Select Location</option>');
                jQuery.each(response,function(index,value){
                    jQuery('#child').append('<option value="'+value+'">'+value+'</option>');
                });
            }
        }
    );
});

enfin, traitez ajax dans votre fichier functions.php comme ceci:

// if both logged in and not logged in users can send this AJAX request,
// add both of these actions, otherwise add only the appropriate one
add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );

function myajax_submit() {
    // get the submitted parameters
    $parent = $_POST['parent'];
    // generate the response
                $locations = ashyana_getTaxonomyValues( 'parent_taxonomy_name', $parent, 0 );
                $results = array();
                if ($locations):
                    foreach ($locations as $location):                                
                        $loc[] = $location->name;
                    endforeach;
                    $response = json_encode( $loc );
                else:
                    $response = json_encode( array( 'success' => false ) );
                endif;

    // response output
    header( "Content-Type: application/json" );
    echo $response;

    // IMPORTANT: don't forget to "exit"
    exit;
}

J'espère que ça aide. Remarque: modifiez les noms de taxonomie et les autres paramètres/arguments/variables en fonction de vos besoins.

2
booota

Je voulais juste partager un lien qui aide à expliquer les commentaires contenus dans la réponse:

http://solislab.com/blog/5-tips-for-using-ajax-in-wordpress/

Voici le conseil 1 mentionné dans l'un des commentaires:

  1. USE WP_LOCALIZE_SCRIPT () POUR DÉCLARER DES VARIABLES GLOBALES JAVASCRIPT

Bien que wp_localize_script () soit créé pour la localisation, il a également une autre grande utilité. Vous pouvez déclarer des variables javascript avec des espaces de noms à utiliser avec votre script. Voici la syntaxe:

wp_localize_script( $handle, $namespace, $variable_array );

Voici comment déclarer l'URL du fichier qui gère AJAX (dans cet exemple, j'utilise admin-ajax.php, comme indiqué dans le conseil n ° 2):

// embed the javascript file that makes the AJAX request
wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery' ) );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

De cette façon, vous n’aurez pas à utiliser PHP pour imprimer du code JavaScript, qui est à la fois moche et non cacheable. Si vous regardez le HTML généré dans l’élément, vous trouverez ceci:

<script type="text/javascript" src="http://example.com/wordpress/wp-content/plugins/myajax/js/ajax.js"></script><script type="text/javascript">// <![CDATA[
<span class="mceItemHidden">
/* 
 */
var <span class="hiddenSpellError" pre=""-->MyAjax = {
    <span class="hiddenSpellError" pre="">ajaxurl</span>:  "http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/* ]]&gt; */
</span>
// ]]></script>

Maintenant, dans votre fichier ajax.js, vous pouvez utiliser MyAjax.ajaxurl sans avoir à recourir à PHP et à inclure wp-load.php. Veuillez consulter le conseil n ° 2 ci-dessous pour en savoir plus sur la configuration du code javascript qui envoie la demande et sur la façon de gérer correctement la demande.

0
WorkingMan8798