menú desplegable con la selección de categoría

2

Creé un sitio web de directorio con menús desplegables en el menú que permite al usuario navegar a través de las categorías y subcategorías. [Sitio web]

Estoy usando wp_dropdown_categories() para mostrar los menús y el javascript compartido aquí para permitir al usuario seleccionar una categoría y ser navegado a esa página. Cuando se selecciona 'Todas las categorías', no sucede nada. ¿Cómo se puede agregar esa funcionalidad?

$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;

    
pregunta MF1 07.10.2014 - 19:39

3 respuestas

3

Aquí hay una variación del código que usas. Estoy usando get_categories() aquí para lograr el mismo objetivo. Tuve que ajustar mi código ligeramente para hacerlo aceptable para su necesidad.

Sin embargo, hay otras modificaciones que debes hacer para que esto funcione. Cuando selecciona la opción All Categories , se lo llevará a una página que mostrará lo que necesite mostrar. Esta página deberá crear manualmente

No hay páginas de archivo de índice en Wordpress como quizás sepas. ( consulte esta publicación que he hecho sobre el mismo tema ). Lo que esto significa es que domain.com/category/ devuelve un 404.

Entonces, para que todo esto funcione, tendrás que hacer una copia de page.php, renómbrelo a algo como page-category.php (consulta codex sobre cómo crear plantillas de página personalizadas), ábralo, cree su consulta personalizada para mostrar lo que le gustaría mostrar cuando se visite esta página

Ahora necesitas crear tu página en el back-end. Le sugiero que use el slug category para que cuando visite domain.com/category/ , se muestre esta página. ( Solo recuerda, no puedes crear páginas secundarias para esta página, romperá la jerarquía ). También he hecho el código para ir a domain.com/category/ cuando se selecciona All Categories

Aparte de eso, el código debería funcionar bien. Es posible que solo tenga que verificar las estructuras de URL, y también configurar los parámetros en get_categories() para satisfacer sus necesidades. Aquí está el código desplegable.

<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

En realidad tuve una idea aquí que será útil. Recientemente hice una respuesta para mostrar todas las categorías en una lista con todos los títulos de las publicaciones en la categoría específica. Esta misma idea se puede utilizar en su plantilla page-category.php.

Cuando un usuario selecciona la opción All Categories , serán llevados a esta página que mostrará todas las categorías y el título de la publicación.

Aquí está el código completo: ( para obtener una explicación del código, consulte mi publicación aquí )

En tus funciones.php

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

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

En su plantilla, donde necesita mostrar su lista

<?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>';
    }


?>
    
respondido por el Pieter Goosen 23.10.2014 - 20:45
2

Iba a agregar esto como un comentario, pero mis puntos de reputación aún no son lo suficientemente altos :)

Pasé unos 20 minutos probando / caminando a través de lo que tienes. Mi primera prueba repitió el problema que describiste, pero cuando configuré algunos puntos de interrupción (el evento de cambio y un LOC específico) y observé expresiones usando las herramientas de depuración de Chrome integradas, el problema parece haber dejado de ocurrir. Supongo que ha solucionado el problema o que se ha producido algún cambio de estado en mi sesión basado en el uso de la herramienta Chrome Inspect para que ahora funcione.

Parece que tienes un error en tu JS: en cada lugar tienes el código:

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

(por ejemplo, líneas 567, 4840, 4851), este código está generando un error cuando el valor es 0 (la entrada 'Todos' elegidos) y posiblemente también -1 (la entrada 'Buscar' seleccionada), aunque sospecho que esto ocurre simplemente porque la selección de EXAMINAR hace que la entrada de nivel superior Todas se establezca de nuevo de forma predeterminada (lo que a su vez activa el error).

¿Quizás en algunos casos, este error que se produce hace que la ejecución se detenga dependiendo de la configuración de los navegadores para el manejo de errores de Java? ¿Y al activar las herramientas de depuración puedo haber cambiado un cambio en el modo de ejecución para que el código continúe a través de este fallo? Solo una idea.

Además, cuando selecciono "Actividades" en Dropdown1, "Bowling" en Dropdown2, luego cambio la selección de Dropdown2 a "Todas las actividades", la URL permanece como:

enlace

pero el contenido de la página cambia para mostrar el texto simple "categoría".

De todos modos, ¡espero que esto te ayude!

Paul

    
respondido por el Paul Zee 23.10.2014 - 19:46
2

Probablemente puedas modificar el script anterior a esto:

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 también quieres incluir -1 (BUSCAR CATEGORÍAS), puedes cambiar el segundo condicional a: dropdown.options[dropdown.selectedIndex].value <= 0

    
respondido por el Howdy_McGee 23.10.2014 - 21:03

Lea otras preguntas en las etiquetas