web-dev-qa-db-fra.com

Liste déroulante avec sélection de catégorie

J'ai créé un site Web d'annuaire avec des menus déroulants dans le menu permettant à l'utilisateur de naviguer dans les catégories et sous-catégories. [Site Internet]

J'utilise wp_dropdown_categories() pour afficher les menus et le javascript partagé ici / pour permettre à l'utilisateur de sélectionner une catégorie et d'accéder à cette page. Lorsque "Toutes les catégories" est sélectionné, rien ne se passe. Comment cette fonctionnalité peut-elle être ajoutée?

$args = array(
    'show_option_all'    => 'All Categories',
    'show_option_none'   => 'BROWSE',
    'orderby'            => 'NAME', 
    'order'              => 'ASC',
    'show_count'         => 0,
    'hide_empty'         => 1, 
    'child_of'           => 0,
    'exclude'            => 1,
    'echo'               => 1,
    'selected'           => $cat_id2->term_id,
    'hierarchical'       => 1, 
    'name'               => 'cat',
    'id'                 => '',
    'class'              => 'postform',
    'depth'              => 1,
    'tab_index'          => 0,
    'taxonomy'           => 'category',
    'hide_if_empty'      => false,
);

wp_dropdown_categories( $args );

JS

<script type="text/javascript">
var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
}
dropdown.onchange = onCatChange;
categoriesdropdown
2
MF1

Voici une variante du code que vous utilisez. J'utilise get_categories() here pour atteindre le même objectif. J'ai dû ajuster légèrement mon code pour le rendre acceptable pour vos besoins.

Il y a cependant d'autres modifications à faire pour que cela fonctionne. Lorsque vous sélectionnez l'option All Categories, vous accédez à une page qui affiche tout ce que vous devez afficher. Cette page, vous devrez manuellement créer

Vous savez peut-être qu'il n'y a pas de pages d'archives d'index dans Wordpress. (Check out this post je l'ai fait sur le même sujet). Ceci signifie que domain.com/category/ renvoie un 404.

Donc, pour que tout fonctionne, vous devrez faire une copie de page.php, le renommer en quelque chose comme page-category.php (voir codex pour savoir comment créer des modèles de page personnalisés), ouvrez-le. up, créez votre requête personnalisée pour afficher ce que vous souhaitez afficher lorsque cette page est visitée

Vous devez maintenant créer votre page dans le back-end. Je suggérerais que vous utilisiez le slug category pour que lorsque vous visitiez domain.com/category/, cette page soit affichée. (Souvenez-vous que vous ne pouvez pas créez des pages enfants pour cette page, la hiérarchie sera brisée}. J'ai également créé le code pour aller à domain.com/category/ lorsque All Categories est sélectionné

En dehors de cela, le code devrait fonctionner correctement. Il vous suffit peut-être de vérifier les structures d'URL et de définir les paramètres dans get_categories() pour répondre à vos besoins. Voici le code déroulant.

<select name="event-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> 
    <option value=""><?php echo esc_attr(__('Select Category')); ?></option> 

    <?php 
        $option = '<option value="' . get_option('home') . '/category/">All Categories</option>'; // change category to your custom page slug
        $categories = get_categories(); 
        foreach ($categories as $category) {
            $option .= '<option value="'.get_option('home').'/category/'.$category->slug.'">';
            $option .= $category->cat_name;
            $option .= ' ('.$category->category_count.')';
            $option .= '</option>';
        }
        echo $option;
    ?>
</select>

EDIT

J'ai en fait eu une idée ici qui sera utile. J'ai récemment répondu à l'affichage de toutes les catégories d'une liste avec tous les titres d'articles de cette catégorie. Cette même idée peut être utilisée dans votre modèle page-category.php.

Lorsqu'un utilisateur sélectionne l'option All Categories, il est dirigé vers cette page qui répertorie toutes les catégories et le titre du message.

Voici le code complet: (pour une explication du code, voir mon post ici)

Dans votre functions.php

add_action( 'transition_post_status', 'publish_new_post', 10, 3 );

function publish_new_post() {
   delete_transient( 'category_list' );
}

Dans votre modèle où vous devez afficher votre liste

<?php
if ( false === ( $q = get_transient( 'category_list' ) ) ) {

    $args = array( 
        'posts_per_page' => -1
    );

    $query = new WP_Query($args); 

    $q = array();

    while ( $query->have_posts() ) { 

        $query->the_post(); 

        $a = '<a href="'. get_permalink() .'">' . get_the_title() .'</a>';

        $categories = get_the_category();

        foreach ( $categories as $key=>$category ) {

            $b = '<a href="' . get_category_link( $category ) . '">' . $category->name . '</a>';    

        }

        $q[$b][] = $a; // Create an array with the category names and post titles
    }


    /* Restore original Post Data */
    wp_reset_postdata();

set_transient( 'category_list', $q, 12 * HOUR_IN_SECONDS );
}

foreach ($q as $key=>$values) {
        echo $key;

        echo '<ul>';
            foreach ($values as $value){
                echo '<li>' . $value . '</li>';
            }
        echo '</ul>';
    }


?>
4
Pieter Goosen

J'allais ajouter ceci en tant que commentaire, mais mes points de repère ne sont pas encore assez élevés :)

J'ai passé environ 20 minutes à tester/parcourir ce que vous avez. Mon premier test a reproduit le problème que vous décrivez, mais lorsque j'ai configuré certains points d'arrêt (l'événement change et un LOC spécifique) et surveillé les expressions à l'aide des outils de débogage intégrés à Chrome, le problème semble s'être arrêté. Je suppose que le problème a été résolu ou qu'un changement d'état a eu lieu pour ma session, basé sur l'utilisation de l'outil Chrome Inspect, de sorte qu'il fonctionne maintenant.

Vous semblez avoir une erreur dans votre JS: à chaque endroit, vous avez le code:

dropdown(x).onchange = onCatChange(x);

(lignes 567, 4840, 4851, par exemple), ce code génère une erreur lorsque la valeur est 0 (entrée "Toutes" choisie) et éventuellement aussi -1 (entrée "Parcourir" sélectionnée), bien que je soupçonne que cela se produit simplement parce que sélectionner BROWSE entraîne la remise à nouveau par défaut de l'entrée de niveau supérieur Tous (ce qui déclenche à son tour l'erreur).

Peut-être que dans certains cas, cette erreur générée provoque l'arrêt de l'exécution en fonction des paramètres du navigateur pour la gestion des erreurs Java. Et en activant les outils de débogage, j’ai peut-être changé de mode d’exécution pour que le code continue à traverser cet échec? Juste une idée.

De même, lorsque je sélectionne "Activités" dans Dropdown1, "Bowling" dans Dropdown2, puis modifie la sélection Dropdown2 en "Toutes les activités", l'URL reste la suivante:

http://www.mydetroitjewishdirectory.com/category/activities/bowling/

mais le contenu de la page change pour afficher le texte simple "catégorie".

Quoi qu'il en soit, espérons que cela vous aide!

Paul

2
Paul Zee

Vous pourriez probablement simplement modifier le script ci-dessus en ceci:

var dropdown = document.getElementById("cat");
function onCatChange() {
    if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
        location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
    }
    else if ( dropdown.options[dropdown.selectedIndex].value == 0 ) {
        location.href = "<?php echo get_option('home'); ?>";
    }
}
dropdown.onchange = onCatChange;

Si vous souhaitez également inclure -1 (CATÉGORIES DE NAVIGATION), vous pouvez remplacer la deuxième condition par: dropdown.options[dropdown.selectedIndex].value <= 0

2
Howdy_McGee