• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Mostrar subcategorías de una categoría en listado de entradas
Anuncio banner webservi

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

Mostrar subcategorías listado entradas

[ 28 febrero 2017 ] [ Actualizado: 6 marzo 2017 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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

Agregar Imagen Categoría

 

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.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Leer datos desde otra base de datos en WordPressLeer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPressCrear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPressMostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPressAñadir código de Google Tag Manager sin plugins en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 3,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. luis

    15 diciembre, 2019

    Alguna forma de resaltar la categoria o subcategoria que se ha seleccionado como principal?

    Por ejemplo :
    -Cultivos
    –frutas
    —-manzanas (seleccionado como principal)

    • Sergi

      14 abril, 2020

      Encontraste respuesta? Me interesa tu duda

      • Jhon Marreros Guzmán

        15 abril, 2020

        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.

  2. Verónica

    5 abril, 2020

    Brillante. Muchas gracias. Rápido, claro y fácil.

    • Jhon Marreros Guzmán

      5 abril, 2020

      Gracias Verónica!. Saludos.

  3. Guillem

    9 enero, 2021

    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!

    • Jhon Marreros Guzmán

      13 enero, 2021

      Hola, no lo he probado en Divi, puedes revisar si tienes los archivos de category.php o similar si que debería poder.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Añadir código de Google Tag Manager sin plugins en WordPress

Tablas Responsive en WordPress sin plugins

Mostrar mensajes en la administración de WordPress y en Gutenberg

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

Recientes

  • Leer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad