Este tutorial apunta a generar un dropdown en el que se pueda seleccionar una categoría y en caso de que contenga subcategorías éstas aparezcan en un segundo dropdown con las correspondientes opciones. Para confeccionar esta plantilla con el combobox, nos basamos en la solución que encontramos en stackoverflow.com.
Primero creamos la función parent_child_cat_select() en el functions.php.
function parent_child_cat_select() { ?>
<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function() {
jQuery('#parent_cat').change(function(){
var parentCat=jQuery('#parent_cat').val();
// call ajax
jQuery.ajax({
url:"/wp-admin/admin-ajax.php",
type:'POST',
data:'action=category_select_action&parent_cat_ID=' + parentCat,
success:function(results)
{
jQuery("#sub_cat_div").html(results);
}
});
});
});
/* ]]> */
</script>
<div id="cat_box_search">
<form action="<?php bloginfo('url'); ?>/" method="get">
<div id="parent_cat_div">
<h3>Seleccione una categoría</h3>
<?php wp_dropdown_categories("show_option_none=Seleccione una categoria&orderby=name&depth=1&hierarchical=1&id=parent_cat"); ?>
</div>
<div id="sub_cat_div">
<h3>Seleccione una sub-categoría</h3>
<select name="sub_cat_disabled" id="sub_cat_disabled" disabled="disabled">
<option>Seleccione una categoría padre primero!</option>
</select>
</div>
<div id="submit_div"><input type="submit" value="Enviar" /></div>
</form>
</div>
<?php }Luego añadimos la función implement_ajax(), que será la encargada de buscar las subcategorías sin que el usuario necesite recargar la página. Si no encuentra ninguna, muestra un mensaje.
function implement_ajax() {
$parent_cat_ID = $_POST['parent_cat_ID'];
if ( isset($parent_cat_ID) )
{
$has_children = get_categories("parent=$parent_cat_ID");
if ( $has_children ) {
wp_dropdown_categories("orderby=name&parent=$parent_cat_ID");
} else {
?><select name="sub_cat_disabled" id="sub_cat_disabled" disabled="disabled"><option>No posee sub-categorías</option></select><?php
}
die();
} // end if
}
add_action('wp_ajax_category_select_action', 'implement_ajax');
add_action('wp_ajax_nopriv_category_select_action', 'implement_ajax');//for users that are not logged in.Si el theme que estamos utilizando no utiliza jQuery, podemos cargarlo de la siguiente manera, también en el functions.php
/* Mi jQuery */
function my_init_method() {
if (!is_admin()) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
}
add_action('init', 'my_init_method');Ahora pasamos a la plantilla de página en donde se muestra la función al usuario, la cual se invoca colocando parent_child_cat_select(). Insertamos el siguiente código, en nuestro caso en la plantilla index.php. En nuestro ejercicio colocamos el combobox y un bucle para que imprima los resultados en forma de lista. Recuerden que en una plantilla con mas archivos buscará imprimir las categorías en category.php o en archive.php, y en último caso en index.php. Para saber mas sobre jerarquías de plantillas visiten Template Hierarchy
<?php get_header(); ?> <div id="content"> <?php parent_child_cat_select(); ?> <ul> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink(); ?>" alt="<?php the_title(); ?>"><?php the_title(); ?></a></li> <?php endwhile; endif; ?> </ul> </div> <?php get_footer(); ?>
Y finalmente el CSS.
body {
background: #90bdeb;
font-family:arial, sans-serif;
font-size:13px;
line-height:18px;
}
#content {
width: 500px;
height: 500px;
margin: 50px auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 1px 1px #999;
-moz-box-shadow: inset 0px 0px 1px 1px #999;
box-shadow: inset 0px 0px 1px 1px #999;
background:white;
padding: 20px;
}
#parent_cat_div, #sub_cat_div {
padding: 10px;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 10px;
}
select, option {
width: 250px;
height: 25px;
}
#parent_cat_div h3, #sub_cat_div h3 {
font-size:18px;
font-weight:bold;
margin-bottom: 5px;
color: #007eff;
}
input[type="submit"] {
font-size:14px;
font-weight:bold;
color:white;
background: #007eff;
border: 1px solid #007eff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 2px 2px #999;
-moz-box-shadow: 0px 0px 2px 2px #999;
box-shadow: 0px 0px 2px 2px #999;
padding: 5px 15px;
margin-left: 10px;
}
input[type="submit"]:hover {
background:#90bdeb;
}
ul {
margin: 20px 10px;
}
li a {
font-size: 14px;
text-decoration:none;
font-weight:bold;
color:#007eff;
}Pueden descargar los archivos de nuestro ejercicio desde aquí: Combobox Categorias (258)