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

Must Comunicación

Diseño Web y Marketing Online

  • Temas WordPress
  • Plugins WordPress
  • WooCommerce
  • Marketing
  • Tutoriales
    • WooCommerce
    • Easy Digital Downloads
  • Contacto
Usted está aquí: Inicio / WordPress / Desarrollo Web / Añadir una ‘Imagen destacada’ automática a las entradas del blog según la categoría

Añadir una ‘Imagen destacada’ automática a las entradas del blog según la categoría

Desarrollo Web WordPress Tagged as: PHP Deja un comentario

Compartir
Compartir
Twittear
Pocket
WhatsApp
Email

El uso de imágenes destacadas en archivos de entrada es una característica habitual de los temas, pero a veces es posible que desees utilizar imágenes destacadas de forma un poco diferente. Ocasionalmente he trabajado en sitios donde las imágenes que se mostrarán están relacionadas con la categoría en la que se encuentra una entrada y no con la entrada en sí. En lugar de añadir la misma imagen destacada a cada entrada en cada categoría, sería mucho más sencillo si pudiera asignar la categoría a cada una de mis imágenes, y luego mostrar la imagen destacada de la categoría en la entrada.

Estos serían algunos ejemplos de situaciones en las que posiblemente desees hacer esto:

  • Cuando cada entrada está asociada a una marca y deseas mostrar el logotipo correspondiente
  • Cuando cada entrada está asociada a uno de un número de ubicaciones y deseas mostrar una imagen (o mapa) de ese lugar
  • Cuando cada entrada está relacionada con un tema determinado (por ejemplo, en un sitio de aprendizaje) y deseas mostrar un icono que represente esa temática
  • Cuando las entradas forman parte de una serie (como sucede a veces en este sitio) y deseas utilizar una imagen que identifique cada serie

En este tutorial voy a utilizar algunas de las técnicas que ya he demostrado en dos tutoriales anteriores:

  • Aplicar categorías a archivos adjuntos: tendremos que hacer esto para que cada categoría tenga sus propios archivos adjuntos.
  • Crear una ‘imagen destacada’ para una categoría: en este tutorial mostré cómo crear ‘imágenes destacadas’ para categorías y cómo mostrarlas posteriormente en el archivo de categorías. Este tutorial es ligeramente diferente, ya que mostraré las imágenes de categoría en la página principal del blog.

Este tutorial trabajará a través de estos pasos:

  1. Registrar la taxonomía de categoría para los adjuntos
  2. Configurar categorías y añadirles imágenes
  3. En el bucle, identificar en qué categoría se encuentra una entrada y, a continuación, ejecutar una consulta para generar los datos adjuntos de esa categoría

Nota: Para cada entrada solo se identificará una categoría, y para cada categoría solo será mostrada una imagen (la más reciente).

También veré cómo puedes adaptar esta técnica a otras páginas de archivo, como a los archivos de tipo de entradas personalizadas.

Lo que necesitarás

Para seguir este tutorial necesitarás lo siguiente:

  • Una instalación de desarrollo de WordPress
  • Un tema que puedas editar (crearé un tema hijo para Twenty Fourteen)
  • Acceso FTP (o MAMP o similar si está trabajando localmente)
  • Un editor de código

Configuración de los archivos de tu tema

Para seguir este tutorial, deberás crear o editar un tema. Voy a crear un tema hijo del tema Twenty Fourteen.

Aquí está mi hoja de estilo:

Hoja de estilo para crear un tema hijo de un tema de WordPress
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
Theme Name: Automatic Featured Image Based On Category
Theme URI: https://code.tutsplus.com/tutorials/add-an-automatic-featured-image-to-blog-posts-based-on-category--cms-22664
Version: 1.0.0
Description: heme to accompany tutorial on adding category featured images to an archive page for tutsplus, at http://bit.ly/14cm0ya
Author: Rachel McCollin
Author URI: http://rachelmccollin.co.uk
License: GPL-3.0+
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Domain Path: /lang
Text Domain: tutsplus
Template: twentyfourteen
*/
@import url('../twentyfourteen/style.css');

Esto configura el tema como un tema hijo de Twenty Fourteen. Si necesitas saber más acerca de la creación de temas hijos, echa un vistazo a la correspondiente página del Codex.

A medida que trabajes a través de este tutorial también crearás un archivo functions.php para tu tema (o editarás el existente si ya tienes uno en él), y también crearás un archivo index.php.

Registro de categorías para archivos adjuntos

Por defecto WordPress no te permite asignar categorías a archivos adjuntos, pero esto puede cambiarse fácilmente.

Si tu tema aún no tiene un archivo de funciones, crea un archivo llamado functions.php y añade lo siguiente en él:

Función para añadir una imagen destacada a una categoría
PHP
1
2
3
4
5
6
7
8
9
10
11
12
<?php
/**
* Add featured image to category.
*/
function tutsplus_add_attachments_to_categories() {
    register_taxonomy_for_object_type( 'category', 'attachment' );
}
add_action( 'init' , 'tutsplus_add_attachments_to_categories' );

Guarda tu archivo y dirígete a la pantalla Medios de tu sitio. Verás se ha añadido un nuevo elemento categorías al submenú de medios:

Media Library with categories added to submenu

Nota: Para obtener más información sobre esto, consulta este tutorial.

Añadir imágenes de categoría

Ahora necesito subir una serie de imágenes y asignar a cada una de ellas una categoría. Las imágenes que subas dependerán de las necesidades de tu sitio: para mis categorías yo he usado distintos colores, así que he encontrado algunas imágenes con cada uno de estos. He asignado las categorías relevantes, así que así es como se ve mi Biblioteca de medios:

Media Library showing images in different categories

Ahora añadiré algunas entradas y les asignaré categorías:

List of posts with different categories

Lo que te queda por leer:

Crear el archivo index.php

  • Configurar el archivo
  • Identificar la categoría de la entrada actual
  • Crear argumentos para la consulta

Aplicar estilo a las imágenes

Adaptar esta técnica para otros tipos de contenido

seguir leyendo en Tuts+

Entradas relacionadas

Compartir
Compartir
Twittear
Pocket
WhatsApp
Email

categorías: Desarrollo Web, WordPress etiquetas: PHP

anterior
siguiente

Acerca de Eva Collados Pascual

Apasionada de la sociedad de la información, el marketing online, la tecnología, el diseño y el arte.
Sigo a diario todas las noticias relacionadas con WordPress, si no encuentras en el blog la solución que buscabas, no dudes en consultarme.

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acepto la Política de privacidad

Barra lateral principal

Categorías

  • Apps – Productividad
  • Artículos Tuts+
  • Diseño Web
  • eCommerce
  • Email Marketing
  • Emprendimiento
  • Marketing
  • SEO
  • Temas Shopify
  • Temas WordPress
  • Tutoriales
    • Tutorial de Easy Digital Downloads
    • Tutorial de WooCommerce
    • Tutorial W3 Total Cache
  • WooCommerce
  • WordPress
    • Desarrollo Web
    • Optimización
    • Plugins
    • Seguridad
    • Temas WordPress

Etiquetas

caché Conversión CRO Inspiración Web Landing Pages newsletters Performance Optimization PHP Plugins WooCommerce Plugins WordPress Seguridad SEO Startups Temas WooCommerce Temas WordPress Tutoriales Tuts+ Vídeo WooCommerce WordPress WPO

Copyright Must Comunicación© 2025 Genesis Framework

Este sitio web usa cookies propias y de terceros para recordar tus datos de inicio de sesión y recopilar estadísticas para mejorar la experiencia del usuario. Más información sobre las cookies Leer más. Aceptar x
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Siempre activado
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
GUARDAR Y ACEPTAR