Agregar imágenes de taxonomía o iconos de categoría a tu sitio de WordPress puede ayudarte a que las categorías destaquen.
Sin embargo, WordPress no ofrece una opción para subir estas imágenes por defecto. Solo muestra los nombres de las categorías o taxonomías en las páginas de archivo. Esto puede verse simple y aburrido.
En nuestro tutorial, te mostraremos cómo agregar imágenes de taxonomía o iconos de categoría a WordPress. También aprenderás cómo mostrarlos en tus páginas de archivo, haciendo tu sitio más atractivo y fácil de usar.
¿Por qué agregar imágenes de taxonomía en WordPress?
Por defecto, tu sitio web de WordPress no incluye una opción para agregar imágenes para tus taxonomías, como categorías y etiquetas (o cualquier otra taxonomía personalizada).
Utiliza nombres de taxonomía en todas partes, incluidas las páginas de archivo de categorías o de taxonomía.
Esto se ve aburrido.
Si tus páginas de taxonomía reciben mucho tráfico de búsqueda, es posible que desees hacerlas más atractivas.
Hemos visto páginas aburridas y cargadas de texto transformarse en páginas atractivas solo con agregar imágenes relevantes. No es porque las imágenes fueran especiales, sino porque los humanos prefieren las señales visuales al texto.
Puedes agregar imágenes de taxonomía o iconos de categoría para hacer estas páginas más fáciles de usar y atractivas.
Un buen ejemplo de esto es un sitio como NerdWallet que usa iconos de categoría en su encabezado:
También puedes usarlo para crear hermosas secciones de navegación en tu página de inicio.
Aquí tienes un ejemplo del sitio web de Bankrate:
Dicho esto, veamos cómo agregar imágenes de taxonomía en WordPress fácilmente.
Agrega fácilmente imágenes de taxonomía en WordPress
Lo primero que necesitas hacer es instalar y activar el plugin Categories Images. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, puedes simplemente ir a la página Entradas » Categorías. Notarás que el plugin mostrará una imagen de marcador de posición para tus categorías existentes.
Para elegir tu propio icono de categoría, necesitas hacer clic en el enlace Editar debajo de una categoría.
En la página Editar categoría, desplázate hacia abajo hasta el final y encontrarás un formulario para subir tu propia imagen de taxonomía.
Simplemente haz clic en el botón ‘Subir/Agregar Nueva Imagen’ para subir la imagen que deseas usar para esa categoría en particular.
No olvides hacer clic en el botón ‘Agregar Categoría’ o ‘Actualizar’ para guardar tus cambios.
A continuación, puedes repetir el proceso para subir imágenes para otras categorías. También puedes subir imágenes para tus etiquetas y cualquier otra taxonomía.
Ahora, el problema es que después de agregar las imágenes, si visitas una página de categoría, no verás tu imagen de categoría allí.
Para mostrarla, necesitarás editar tu tema de WordPress o tema hijo o agregar el código usando el plugin WPCode.
Te mostraremos ambos métodos, y puedes elegir el que te parezca más fácil.
Opción 1. Mostrar iconos de imagen de categoría usando WPCode (Recomendado)
Este método es más fácil porque no tendrías que averiguar qué archivo del tema modificar, y puedes agregar el código de forma segura sin romper tu sitio.
También se recomienda para usuarios que utilizan un tema de bloques con soporte para el editor del sitio.
Primero, necesitas instalar y activar el plugin WPCode. Para más detalles, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.
Al activarlo, ve a la página WPCode » + Agregar Snippet y haz clic en el botón Usar Snippet debajo del cuadro ‘Agregar tu código personalizado (Nuevo Snippet)’.
En la siguiente pantalla, dale a tu snippet un título que te ayude a identificarlo.
Después de eso, selecciona PHP snippet como tu tipo de código.
En el cuadro Vista previa del código, copia y pega el siguiente fragmento de código:
if( is_category() ) { ?>
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>" alt="" / >
</div>
<?php
} else {
//do nothing
}
A continuación, desplázate hacia abajo hasta la sección Inserción y elige Shortcode como método de inserción.
Notarás que WPCode muestra automáticamente un shortcode. Sin embargo, también puedes crear un shortcode personalizado para que sea fácil de recordar.
A continuación, haz clic en el botón ‘Copiar’ del shortcode personalizado.
Ahora puedes usar este shortcode para mostrar la imagen de la categoría en tus páginas de archivo.
Agregar Shortcode en el Editor del Sitio
Si estás utilizando un tema de bloques con soporte para el editor del sitio, ve a la página Apariencia » Editor para lanzar el Editor del Sitio.
Aquí, puedes agregar un bloque de shortcode justo antes del bloque Título del Archivo.
Ahora pega el shortcode que copiaste anteriormente en el bloque de shortcode.
No olvides guardar tus cambios para aplicarlos. Ahora puedes visitar tu página de archivo de categoría para ver el shortcode en acción.
No te preocupes si la imagen no se ve bien. Te mostraremos cómo arreglarla más tarde usando CSS personalizado.
Opción 2. Mostrar iconos de imagen de categoría manualmente
Para este método, necesitarás agregar el código personalizado a los archivos de tu tema de WordPress.
Si esta es la primera vez que editas archivos de WordPress, entonces quizás quieras ver nuestra guía sobre cómo copiar y pegar código en WordPress.
Primero, necesitarás conectarte a tu sitio de WordPress usando un cliente FTP o el administrador de archivos de tu hosting de WordPress.
Una vez conectado, necesitarás encontrar la plantilla responsable de mostrar tus archivos de taxonomía. Estos podrían ser los archivos archives.php, category.php, tag.php o taxonomy.php.
Para más detalles, consulta nuestra guía sobre cómo encontrar qué archivos editar en un tema de WordPress.
Una vez que hayas encontrado el archivo, necesitarás descargarlo a tu computadora y abrirlo en un editor de texto como Bloc de notas o TextEdit.
Ahora pega el siguiente código donde quieras mostrar la imagen de tu taxonomía. Usualmente, querrás agregarlo antes del título de la taxonomía o la etiqueta the_archive_title().
<?php if( is_category() ) { ?>
<div class="taxonomy-image">
<img class="taxonomy-img" src="<?php if (function_exists('z_taxonomy_image_url')) echo z_taxonomy_image_url(); ?>" alt="" / >
</div>
<?php
} else {
//do nothing
}
?>
Después de agregar el código, necesitas guardar este archivo y subirlo de nuevo a tu sitio web usando FTP.
Ahora puedes visitar la página de archivo de taxonomía para ver cómo muestra la imagen de tu taxonomía. Así es como se veía en nuestra página de archivo de demostración.
Ahora, puede que todavía se vea raro, pero no te preocupes. Puedes estilizarlo usando CSS personalizado.
Estilizando iconos de categoría con CSS personalizado
Después de haber agregado el icono de categoría o las imágenes de taxonomía a tu tema de WordPress, es posible que tu imagen no se vea muy bien.
Para solucionarlo, necesitarás agregar código CSS para alinearlo correctamente.
Si es la primera vez que agregas código CSS en WordPress, consulta nuestra guía para principiantes sobre cómo agregar CSS personalizado en WordPress.
Aquí está el CSS personalizado que usamos para la imagen de la taxonomía.
img.taxonomy-img {
float: left;
max-height: 100px;
max-width: 100px;
display: inline-block;
padding: 20px;
}
Dependiendo de tu tema, es posible que también necesites estilizar elementos circundantes como el título del archivo, el título de la taxonomía y la descripción.
Simplemente envolvimos el título y la descripción de nuestro archivo de taxonomía en un elemento <div> y agregamos una clase CSS personalizada. Luego usamos el siguiente código CSS para ajustar el título y la descripción.
.taxonomy-title-description {
display: inline-block;
padding: 18px;
}
Así es como se veía después en nuestro sitio web de prueba.
Excluir taxonomías de la visualización de imágenes de taxonomía
Ahora, algunos usuarios solo querrán usar imágenes de taxonomía para taxonomías específicas.
Por ejemplo, si tienes una tienda en línea usando WooCommerce, entonces quizás quieras excluir las categorías de productos.
Simplemente regresa a la página de Imágenes de Categorías en el área de administración de WordPress y marca las taxonomías que deseas excluir.
No olvides hacer clic en el botón ‘Guardar cambios’ para almacenar tu configuración.
Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente imágenes de taxonomía en WordPress. También te pueden interesar estos útiles trucos y plugins de categorías para WordPress o nuestro artículo sobre cómo cambiar el orden de las categorías en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Ivan
¿Alguna sugerencia para algún otro plugin actualizado? Parece que el sugerido aquí no se ha actualizado recientemente.
shiv
cómo agregar imágenes de categorías en la barra lateral de WordPress como la del sitio wpbeginner "necesito ayuda con"
pamela
¿Qué pasa si quiero recorrer todos los términos y mostrarlos en una página?
Gabrielle
Hola, actualmente estoy usando este plugin en localhost.
Encuentro un uso extraño/interesante para este plugin:
Extender el menú predeterminado de WP, para enlaces de categorías,
para mostrar enlaces con imágenes de fondo.
¿Alguien sabe cómo integrar este filtro de plugin,
en el menú de WP para devolver
para cada menú?
El caso es complicado, ¿necesito usar la clase Walker?
Jess
¿Cómo muestro las imágenes usadas en el front-end? Tengo una página de listado y quiero mostrar la imagen de la taxonomía cada vez que esa página tenga esa taxonomía mostrada en la página. No encuentro nada que realmente me muestre cómo mostrar la imagen en el front-end. Todo lo que veo es la etiqueta de la taxonomía mostrada, pero no la imagen.
Gracias por tu ayuda,
Jess
Harsha
Hola,
La razón por la que terminé en esta publicación es que busqué en Google: contenido destacado en WordPress
En realidad estoy buscando una manera de mejorar el contenido relacionado en WordPress.
Debido a la selección de múltiples categorías y múltiples etiquetas para las publicaciones, veo que WordPress se confunde y no muestra contenido relacionado como supongo.
Entonces, ¿las taxonomías son una forma de mejorar cómo mostramos las publicaciones relacionadas a los lectores?
Y este plugin Taxonomy Images no se ha actualizado en 2 años
Soporte de WPBeginner
Las taxonomías pueden ser una forma de mejorar tus publicaciones relacionadas. Pero hay otras herramientas que puedes usar para fusionar y editar en bloque categorías y etiquetas.
Administrador
JW
¡Gran tutorial! ¡Gracias!
Desafortunadamente, parece que este plugin ya no tiene soporte, ¿sabes si hay alguna alternativa?
¿O el código sigue siendo válido?
Dan Horvat
Falta la parte más importante: cómo mostrar realmente esas imágenes en el front-end.
Soporte de WPBeginner
Por favor, consulta la página del plugin para obtener instrucciones detalladas.
Administrador
patrick raobelina
Para mostrar la imagen:
$url = apply_filters( ‘taxonomy-images-queried-term-image-url’, ” );
if ( ! empty( $url ) ) {
echo ”;
}
Shinkov
Estaba buscando un artículo que muestre cómo codificar esto en lugar de usar un plugin
Gonzalo
¿Cómo mostrar imágenes de taxonomías en el tema?
Usé el código pero no funciona
print apply_filters( ‘taxonomy-images-queried-term-image’, ” );
¿Por favor, ayuda?
Nicholas Worth
Tendría más sentido si el título fuera: "Mejor plugin para agregar imágenes a la taxonomía en WordPress", porque esto no es realmente un tutorial sobre cómo agregar imágenes a la taxonomía. No quiero ser aguafiestas, pero odio llegar a artículos que afirman tener información pero en realidad dicen que este otro tipo sabe lo que esperabas escuchar.
Soporte de WPBeginner
Lamentamos que te hayas sentido así. Por favor, dinos a qué te refieres con cómo agregar imágenes a la taxonomía. Quizás podamos ayudarte a encontrar la respuesta correcta.
Administrador
Jacob Perl
Supongo que lo que Nicholas pensó fue lo mismo que yo pensé cuando encontré este artículo: que sería un tutorial sobre cómo agregar un campo de imagen personalizado a las taxonomías manualmente a través de código en lugar de con un plugin. Aún así, el plugin se ve genial... quizás lo pruebe.
Luís Felipe
Lo mismo que pensé, estaba buscando un artículo que mostrara cómo codificar esto en lugar de usar un plugin
Pero este es un buen artículo de todos modos.
lemonthirst
Estoy encantado de haber encontrado este gran plugin, funciona a la perfección, me encontré con algunos problemas menores en mis publicaciones/taxonomías personalizadas, pero todo está bien ahora.
¡Gracias, chicos!
Mattia
Hola, tengo una pregunta relacionada sobre taxonomías personalizadas: ¿cómo se crea una taxonomía personalizada que solo existe dentro de un tipo de publicación personalizada particular (como su tipo de publicación personalizada "trabajo"), sin un plugin?
Mi problema es que cuando creo una taxonomía personalizada, también parece estar bajo los artículos normales o los otros tipos de publicaciones personalizadas...
Personal editorial
Tendrías que usar register_taxonomy así:
1-click Use in WordPress
Género es la taxonomía y libro será el tipo de publicación.
Administrador
Mattia
¡Gracias!
I’ll try and let you know…
Banna
Hola,
Estamos usando esto,
Pero no podemos hacer que funcione con el ID de categoría.
Tenemos un ID de categoría que queremos mostrar su miniatura, por favor ayúdenme a hacerlo.
cómo obtener la imagen en miniatura usando el ID de la taxonomía
Por favor, házmelo saber.
Gracias
Banna Daxxip
Ruben Boehler
Lo siento, pero no puedo hacer que este plugin funcione... no hay salida. ¿Quizás estoy haciendo algo mal?!
uso el plugin + este código y lo he enganchado:
print apply_filters( ‘taxonomy-images-list-the-terms’, ”, array( ‘image_size’ => ‘detail’, ‘taxonomy’ => ‘company’, ‘after’ => ”, ‘after_image’ => ”, ‘before’ => ”, ‘before_image’ => ”, ) );
No obtengo absolutamente ninguna salida... ¿podrías ayudarme a resolverlo?
_mfields
@devinsays ¡Impresionante! ¡Gracias por el consejo!
DanielPeiser
¡Suena interesante! ¿Qué pasa si tengo algunas entradas de blog que no tienen una imagen en miniatura (o imagen en la entrada), y siempre se carga la misma imagen predeterminada como miniatura en las páginas de archivo: ¿El plugin cargaría una asociada a la categoría/etiqueta?
wpbeginner
@DanielPeiser Ciertamente puedes configurarlo para que haga eso. Básicamente, los pasos serían: Primero, verifica si existe la miniatura de la entrada... Si no existe, entonces verifica la imagen de la taxonomía... si tampoco existe, entonces devuelve la miniatura predeterminada.