¿Desea mostrar imágenes de taxonomía o iconos de categoría en WordPress?
Por defecto, WordPress no tiene la opción de subir una imagen de taxonomía o un icono de categoría. Simplemente muestra un nombre de categoría o taxonomía en las páginas de archivo.
En este artículo, le mostraremos cómo añadir fácilmente imágenes de taxonomía o iconos de categoría en WordPress. También te mostraremos cómo mostrar imágenes de taxonomía en tus páginas de archivo.
¿Por qué añadir imágenes de taxonomía en WordPress?
Por defecto, su sitio web WordPress no viene con una opción para añadir imágenes para sus taxonomías como categorías y etiquetas (o cualquier otra taxonomía personalizada).
Simplemente utiliza nombres de taxonomía en todas partes, incluidos los archivos de categorías o las páginas de archivos de taxonomía.
Esto parece un poco simple y aburrido.
Si recibe mucho tráfico de búsqueda en sus páginas de taxonomía, quizá le interese hacerlas más atractivas.
La forma más fácil de hacer una página más interesante es añadir imágenes. Puede añadir 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 ello es un sitio como NerdWallet, que utiliza iconos de categoría en su cabecera:
También puedes utilizarlo para crear bonitas secciones de navegación en tu página de inicio, como Bankrate:
Dicho esto, veamos cómo añadir fácilmente imágenes de taxonomía en WordPress.
Añadir fácilmente imágenes de taxonomía en WordPress
Lo primero que tienes que hacer es instalar y activar el plugin Categories Images. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, sólo tienes que ir a la página Entradas ” Categorías. Notarás que el plugin mostrará un marcador de posición para tus categorías existentes.
Para elegir su propio icono de categoría, debe hacer clic en el enlace Editar situado debajo de una categoría.
En la página Editar categoría, desplácese hasta el final y encontrará un formulario para subir su propia imagen de taxonomía.
Basta con hacer clic en el botón “Subir/Añadir nueva imagen” para subir la imagen que desea utilizar para esa categoría concreta.
No olvide hacer clic en el botón Añadir categoría o Actualizar para guardar los cambios.
A continuación, puede repetir el proceso para subir imágenes de otras categorías. También puede subir imágenes para sus etiquetas y cualquier otra taxonomía.
Ahora, el problema es que después de añadir las imágenes, si usted visita una página de categoría, entonces usted no verá su imagen de categoría allí.
Para mostrarlo, deberá editar su tema o tema hijo de WordPress o utilizar el plugin WPCode para añadir el código.
Te mostraremos ambos métodos para que elijas el que te parezca más fácil.
Opción 1. Mostrar iconos de imagen de categoría utilizando WPCode (Recomendado)
Este método es más fácil porque usted no tendría que averiguar qué archivo de tema para modificar y se puede añadir el código de forma segura sin romper su sitio.
También se recomienda para los usuarios que utilizan un tema de bloque con soporte para el editor de sitios.
Primero, necesitas instalar y activar el plugin WPCode. Para más detalles, consulte nuestro tutorial sobre cómo instalar un plugin de WordPress.
Una vez activado, vaya a la página WPCode ” + Añadir fragmento de código y haga clic en el botón Utilizar fragmento de código situado debajo del cuadro “Añada su código personalizado (nuevo fragmento de código)”.
En la pantalla siguiente, ponga a su fragmento de código un título que le ayude a identificarlo.
A continuación, seleccione fragmento de código PHP.
En el cuadro Vista previa del código, copie y pegue 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ácese hasta la sección Inserción y elija Shortcode como método de inserción.
Notarás que WPCode mostrará automáticamente un shortcode. Sin embargo, para que tu shortcode sea fácil de recordar, también puedes crear un shortcode personalizado.
A continuación, haga clic en el botón Copiar del shortcode personalizado.
Ahora puede utilizar este shortcode para mostrar la imagen de la categoría en sus páginas de archivo.
Añadir shortcode en el editor de sitios
Si utiliza un tema de bloque compatible con el editor de sitios, vaya a la página Apariencia ” Editor para iniciar el Editor de sitios.
Aquí puede añadir un bloque shortcode justo antes del bloque Título del archivo.
Ahora pega el shortcode que has copiado antes en el bloque shortcode.
No olvide guardar los cambios para aplicarlos. Ahora puede visitar su página de archivo de categorías para ver el shortcode en acción.
No te preocupes si la imagen no se ve bien. Más adelante te mostraremos cómo corregirlo utilizando CSS personalizado.
Opción 1. Mostrar iconos de imagen de categoría manualmente
Para este método, necesitará añadir el código personalizado a los archivos de su tema de WordPress.
Si es la primera vez que edita archivos de WordPress, le recomendamos que consulte nuestra guía sobre cómo copiar y pegar código en WordPress.
En primer lugar, deberá conectarse a su sitio WordPress mediante un cliente FTP o el gestor de archivos de su alojamiento WordPress.
Una vez conectado, tendrás que encontrar la plantilla responsable de mostrar tus archivos de taxonomía. Puede tratarse de los archivos archives.php, category.php, tag.php o taxonomía.php.
Para más detalles, consulte nuestra guía sobre cómo encontrar qué archivos editar en un tema de WordPress.
Una vez que hayas encontrado el archivo, tendrás que descargarlo en tu ordenador y abrirlo en un editor de texto como Notepad o TextEdit.
Ahora pega el siguiente código donde quieras mostrar la imagen de tu taxonomía. Normalmente, querrá añadirlo antes del título de la taxonomía o de 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 añadir el código, debe guardar este archivo y volver a subirlo a su sitio web mediante FTP.
Ahora puede visitar la página del archivo de taxonomía para ver cómo se muestra su imagen de taxonomía. Así es como se ve en nuestra página de archivo de demostración.
Ahora, todavía puede parecer un poco torpe, pero no te preocupes. Usted puede estilo que el uso de un poco de CSS personalizado.
Iconos de categoría estilizados con CSS personalizado
Después de añadir el icono de categoría o las imágenes de taxonomía a su tema de WordPress, es posible que su imagen no se vea muy bien.
Para corregirlo, tendrás que añadir código CSS para alinearlo correctamente.
Si es la primera vez que añade código CSS en WordPress, eche un vistazo a nuestra guía para principiantes sobre cómo añadir CSS personalizado en WordPress.
Aquí está el CSS personalizado que utilizamos para la imagen de la taxonomía.
img.taxonomy-img {
float: left;
max-height: 100px;
max-width: 100px;
display: inline-block;
padding: 20px;
}
Dependiendo del tema, es posible que también tenga que aplicar estilo a 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 añadimos una clase CSS personalizada. A continuación, utilizamos 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 quedó después en nuestro sitio web de prueba.
Excluir taxonomías de la visualización de imágenes de taxonomía
Ahora bien, es posible que algunos usuarios solo quieran utilizar imágenes de taxonomía para taxonomías específicas.
Por ejemplo, si tiene una tienda online con WooCommerce, puede que quiera excluir categorías de productos.
Simplemente vuelva a la página Categorías Imágenes en el área de administrador de WordPress y marque / compruebe las taxonomías que desea excluir.
No olvides hacer clic en el botón Guardar cambios para establecer los ajustes.
Esperamos que este artículo te haya ayudado a aprender cómo añadir fácilmente imágenes de taxonomía en WordPress. Puede que también quieras ver estos útiles hacks de categorías y plugins para WordPress o ver nuestros consejos para conseguir más tráfico de los motores de búsqueda.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ivan says
Any suggestions for any other up to date plugin. Looks like the one suggested here hasn’t been updated recently.
shiv says
how to add category images in WordPress side bar like the one in wpbeginner site ” i need help with “
pamela says
What if i want to loop through all the terms and display them on one page
Gabrielle says
Hi,i’m currently using this plugin on localhost.
I find a strange/interesting usage for this plugin:
Extending default WP menu, for categories links,
to show links with background images.
Anyone knows how to integrate this plugin filter,
into wp menu to return
for each menu?
The case is complicated, do i need to use Walker class?
Jess says
How do I display the images used in the front end? I have a listing page and want to display the taxonomy image when ever that page has that taxonomy outputted on the page. I can’t find anything that actually shows me how to display the image on the front end. All I see is the Taxonomy label outputted by not the image.
Thanks for your help,
Jess
Harsha says
Hi,
The reason I ended in this post is I googled – featured content in wordpress
I am actually looking at way, i can improve the related content in the wordpress.
Because of selecting multiple categories and mutiple tags to posts, I see WordPress gets confused and does not show related content as I presume.
So, Is taxonomies a way to improve how we show related posts, to the readers.
And this plugin Taxonomy Images is not updated for 2 years
WPBeginner Support says
Taxonomies can be a way to improve your related posts. But there are other tools that you can use to merge and bulk edit categories and tags.
Administrador
JW says
Great tutorial! Thank!
Unfortunately it looks like this plugin isn’t supported anymore, do you know if there is an alternative?
Or is the code still valid?
Dan Horvat says
The most important part is missing – how to actually display those images in the front end.
WPBeginner Support says
Please see the plugin page for detailed instructions.
Administrador
patrick raobelina says
To display the image:
$url = apply_filters( ‘taxonomy-images-queried-term-image-url’, ” );
if ( ! empty( $url ) ) {
echo ”;
}
Shinkov says
i was searching for an article that shows how to code this instead using a plugin
Gonzalo says
How to display pictures of taxonomies in the theme?
I used the code but does not work
print apply_filters( ‘taxonomy-images-queried-term-image’, ” );
Please Help?
Nicholas Worth says
Would make more sense if title was, “Best Plugin for Adding Images to Taxonomy in WordPress”, cause this isn’t really a tutorial about how to add images to taxonomy. Don’t mean to be a downer but I hate coming to articles that claim information but in reality they are saying this other guy knows you were hoping to here.
WPBeginner Support says
We are sorry, you felt that way. Please let us know what you mean by how to add images to taxonomy? May be we can help you find the right answer.
Administrador
Jacob Perl says
I’m guessing what Nicholas thought was the same thing I thought when I found this article: that it would be a tutorial on how to add a custom image field to taxonomies manually via coding rather than with a plugin. Still the plugin looks cool…I might check it out.
Luís Felipe says
The same thing i thought, i was searching for an article that shows how to code this instead using a plugin
But this is a good article anyway.
lemonthirst says
I am delighted that i have found this great plugin, it works like a charm, i ran across some minor issues on my custom posts/taxonmy but all is well now.
Thank you guys!
Mattia says
Hi, have a related question about custom taxonomies: how do you create a custom taxonomy that exists only inside a particular custom post type (like your “work” custom post type), without a plugin?
My problem is that when I create a custom taxonomy, it appears to be also under the normal articles or the other custom post types…
Editorial Staff says
You would have to use register_taxonomy like so:
1-click Use in WordPress
Genre is the taxonomy and book will be the post type.
Administrador
Mattia says
Grazie!
I’ll try and let you know…
Banna says
Hi,
We are using this,
But we cant get it work with cate ID.
We have a Cat id we want display its thumbnail please help me to do this.
how get thumbnail image using tax id
Please let me know.
Thank You
Banna Daxxip
Ruben Boehler says
Sorry but i can get this plugin to work…no output. Maybe i do somehing wrong?!
i use the plugin + this code and hooked it in:
print apply_filters( ‘taxonomy-images-list-the-terms’, ”, array( ‘image_size’ => ‘detail’, ‘taxonomy’ => ‘company’, ‘after’ => ”, ‘after_image’ => ”, ‘before’ => ”, ‘before_image’ => ”, ) );
iam getting absolutly no output … could you help me to figure it out?
_mfields says
@devinsays Awesome! Thanks for the tip!
DanielPeiser says
Sounds interesting! What if I have a few blog posts that don’t have a thumbnail image (or image in post), and there is always the same default image loaded as thumbnail in archive pages: Would the plugin load one associated to the category/tag?
wpbeginner says
@DanielPeiser You can certainly set it so it does that. Basically the steps would be like: First check if post thumbnail exist… If it doesn’t exist, then check for taxonomy image… if that doesn’t exist either, then return default thumbnail.