Mostrar subcategorías de una categoría en listado de entradas

[ 28 Febrero 2017 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Intermedio] [ ]

¿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:

Subcategorías con imágenes de Categoría actual

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.