Cómo agregar imágenes de taxonomía (iconos de categoría) en WordPress

¿Quiere mostrar imágenes de taxonomía o iconos de categoría en WordPress?

De forma predeterminada, WordPress no tiene la opción de cargar una imagen de taxonomía o un ícono 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 agregar fácilmente imágenes de taxonomía o íconos de categoría en WordPress. También le mostraremos cómo mostrar imágenes de taxonomía en sus páginas de archivo.

¿Por qué agregar imágenes de taxonomía en WordPress?

De forma predeterminada, su sitio web de WordPress no tendrá la opción de agregar imágenes para sus taxonomías, como categorías y etiquetas (o cualquier otra taxonomía personalizada).

Simplemente usa nombres de taxonomía en todas partes, incluidos los archivos de categoría o las páginas de archivo de taxonomía.

Esto parece bastante simple y aburrido.

Si obtiene mucho tráfico de búsqueda en sus páginas de taxonomía, es posible que desee que se vean más atractivas.

La forma más fácil de hacer que una página sea más interesante es agregar imágenes. Puede agregar imágenes de taxonomía o íconos de categoría para hacer que estas páginas sean más fáciles de usar y atractivas.

Un buen ejemplo de esto es un sitio como NerdWallet que usa íconos de categoría en su encabezado:

También puede usarlo para crear hermosas secciones de navegación en su página de inicio, como Bankrate:

Dicho esto, echemos un vistazo a cómo agregar fácilmente imágenes de taxonomía en WordPress.

Agregue fácilmente imágenes de taxonomía en WordPress

Lo primero que debe hacer es instalar y activar el Categorías Cuadros enchufar. Para obtener más información, consulte nuestra guía paso a paso para instalar un complemento de WordPress.

Después de la activación, simplemente puede ir a la Publicaciones » Categorías página. Notará que el complemento muestra un marcador de posición para sus categorías existentes.

Para elegir su propio icono de categoría, debe hacer clic en el enlace Editar debajo de una categoría.

En la página Editar categoría, desplácese hacia abajo y encontrará un formulario para cargar su propia imagen de taxonomía.

Simplemente haga clic en el botón ‘Cargar/Agregar nueva imagen’ para cargar la imagen que desea usar para esa categoría en particular.

No olvide hacer clic en el botón Agregar categoría o Actualizar para guardar los cambios.

Luego puede repetir el proceso para cargar imágenes para otras categorías de imágenes. También puede cargar imágenes para sus etiquetas y otras taxonomías.

Ahora el problema es que después de agregar las imágenes, si visitas una página de categoría, no verás la imagen de tu categoría allí.

Para mostrarlo, debe editar su tema de WordPress o su tema secundario. Si es la primera vez que edita archivos de WordPress, puede consultar nuestra guía sobre cómo copiar y pegar código en WordPress.

Primero, debe conectarse a su sitio de WordPress usando un cliente FTP o su administrador de archivos de alojamiento de WordPress.

Una vez conectado, debe encontrar la plantilla responsable de mostrar sus archivos de taxonomía. Estos pueden ser archivos archive.php, category.php, tag.php o taxonomy.php.

Para obtener más información, consulte nuestra guía sobre cómo encontrar qué archivos editar en un tema de WordPress.

Una vez que haya encontrado el archivo, deberá descargarlo a su computadora y abrirlo en un editor de texto como Notepad o TextEdit.

Ahora pegue el siguiente código donde desea que aparezca su imagen de taxonomía. Por lo general, querrá agregarlo antes del título de la taxonomía o the_archive_title() etiqueta.

<?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, debe guardar este archivo y volver a cargarlo en su sitio web a través de FTP.

Ahora puede visitar la página de archivo de taxonomía para ver su imagen de taxonomía. Así es como se veía en nuestra página de archivo de demostración.

Ahora todavía puede parecer un poco incómodo, pero no te preocupes. Puedes diseñar eso con un poco de CSS personalizado.

Aquí está el CSS personalizado que usamos para la imagen de taxonomía.

img.taxonomy-img {
    float: left;
    max-height: 100px;
    max-width: 100px;
    display: inline-block;
}

Dependiendo de su tema, es posible que también deba dar formato a los elementos circundantes, como el título y la descripción de la taxonomía.

Simplemente envolvimos el título y la descripción de nuestro archivo de taxonomía en un <div> elemento y agregó una clase CSS personalizada. Luego usamos el siguiente código CSS para personalizar el título y la descripción.

.taxonomy-title-description {
    display: inline-block;
    padding: 18px;
}

Esto es lo que parecía en nuestro sitio web de prueba después.

Excluir taxonomías de la visualización de imágenes de taxonomía

Ahora, es posible que algunos usuarios solo deseen utilizar imágenes de taxonomía para taxonomías específicas.

Por ejemplo, si ejecuta una tienda en línea con WooCommerce, es posible que desee excluir categorías de productos.

Simplemente regrese a la página de Categorías Imágenes en el área de administración de WordPress y verifique las taxonomías que desea excluir.

No olvide hacer clic en el botón Guardar cambios para guardar su configuración.

Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente imágenes de taxonomía en WordPress. También puede consultar estos prácticos hacks y complementos de categorías para WordPress o consultar nuestros consejos para obtener más tráfico de los motores de búsqueda.

Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook†