Afficher l’image mise en avant dans mon article

Il arrive que certains thèmes WordPress n’affichent pas l’image à la une ou featured post ou encore image mis en avant dans le contenu de l’article. Il existe différentes solutions connues pour résoudre ce problème : changer de thème WordPress, utiliser une extension ou modifier les fichiers du thème.

Je vous propose une alternative simple à mettre en oeuvre. Vous aurez besoin du plugin WPCode que j’ai déjà mentionné dans mon article pour créer une liste aléatoire de vos publications WordPress. Jetez un coup d’oeil à l’article pour voir comment ajouter un exrait de code dans WPCode.

Le code à ajouter dans le plugin WPCode

Rendez-vous sur le plugin WPCode et ajouter l’extrait de code php suivant :

function add_featured_image_to_content($content) {
    if (is_singular('post') && has_post_thumbnail()) {
        $featured_image = '<div class="featured-image">' . get_the_post_thumbnail(null, 'full') . '</div>';
        $content = $featured_image . $content;
    }
    return $content;
}
add_filter('the_content', 'add_featured_image_to_content');

Donnez un titre à votre snippet par exemple « Afficher l’image à la une au début de l’article » et choisissez « Exécuter partout » ou « Run Everywhere ».

Sauvegardez et activez le plugin.

Ce code utilise le filtre the_content pour ajouter l’image à la une au début du contenu de chaque article. L’image à la une sera affichée dans une div avec la classe featured-image, ce qui permet de la styliser avec du CSS si nécessaire.

A propos des images, pour optimiser les performances de votre site les images doivent être compressées et proposées dans un format moderne comme Webp. Le plugin EWWW Image Optimizer le fait pour vous.

Optionnel : Ajouter du CSS

Vous pouvez ajouter du CSS personnalisé pour styliser l’image à la une. Voici un exemple de CSS que vous pouvez ajouter dans l’option « CSS personnalisé » de votre thème ou dans le fichier style.css de votre thème enfant :

.featured-image {
    margin-bottom: 20px;
    text-align: center;
}

.featured-image img {
    max-width: 100%;
    height: auto;
}

Vous avez maintenant le bon code pour faire apparaître l’image à la une dans vos articles WordPress sans avoir besoin de changer de thème ou d’installer un nouveau plugin exposant votre site à des failles de sécurité.

Code combiné php et css pour une intégration plus rapide

Voici un code combiné pour afficher l’image à la une dans vos articles :

// Ajoute l'image mise en avant au contenu
function add_featured_image_to_content($content) {
    if (is_singular('post') && has_post_thumbnail()) {
        $featured_image = '<div class="featured-image">' . get_the_post_thumbnail(null, 'full') . '</div>';
        $content = $featured_image . $content;
    }
    return $content;
}
add_filter('the_content', 'add_featured_image_to_content');

// Injecte le CSS directement dans le header du site
function custom_featured_image_css() {
    echo "
    <style>
    .featured-image {
        margin-bottom: 20px;
        text-align: center;
    }
    
    .featured-image img {
        max-width: 100%;
        height: auto;
    }
    </style>
    ";
}
add_action('wp_head', 'custom_featured_image_css');