• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Mostrar subcategorías de una categoría en listado de entradas

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

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de 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.

  4. Nicolás

    19 octubre, 2021

    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.

    • Jhon Marreros Guzmán

      20 octubre, 2021

      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.

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

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Qué son los Shortcodes en WordPress y cómo usarlos

Barra inferior fija para móviles en WordPress

Empaquetar WordPress con install.php

Fijar Widget lateral en WordPress sin plugins

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados