Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
25 Millones+
Sitios web que usan nuestros plugins
16+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

Cómo establecer una imagen destacada de respaldo basada en la categoría de la publicación en WordPress

Hemos descubierto que configurar imágenes destacadas de respaldo para las categorías de WordPress ahorra mucho tiempo, especialmente para blogs con un gran volumen de contenido.

Si tienes artículos que no tienen una imagen destacada, o si quieres que todas las publicaciones de una categoría tengan miniaturas similares, puedes configurar una imagen de respaldo para cada categoría.

De esta manera, puedes asegurarte de que ninguna publicación de blog se quede sin una imagen destacada y no tienes que asignarlas manualmente a cada publicación individual.

En este artículo, te mostraremos cómo configurar las imágenes destacadas de respaldo predeterminadas para categorías específicas en WordPress.

Cómo establecer una imagen destacada de respaldo basada en la categoría de publicación en WordPress

¿Por qué agregar una imagen destacada de respaldo para la categoría de publicación?

Digamos que tienes un blog de WordPress donde asignas una sola categoría a cada publicación. Puedes asignar todas las publicaciones de esa categoría para que muestren la misma imagen de respaldo si no tienen una imagen destacada por alguna razón.

Otro beneficio de agregar una imagen de respaldo para una categoría de publicación es si tus páginas de archivo de categoría reciben mucho tráfico de búsqueda, entonces las hace más atractivas y llamativas.

Dicho esto, veamos cómo puedes agregar una imagen de respaldo basada en la categoría de publicación utilizando un plugin de WordPress y código personalizado.

Por defecto, WordPress no ofrece una opción para agregar imágenes a las páginas de categorías de tus publicaciones. Sin embargo, puedes configurar fácilmente una imagen de respaldo para las categorías de publicaciones usando un plugin de WordPress.

Primero, necesitarás instalar y activar el plugin Category and Taxonomy Image. Para más detalles, por favor consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Tras la activación, puedes ir a Ajustes » Imagen de Taxonomía desde el panel de administración de WordPress. Luego, puedes marcar la casilla de 'categoría' para incluir imágenes de taxonomía en tus categorías de publicaciones como respaldo.

Habilitar imágenes de taxonomía para categoría

No olvides hacer clic en el botón 'Guardar Cambios' cuando hayas terminado.

Después de eso, puedes ir a Publicaciones » Categorías desde tu panel de WordPress. Verás un campo de 'Imagen' aparecer al agregar una nueva categoría o al editar una existente.

Nuevo campo de imagen para categorías

Simplemente ingresa la URL de una imagen que deseas agregar a tu categoría de WordPress. Para más detalles sobre esto, por favor consulta nuestra guía sobre cómo obtener la URL de las imágenes que subes en WordPress.

Ahora, cuando publiques una entrada de blog sin una imagen destacada asignada, WordPress usará la imagen que acabas de configurar para tu categoría.

Aquí tienes una vista previa de la imagen que usamos en nuestro sitio de demostración.

Vista previa de la imagen de respaldo con el plugin

¡Eso es todo! Ahora has agregado con éxito una imagen de respaldo basada en la categoría de la entrada.

También puedes configurar una imagen de respaldo para las categorías de entradas sin usar un plugin de WordPress. Sin embargo, este método no se recomienda para principiantes, ya que implica fragmentos de código.

Lo primero que necesitas hacer es crear imágenes para tus categorías de WordPress. Usa el slug de la categoría como nombre de archivo de tu imagen y guárdalas todas en el mismo formato, como JPG o PNG.

A continuación, puedes subir tus imágenes de categoría a tu sitio de WordPress desde Medios » Agregar nuevo.

Subir imágenes a la biblioteca de medios

WordPress almacenará tus imágenes de categoría durante la carga y creará tamaños de imagen definidos por tu tema.

Después de cargar las imágenes de categoría, necesitas moverlas a un directorio diferente. Simplemente conéctate a tu sitio web usando un cliente FTP y ve a la carpeta /wp-content/uploads/.

Carpeta de subidas en WordPress

Las imágenes de categoría que subiste se almacenarán en la carpeta del mes, como /uploads/2022/08/.

Continúa y abre la carpeta de este mes.

Subidas de medios organizadas en carpetas de año y mes

Puedes ver nuestra guía sobre dónde almacena WordPress las imágenes en tu sitio para más información.

A continuación, crea una carpeta en el escritorio de tu computadora y nómbrala category-images. Ahora, descarga todas tus imágenes de categoría y todos los tamaños que WordPress creó para ellas a esta nueva carpeta en tu escritorio.

Una vez que la descarga haya finalizado, necesitas subir la carpeta category-images a tu directorio /wp-content/uploads. Hacer esto te permitirá tener todos los tamaños de tus imágenes de categoría en una carpeta separada que es fácil de llamar en tu tema.

Para más detalles, por favor consulta nuestra guía sobre cómo usar FTP para subir archivos a WordPress.

Mostrar imagen de categoría como imagen destacada de respaldo predeterminada

A continuación, te mostraremos cómo mostrar una de esas imágenes como la imagen destacada de respaldo cuando una publicación en una categoría no tenga una configurada.

Este método sí implica copiar y pegar código, y normalmente no recomendamos que los usuarios editen los archivos de su tema. Pequeños errores pueden causar grandes problemas en tu sitio.

Una forma más fácil de agregar código a tu sitio es usando WPCode. Es el mejor plugin de fragmentos de código de WordPress, que te permite administrar código personalizado en tu sitio de forma segura y sencilla.

Primero, necesitarás instalar y activar el plugin gratuito WPCode. Para más detalles, por favor consulta nuestra guía sobre cómo instalar un plugin de WordPress.

A continuación, puedes ir a Fragmentos de código » + Agregar fragmento en tu panel de administración de WordPress para agregar un nuevo fragmento. Luego, simplemente haz clic en el botón ‘Agregar nuevo’.

Haz clic en 'Agregar nuevo fragmento' en WPCode

Después de eso, puedes agregar código personalizado o usar un fragmento de la biblioteca de WPCode.

Para esto, usarás tu propio código personalizado, así que pasa el cursor sobre la opción ‘Agregar tu código personalizado (Nuevo fragmento)’ y haz clic en el botón ‘+ Agregar fragmento personalizado’.

Agregar un fragmento personalizado a WordPress

A continuación, debe seleccionar 'Fragmento PHP' como tipo de código de la lista de opciones que aparecen en la pantalla.

Selecciona la opción de fragmento de PHP

Ahora agrega un nombre para tu fragmento, que puede ser cualquier cosa para ayudarte a recordar para qué es el código.

Agregar una imagen de respaldo

Después de eso, simplemente copia el siguiente fragmento de código y pégalo en el campo ‘Vista previa del código’.

/**
 * Plugin Name: Category Thumbnail Fallback
 * Description: Use the category image as fallback when the post does not have a featured image
 */

class WPBCategoryThumbnailFallback
{
    protected static $taxonomies = ['category'];

    protected $nonceId = 'wpb_category_thumb_fallback_none';
    protected $fieldId = 'wpb_category_fallback_post_image';

    public $taxonomy;

    protected function __construct($taxonomy)
    {
        $this->taxonomy = $taxonomy;
    }

    public static function init()
    {
        foreach (static::$taxonomies as $taxonomy) {
            $_self = new self($taxonomy);

            add_action('admin_enqueue_scripts', [$_self, 'scripts']);

            add_action("{$taxonomy}_add_form_fields", [$_self, 'add']);
            add_action("{$taxonomy}_edit_form_fields", [$_self, 'edit'], 99, 2);

            add_action("created_{$taxonomy}", [$_self, 'saveTerm'], 10, 2);
            add_action("edited_{$taxonomy}", [$_self, 'editTerm'], 10, 2);

            add_filter("get_post_metadata", [$_self, 'fallback'], 99, 5);
        }
    }

    public function scripts($hook_suffix)
    {
        if (in_array($hook_suffix, ['term.php', 'edit-tags.php'])) {
            $screen = get_current_screen();

            if (is_object($screen) && "edit-{$this->taxonomy}" == $screen->id) {
                wp_enqueue_media();

                wp_add_inline_script('media-editor', $this->inlineScript());
            }
        }
    }

    public function add()
    {
        ?>
        <div class="form-field upload_image-wrap">
            <label for="upload_image">Image</label>
            <input id="upload_image" type="hidden" size="36" name="<?php
            echo esc_attr($this->fieldId)
            ?>" value=""/>
            <div id="wpb-category-image-preview" style="max-width: 150px; max-height: 150px;"></div>
            <input id="upload_image_button" class="button" type="button" value="Upload Image"/>
            <p>Enter a URL or upload an image</p>
        </div>
        <?php
        wp_nonce_field($this->nonceId, $this->nonceId);
    }

    public function edit($term, $taxonomy)
    {
        $value = get_term_meta($term->term_id, $this->fieldId, true);
        $image = wp_get_attachment_image((int)$value);
        ?>
        <tr class="form-field upload_image-wrap">
            <th scope="row"><label for="name">Image</label></th>
            <td>
                <label for="upload_image">
                    <input id="upload_image" type="hidden" size="36" name="<?php
                    echo esc_attr($this->fieldId)
                    ?>" value="<?php
                    echo esc_attr($value)
                    ?>"/>
                    <div id="wpb-category-image-preview" style="max-width: 150px; max-height: 150px;"><?php
                        echo $image;
                        ?></div>
                    <input id="upload_image_button" class="button" type="button" value="Upload Image"/>
                </label>
                <p class="description">Enter a URL or upload an image</p>
            </td>
        </tr>
        <?php
        wp_nonce_field($this->nonceId, $this->nonceId);
    }

    public function saveTerm($term_id, $tt_id)
    {
        $data = array_filter(wp_unslash($_POST), function ($value, $key) {
            return in_array($key, [$this->nonceId, $this->fieldId]);
        }, ARRAY_FILTER_USE_BOTH);

        if (
            empty($data) ||
            empty($data[$this->nonceId]) ||
            ! wp_verify_nonce($data[$this->nonceId], $this->nonceId) ||
            ! current_user_can('manage_categories')
        ) {
            return null;
        }

        if (empty($data[$this->fieldId]) || empty(absint($data[$this->fieldId]))) {
            return delete_term_meta($term_id, $this->fieldId);
        }

        $value = absint($data[$this->fieldId]);

        return update_term_meta($term_id, $this->fieldId, $value);
    }

    public function editTerm($term_id, $tt_id)
    {
        $this->saveTerm($term_id, $tt_id);
    }

    public function fallback($null, $object_id, $meta_key, $single, $meta_type)
    {
        if (
            $null === null &&
            $meta_key === '_thumbnail_id'
        ) {
            $meta_cache = wp_cache_get($object_id, $meta_type . '_meta');

            if ( ! $meta_cache) {
                $meta_cache = update_meta_cache($meta_type, [$object_id]);
                $meta_cache = $meta_cache[$object_id] ?? null;
            }

            $val = null;

            if (isset($meta_cache[$meta_key])) {
                if ($single) {
                    $val = maybe_unserialize($meta_cache[$meta_key][0]);
                } else {
                    $val = array_map('maybe_unserialize', $meta_cache[$meta_key]);
                }
            }

            if (empty($val)) {
                $fallbackImageId = $this->getPostFallbackImageId($object_id, $single);

                if ( ! empty($fallbackImageId)) {
                    return $fallbackImageId;
                }
            }

            return $val;
        }

        return $null;
    }

    public function getPostFallbackImageId($postId, $single)
    {
        $terms = get_the_terms($postId, $this->taxonomy);

        if (empty($terms) || is_wp_error($terms)) {
            return null;
        }

        foreach ($terms as $term) {
            $fallbackIdFromCategoryId = get_term_meta($term->term_id, $this->fieldId, $single);

            if ( ! empty($fallbackIdFromCategoryId)) {
                return $fallbackIdFromCategoryId;
            }
        }

        return null;
    }

    public function inlineScript()
    {
        return "jQuery(document).ready(function ($) {
            var custom_uploader;
            $('#upload_image_button').click(function (e) {
                e.preventDefault();
                //If the uploader object has already been created, reopen the dialog
                if (custom_uploader) {
                    custom_uploader.open();
                    return;
                }
                //Extend the wp.media object
                custom_uploader = wp.media.frames.file_frame = wp.media({
                    title: 'Choose Image',
                    button: {
                        text: 'Choose Image'
                    },
                    multiple: true
                });
                //When a file is selected, grab the URL and set it as the text field's value
                custom_uploader.on('select', function () {
                    console.log(custom_uploader.state().get('selection').toJSON());
                    attachment = custom_uploader.state().get('selection').first().toJSON();
                    
                    var thumbUrl = attachment && attachment.sizes && attachment.sizes.thumbnail && attachment.sizes.thumbnail.url
                    ? attachment.sizes.thumbnail.url
                    : attachment.url;
                    $('#wpb-category-image-preview').html('<img src=\"'+ thumbUrl +'\">');
                    $('#upload_image').val(attachment.id);
                });
                //Open the uploader dialog
                custom_uploader.open();
            });
        });";
    }
}

A continuación, puedes desplazarte hacia abajo hasta la sección ‘Inserción’ y elegir ‘Inserción automática’ para que el plugin maneje la ubicación por ti.

Luego, elige la opción ‘Insertar antes del contenido’ en la sección ‘Página, Publicación, Tipo de publicación personalizada’ en el menú desplegable ‘Ubicación’.

Seleccionar opción de inserción de imagen de respaldo

Luego puedes regresar a la parte superior de la página y cambiar el interruptor de ‘Inactivo’ a ‘Activo’.

Una vez que hagas clic en el botón ‘Guardar fragmento’ en la parte superior, tu imagen de respaldo estará en su lugar.

Guardar y activar fragmento de código WPCode

También te puede interesar nuestra guía sobre cómo agregar fragmentos de código personalizados en WordPress.

Nota: Este fragmento de código solo funcionará con la taxonomía 'category'. Sin embargo, puedes agregar más taxonomías agregando su nombre a la lista en la siguiente clase en el código y cambiando el término entre corchetes a 'tag' o 'post', por ejemplo.

protected static $taxonomies = ['category'];

Cuando hayas terminado, simplemente visita tu sitio web para ver la imagen de respaldo.

Vista previa de imagen de respaldo

Esperamos que este artículo te haya ayudado a agregar una imagen destacada de respaldo basada en la categoría de la publicación. También puedes ver nuestra guía sobre cómo agregar una barra de progreso en las publicaciones de WordPress y nuestras selecciones expertas de las mejores alternativas a Canva para gráficos de sitios web.

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.

Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Consulta cómo se financia WPBeginner, por qué es importante y cómo puedes apoyarnos. Aquí está nuestro proceso editorial.

El Kit de herramientas definitivo para WordPress

Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Interacciones del lector

12 CommentsLeave a Reply

  1. Creo que hay algo mal con el fragmento de WPCode en el artículo, está mostrando algunos números de línea superpuestos en la columna de la izquierda.

  2. Lo más interesante sería tener un hook para reemplazar la miniatura a usar en las funciones, para no tener que molestarse en reemplazarla donde sea que se use la miniatura.

  3. Thank you. This works like a charm :-)

    Mientras que la imagen destacada de respaldo se muestra en la publicación; ¿alguna idea de cómo podría mostrarlas en páginas de categorías/archivos, o donde se muestran las publicaciones en la página de inicio?

  4. ¡Hola!
    ¿Podrías mostrar cómo se muestran los artículos en la sección “MÁS SOBRE AHORA WPBEGINNER” de arriba? Es una plantilla de WordPress.
    Gracias

  5. I turned off the organize posts by date month in settings/media, and changed url to reflect uploads directory specifically – that way I can avoid the extra step. I’m hoping this won’t cause issues with my host but it certainly makes life a little easier for me. Thank you so much for sharing this info, I have been searching for a looooong time and it’s finally how I want it :)

  6. Hola,,, quiero agregar una imagen dinámica a mi página de inicio de WordPress. Donde ya hay 5 imágenes configuradas en diferentes ubicaciones.
    Solo quiero reemplazarlas y agregar nuevas fotos por publicación y categorías…
    Por favor, ayúdame.
    Lo intenté pero no tuve éxito.
    Usé la función de publicación por miniatura.

  7. Esto es genial, pero fallé miserablemente al intentar implementar la imagen de categoría como imagen destacada de respaldo predeterminada en mi tema de clasificados. Utiliza categorías diferentes de las categorías de publicaciones 'stock' y el autor no ayuda.

    ¿Ofrecen algún servicio técnico, pagado o de otro tipo, donde puedan ayudarme a implementar la imagen de categoría como imagen destacada de respaldo predeterminada en mi tema?

  8. Esto es realmente increíble, un consejo muy útil en mi caso. El único problema es que el primer código anterior está incompleto. Por suerte, no necesité la parte "if", así que simplemente la quité y todo estuvo bien.

    ¡Gracias por algunos consejos bastante avanzados en tu sitio "para principiantes". ¡Sigue así!

  9. Otra idea podría ser establecer la miniatura de la publicación cuando se guarda la publicación. La ventaja de la solución anterior es que la miniatura de la categoría se cambia fácilmente.

Deja una respuesta

Gracias por elegir dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de comentarios, y tu dirección de correo electrónico NO será publicada. Por favor, NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.