Desplegable con selección de categorías
He creado un sitio web de directorio con menús desplegables que permiten 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 que el usuario seleccione una categoría y sea dirigido 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' => 'Todas las Categorías',
'show_option_none' => 'EXPLORAR',
'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;

Aquí tienes una variación del código que utilizas. Estoy usando get_categories()
aquí para lograr el mismo objetivo. Tuve que ajustar ligeramente mi código para que sea aceptable para tus necesidades.
Sin embargo, hay otras modificaciones que debes hacer para que esto funcione. Cuando seleccionas la opción Todas las Categorías
, serás llevado a una página que mostrará lo que necesites mostrar. Esta página tendrás que crearla manualmente.
Como probablemente sabes, no hay páginas de archivo de índice en WordPress. (Mira esta publicación que hice sobre el mismo tema). Esto significa que dominio.com/categoria/
devuelve un error 404.
Así que, para que todo funcione, tendrás que hacer una copia de page.php, renombrarla a algo como page-category.php (consulta el codex sobre cómo crear plantillas de página personalizadas), abrirla y crear tu consulta personalizada para mostrar lo que quieras cuando se visite esta página.
Ahora necesitas crear tu página en el backend. Sugeriría que uses el slug categoria
para que cuando visites dominio.com/categoria/
, se muestre esta página. (Recuerda, no puedes crear páginas hijas para esta página, romperá la jerarquía). También he modificado el código para ir a dominio.com/categoria/
cuando se seleccione Todas las Categorías
.
Aparte de eso, el código debería funcionar bien. Solo necesitas verificar las estructuras de URL quizás, y también configurar los parámetros en get_categories()
para que se ajusten a tus necesidades. Aquí está el código del menú desplegable.
<select name="event-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'>
<option value=""><?php echo esc_attr(__('Seleccionar Categoría')); ?></option>
<?php
$option = '<option value="' . get_option('home') . '/categoria/">Todas las Categorías</option>'; // cambia categoria por tu slug de página personalizado
$categories = get_categories();
foreach ($categories as $category) {
$option .= '<option value="'.get_option('home').'/categoria/'.$category->slug.'">';
$option .= $category->cat_name;
$option .= ' ('.$category->category_count.')';
$option .= '</option>';
}
echo $option;
?>
</select>
EDITADO
De hecho, se me ocurrió una idea que será útil. Recientemente hice una respuesta sobre cómo mostrar todas las categorías en una lista con todos los títulos de publicaciones bajo cada categoría específica. Esta misma idea se puede usar en tu plantilla page-category.php.
Cuando un usuario selecciona la opción Todas las Categorías
, será llevado a esta página que listará todas las categorías y los títulos de las publicaciones.
Aquí está el código completo: (para una explicación del código, mira mi publicación aquí)
En tu functions.php
add_action( 'transition_post_status', 'publish_new_post', 10, 3 );
function publish_new_post() {
delete_transient( 'category_list' );
}
En tu plantilla donde necesites mostrar tu 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; // Crea un array con los nombres de categoría y títulos de publicaciones
}
/* Restaurar los datos originales del Post */
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>';
}
?>

Probablemente podrías 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 (EXPLORAR CATEGORÍAS) podrías cambiar el segundo condicional a: dropdown.options[dropdown.selectedIndex].value <= 0

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 y revisando lo que tienes. Mi primera prueba replicó el problema que describes, pero cuando configuré algunos puntos de interrupción (el evento change y una línea de código específica) y expresiones de seguimiento usando las herramientas de depuración integradas de Chrome, el problema parece haber dejado de ocurrir. Asumo que o bien has solucionado el problema, o hay algún cambio de estado que ha ocurrido en mi sesión al usar la herramienta Chrome Inspect que hace que ahora funcione.
Parece que tienes un error en tu JS: en cada lugar donde tienes el código:
dropdown(x).onchange = onCatChange(x);
(por ejemplo, líneas 567, 4840, 4851), este código lanza un error cuando el valor es 0 (la entrada 'All' seleccionada) y posiblemente también -1 (la entrada 'Browse' seleccionada), aunque sospecho que esto ocurre simplemente porque seleccionar BROWSE hace que la entrada All de nivel superior se establezca nuevamente por defecto (lo que a su vez desencadena el error).
¿Quizás en algunos casos, este error que se lanza hace que la ejecución se detenga dependiendo de la configuración del navegador para el manejo de errores de Java? ¿Y al activar las herramientas de depuración podría haber cambiado un modo de ejecución haciendo que el código continúe a pesar de este fallo? Solo es una idea.
Además, cuando selecciono "Activities" en Dropdown1, "Bowling" en Dropdown2, y luego cambio la selección de Dropdown2 a "All Activities", la URL permanece como:
http://www.mydetroitjewishdirectory.com/category/activities/bowling/
pero el contenido de la página cambia para mostrar solo el texto simple "category".
¡De todos modos, espero que esto te ayude!
Paul
