Copyright © Vertegrande. 2023. Agencia de Marketing & Diseño Web en Puerto Madryn / Contanos tu Proyecto. Esto puede ser el principio de una gran aventura.
VERTEGRANDE ® – Marketing & Diseño Web en Puerto Madryn » Front-end » Snippets » WordPress » Mostrar una imagen destacada solo si no hay imágenes en el contenido (WordPress)

Mostrar una imagen destacada solo si no hay imágenes en el contenido (WordPress)

En este artículo, te contamos cómo implementar una solución eficiente para mostrar la imagen destacada solo si no hay imágenes en el contenido.

Publicado el 11 febrero, 2025 - Categorias: Front-end, Snippets, WordPress

En este artículo, te contaremos cómo implementar una solución eficiente para mostrar la imagen destacada solo si no hay imágenes en el contenido. Además, compartiremos el código necesario para que puedas aplicarlo en tu proyecto.

La Idea
La idea principal es verificar si el contenido de la publicación ya contiene una imagen. Si no la tiene, se mostrará la imagen destacada; de lo contrario, únicamente se mostrará el contenido de la publicación.

Esto se logra utilizando una combinación de las funciones nativas de WordPress y PHP, específicamente con preg_match para buscar etiquetas <img> dentro del contenido.

El Código

A continuación, te dejo el fragmento de código que puedes usar en la plantilla de tu theme (por ejemplo, en el archivo single.php):

<div class="entry-content">
    <?php
    // Obtener el contenido de la publicación
    $post_content = get_the_content();

    // Verificar si el contenido contiene una etiqueta <img>
    $has_image = preg_match('/<img\s[^>]*>/i', $post_content);

    // Mostrar la imagen destacada solo si no hay imágenes en el contenido
    if (!$has_image && has_post_thumbnail()) {
        echo '<div class="featured-image mb-3">';
        the_post_thumbnail('large', ['class' => 'img-fluid']);
        echo '</div>';
    }

    // Mostrar el contenido de la publicación
    the_content(__('Seguir leyendo... <span class="meta-nav">&raquo;</span>', 'sandbox'));

    // Paginación en caso de contenido dividido
    wp_link_pages("<div class='page-link'>" . __('Pages: ', 'sandbox'), "</div>\n", 'number');
    ?>
</div>

Cómo Funciona

  1. get_the_content()
    Recupera el contenido de la publicación actual.
  2. preg_match
    Busca etiquetas <img> dentro del contenido utilizando una expresión regular:
preg_match('/<img\s[^>]*>/i', $post_content);

Si encuentra una imagen, devuelve true; si no, devuelve false.

has_post_thumbnail()
Comprueba si la publicación tiene asignada una imagen destacada.

Condicional
La lógica asegura que solo se muestre la imagen destacada si $has_image es false.

Esta solución no solo mejora la experiencia visual del usuario, sino que también te ayuda a optimizar la presentación de tus publicaciones. Implementarla es sencillo y compatible con cualquier theme de WordPress.

Si te sirvió este truco ¡compártelo y comenta cómo aplicaste esta funcionalidad en tu proyecto!


Blog

Instagram @holavertegrande