¿Quiere mostrar imágenes de taxonomía o iconos de categoría en WordPress?
De forma predeterminada, WordPress no viene con una opción para 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 viene con una opción para agregar 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ía o las páginas de archivo de taxonomía.
Esto parece un poco 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 agregando 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 Imágenes enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Tras la activación, simplemente puede ir a la Publicaciones » Categorías página. Notará que el complemento mostrará una imagen de 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 hasta la parte inferior 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.
A continuación, 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 cualquier otra taxonomía.
Ahora, el problema es que después de agregar las imágenes, si visita una página de categoría, no verá la imagen de su categoría allí.
Para mostrarlo, deberá editar su tema de WordPress o su tema secundario. Si es la primera vez que edita archivos de WordPress, quizás desee ver nuestra guía sobre cómo copiar y pegar código en WordPress.
Primero, deberá conectarse a su sitio de WordPress utilizando un cliente FTP o su administrador de archivos de alojamiento de WordPress.
Una vez conectado, deberá encontrar la plantilla responsable de mostrar sus archivos de taxonomía. Estos podrían ser archivos archives.php, category.php, tag.php o taxonomy.php.
Para obtener más detalles, 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 desee mostrar 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 mediante FTP.
Ahora puede visitar la página de archivo de taxonomía para ver cómo se muestra la imagen de su 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 usando 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 diseñar 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 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, 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 almacenar 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. Es posible que también desee ver estos complementos y hacks de categorías útiles para WordPress o ver nuestros consejos sobre cómo 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.