J'explique ici comment utiliser une image d'entête différente pour chaque page sur WordPresss.
En insérant l'image
Cette méthode fait insérer par WordPress l'image directement dans le code. Depuis la version 2.9, il est vraiment facile d'avoir une image d'entête différente pour chaque page ou articles. Ouvrez votre fichier functions.php ou créez le s'il n'existe pas (dans votre dossier de thème) et collez ce code :
if ( function_exists( 'add_image_size' ) ) add_theme_support( 'post-thumbnails' );
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'header-image', 960, 300 );
}
Remplacez 960 et 300 par les dimensions de votre image d'entête. Maintenant, dans header.php, où vous voulez que vos images d'entête apparaissent, collez ce code :
<?php if ( has_post_thumbnail()) the_post_thumbnail('header-image'); ?>
Editez votre article et sélectionnez une image d'entête. Bien sûr, l'image doit être de la même taille que la taille que vous avez définie ou plus grande (elle sera redimensionnée automatiquement).
Appeler l'image à partir du CSS
Une autre méthode pour des images d'entête différents consiste à utiliser les tags conditionnels. C'est une méthode bien seulement si vous avez peu d'entêtes à changer. Imaginons que votre fichier header.php ressemble à ceci :
<html>
<head>...</head>
<body>
<div id="header">...</div>
Nous allons ajouter une class à la div "header" qui changera dynamiquement selon les pages.
class="<?php if(is_page('page-title')) { echo 'page-title'; } elseif(is_page('page-title2')) { echo 'page-title2'; } else { } ?>"
Votre div "header" ressemble maintenant à ceci :
<div id="header" class="
<?php if(is_page('page-title')) {
echo 'page-title';
} elseif(is_page('page-title2')) {
echo 'page-title2';
} else {
echo 'default-header';
} ?>
"></div>
Remplacez page-title et page-title2 par les titres de vos pages. Nous allons maintenant éditer la feuille de style :
#header {
width: 960px;
height: 300px;
}
#header .default-header {
background-image: url(images/header.jpg); /* image d'entête par défaut */
background-repeat: no-repeat;
}
#header .page-title {
background-image: url(images/header-page-title.jpg); /* image d'entête de page-title */
}
#header .page-title2 {
background-image: url(images/header-page-title2.jpg);
}
Et voilà !
le 3 mai 2012
à %H:%M
Bonjour,
merci pour cet article.
La méthode d'affichage avec le fichier fonction.php est très intéressante, mais où mettre les images ?
Faut-il créer un champ personnalisé dans chaque page ?
merci encore