¿Tienes un sitio con subcategorías?, seguramente te has dado cuenta que la mayoría de themes no muestra las subcategorías cuando se consulta la categoría padre desde un ítem de menú, no te preocupes, en este artículo veremos cómo solucionar eso.
1- Generalidades
Para realizar los cambios usaremos el theme Twenty Seveenteen, además tendremos una estructura de categorías y subcategorías creadas, las subcategorías tendrán una imagen como parte de la descripción.
El resultado final que vas a obtener es algo similar a lo siguiente:
2- Añadir la imagen a la categoría
WordPress no ofrece un campo de imagen para la categoría, sin embargo puedes colocar la imagen como parte de la descripción a través de código html.
Sin embargo por defecto WordPress filtra el campo de descripción eliminando cualquier código HTML por lo que para permitir el ingreso de HTML en el campo de descripción de la categoría debes agregar el siguiente código al archivo functions.php de tu theme.
// Quitar Filtro de Descripcion Categoria
foreach ( array( 'pre_term_description' ) as $filter ) {
remove_filter( $filter, 'wp_filter_kses' );
}
foreach ( array( 'term_description' ) as $filter ) {
remove_filter( $filter, 'wp_kses_data' );
}
3- Mostrar las Subcategorías
Para mostrar las subcategorías necesitas agregar código en el archivo del theme que genera el listado de entradas de la categoría, en el caso del theme Twenty Seventeen tienes un archivo genérico llamado archivo.php, sin embargo te recomiendo agregar el código en un archivo category.php.
<?php
$list_subcat = array();
if ( !empty($cat) ) $list_subcat = get_categories( ['hide_empty' => false, 'parent' => $cat] );
if ( count($list_subcat)):
echo "<div class='subcat'>";
foreach ($list_subcat as $item_subcat) {
$category_link = get_category_link( $item_subcat->term_id );
echo '<div>';
echo '<h3><a href="'.$category_link.'">'.$item_subcat->name.'</a></h3>';
echo '<div><a href="'.$category_link.'">'.$item_subcat->description.'</a></div>';
echo '</div>';
}
echo "</div>";
endif;
También es posible usar category-noticias.php, este archivo tiene el slug de la categoría padre como parte del nombre, esto es posible debido a la flexibilidad que ofrece WordPress para los archivos de categoría.
4- Añadir estilos CSS
Finalmente agrega algo de estilos CSS, debido a que el código anterior usa la clase subcat, puedes entonces agregar código CSS basado en esa clase.
.subcat{
border: 1px solid #eee;
padding: 10px;
margin-bottom: 30px;
}
.subcat img{
width: 120px;
height: 120px;
}
.subcat > div{
display: inline-block;
width: 45%;
text-align: center;
margin-bottom: 30px;
}
¿Aún con dudas?, en el siguiente video se detalla cada uno de los puntos tratados anteriormente.
Artículos Relacionados
(2 votos, promedio: 3,00 de 5)
Cargando...
Alguna forma de resaltar la categoria o subcategoria que se ha seleccionado como principal?
Por ejemplo :
-Cultivos
–frutas
—-manzanas (seleccionado como principal)
Encontraste respuesta? Me interesa tu duda
Hola, una categoría se marca como principal a nivel de entrada, podrías usar el ID de la entrada posiblemente para cambiar el diseño de una categoría específica. Espero hacer un artículo sobre esto.
Brillante. Muchas gracias. Rápido, claro y fácil.
Gracias Verónica!. Saludos.
Hola,
Primero de todo, muchas gracias por este tutorial.
Quería preguntarte si este procedimiento se puede aplicar para la plantilla Divi. En mi caso he instalado un plugin para clasificar en categorias y subcategorias las páginas creadas (sí, páginas, no entradas ni proyectos). Estoy buscando la manera de mostrar solo las subcategorias (cuando las hayan) en la página de categoria.
Un saludo!
Hola, no lo he probado en Divi, puedes revisar si tienes los archivos de category.php o similar si que debería poder.
Hola, gracias por tu tutorial, me ha servido enormemente.
Ahora bien, tengo una consulta para hacerte. En el caso de que las subcategorías tengan un thumbnail ¿Cómo hago para que también se muestre junto al nombre y la descripción? Desde ya, muchas gracias.
Hola, las categorías por defecto no tienen imagen, es por eso que coloco la imagen como parte de la descripción, si en tus categorías tienes la opción de agregar imágenes de otra forma posiblemente sea una funcionalidad del theme o plugin que usas, tendrías que consultar con los desarrolladores para saber cómo obtener la imagen por código. Saludos.
Hola. El artículo está genial. Será que si existieran más categorías padre (Noticias, Eventos, Lo que sea, etc.), se puede hacer igual un archive de categorías padre, al darle click a “Noticias” (o a cualquier categoría padre) te lleva a las categorías hija (Deportes, Economía, etc.) y como ya nos enseñaste, si le doy click a Deportes me lleva a las entradas de deportes. De antemano gracias por tu respuesta.
Hola Juan, si efectivamente, el código debería funcionar para lo que comentas, es decir tener mas niveles de anidamiento entre categorías padres y categorías hijo. Saludos.