WordPress ne fait pas grand usage du HTML statique rendu célèbre par les terribles sites web du début des années 2000. Vous pouvez néanmoins transformer votre HTML statique en un thème WordPress fonctionnel.
Un domaine à prendre en compte concerne les images à la une. C’est quelque chose qu’on ne voit pas dans le HTML statique, cela va donc nécessiter du travail avec le code.
Voyons comment vous pouvez ajouter des images à la une à un thème WordPress HTML statique et tous vos blogs existants.
Première étape : Ajouter le support des images à la une
Vous aurez besoin de supporter les images avant de pouvoir accéder à la fenêtre « images à la une » de l’écran d’édition. Commencez par ouvrir le fichier functions.php. Vérifiez que le code suivant apparaisse avant la balise de fermeture :
function wptutsplus_theme_support() {
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'wptutsplus_theme_support' );
Sauvegardez le fichier et essayez d’ouvrir l’écran d’édition pour poster. Vous devriez voir la fenêtre méta pour images à la une. Si vous disposez d’un site web existant, vous devrez parcourir chaque post et y ajouter les images à la une. A ce stade, pas besoin de spécifier leur taille.
Deuxième étape : Ajouter les images à la une au modèle d’archives
Pour ce faire, vous devez passer par une boucle. Ouvrez le fichier archive.php et recherchez la ligne suivante :
<img class="size-thumbnail" alt="" src="images/featured-image.jpg" />
Remplacez-la par ce morceau de code :
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'medium', array( 'class' => 'left',
'alt' => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) )
) ); ?>
</a>
<?php } ?>
Ce code effectue un certain nombre de choses, parmi lesquelles :
- Vérifie la présence d’une image à la une dans le post. S’il ne peut pas le faire, l’image ne sera pas affichée.
- Encapsule l’image dans un lien permanent que les visiteurs peuvent cliquer.
- Affiche l’image à la une dans la table des matières du blog.
Troisième étape : Ajouter du style
Sauvegardez le fichier archive.php et visitez n’importe quelle page archivée de votre site afin de vérifier que tout se passe comme prévu. Ouvrez le fichier style.css et ajoutez-y le bout de code suivant :
.archive #content article,
.blog #content article {
margin-top: 10px;
overflow: auto;
}
Quatrième étape : Ajouter les images à la une au fichier d’indexation
A ce stade, vous avec un modèle d’archives supportant les images à la une. Mais nous n’en avons pas encore fini. Vous devez maintenant prendre tout ce code et l’ajouter au fichier index.php.
Ouvrez le fichier archive.php et retrouvez le code précédemment ajouté. Copiez-le et remplacez le même code que trouvé à la troisième étape. Allez vers la page principale du blog et vous verrez que l’image à la une est affichée dans tous les posts.
Conclusion
Les images à la une sont un aspect vital de votre blog, et vous ne devriez pas les ignorer simplement parce que vous ne voulez pas faire l’effort de les ajouter. Ils sont d’une aide visuelle précieuse pour rendre votre site plus attractif.
Comme toujours, assurez-vous de sauvegarder une copie de chaque fichier avant de les altérer. Remplacer le mauvais code pourrait avoir des conséquences désastreuses.
