Bonsoir,

Un deuxième code, au cas ou …
Alors dans Apparence – Éditeur – Éditer index.php
à mettre avant les lignes

Voici le code :

<img id="frontphoto" src="/images/header/header_.jpg » alt= » » />

_ rand(1, 92) : c’est pour dire qu’il faut afficher une image aléatoirement entre la première et la 92ème ( remplacez 92 par le nombre d’header que vous avez ! )
_ ‘template_directory’ signifie que les images se trouve dans le répertoire du thème.
_ ?>/images/header/header_ c’est le chemin à suivre une fois arriver au répertoire du thème. Pour vous se serais ?>/images/header_
_ header_ c’est le préfixe que devras avoir TOUS vos header ( ne pas oublier le « _ » après header -> header_1 )
_ ?>.jpg signifie qu’il doit s’agir d’une image au format .jpg ( .jpeg )

Tous vos header devrons être nommé comme suis : header_1, header_2, header_3 …

Vous pouvez modifiez tous les paramètres à votre guise en écrivant par exemple banniere_ au lieu de header_

Bref, pour vous le code ressemblerais à ceci :

<img id="frontphoto" src="/images/header_.jpg » alt= » » />

Si vous voulez plus de détails, si vous avez des problèmes, faite-le moi savoir !

Cordialement,
Nicolas C.

Bonjour,

Dans le cas de ce site, l’image de fond est effectivement définie dans la css.
Elle est positionnée comme image de fond du bloc (vide)

par le code css

div.Header-jpeg  {
background-image:url(« images/Header.jpg »);
background-position:center center;
background-repeat:no-repeat;
height:200px;
left:0;
position:absolute;
top:0;
width:988px;
z-index:-1;
}

Il faut modifier ce fonctionnement en insérant l’image dans le code html (la génération dynamique de la css ne me semble pas une excellente idée) en ajoutant une balise img dans le bloc div ci-dessus (ou éventuellement en le remplaçant par la balise img) – encore une fois, la partie qui choisit aléatoirement une image n’a pas été testée sur un wordpress, elle peut être à adapter avec les autres exemples fournis entre autre pour choisir entre l’utilisation de noms totalement libres pour les images comme dans mon exemple, ou de noms numérotés comme dans les autres…) :

<div class="Header-jpeg">
  <img src='’
           alt=’Banniere du site’/>
</div>

L’image étant maintenant positionnée différemment dans la structure du document, il va falloir adapter la css pour tenter de conserver un affichage similaire ; pour cela, il faudra modifier le « div.Header-jpeg » en « div.Header-jpeg img », et adapter le code comme suit :

div.Header-jpeg img  {
height:200px;
left:0;
position:absolute;
top:0;
width:988px;
z-index:-1;
}

Toute la partie « background- » n’est plus utile, puisque notre image est un élément de la structure et plus le fond d’un bloc. On conserve le positionnement et les dimensions.

@++

Bonsoir,

Je pense que la règle voudrait qu’un nouveau fil soit ouvert pour une nouvelle question…

L’apparence de chaque rubrique de la page est en effet gérée par la feuille de style (css). Ce sujet est plus qu’amplement documenté (mais pas forcément facile pour autant) sur internet, et sans doute aussi dans ce forum.

Je vais quand même donner quelques éléments de réponse.
Basiquement, les différentes parties de la page sont des « boîtes », correspondant à des élements de la structure du document (un titre, un sous-titre, un paragraphe, une liste, un lien, une image, …), imbriquées les unes dans les autres, et disposées sur la page suivant un certain nombre de règles.

Il faut identifier la (ou les) boites dont vous voulez modifier l’affichage.

Dans votre cas, la zone qui englobe tous les commentaires est par exemple une boite (en réalité, il s’agit d’une liste d’éléments (un par commentaire) non ordonnée, « unordered list », d’où une balise

) qui porte l’attribut class « commentlist ». Elle contient de nombreuses autres « boîtes », pour chaque commentaire, incluant l’auteur, le contenu, la date, … et est elle-même déjà imbriquée dans plusieurs niveaux de boîtes (pas mis dans l’exemple) :

<ul class="commentlist">                                            <– la zone contenant la liste de tous les commentaires
  <li id="li-comment-1" class="comment even thread-even depth-1">   <– élément de liste pour un commentaire
    <div id="comment-1">                                            
      <div class="Post">                                            
        <div class="Post-body">                                     
          <div class="Post-inner article">                          
            <div class="PostContent">                               <– contenu du commentaire
              <div class="comment-author vcard">                    <– zone d'informations sur l'auteur du commentaire
                <cite class="fn">                                   
                  <a class="url" rel="external nofollow" href="http://wordpress.org/">Monsieur WordPress</a>
                </cite><span class="says">dit</span> :         
              </div>
              <div class="comment-meta commentmetadata">            <– zone contenant les méta-données du commentaire (date, heure, lien, …)
                <a href="http://aemcotedesisles.free.fr/?p=1&cpage=1#comment-1">11 janvier 2010 à 19 h 15 min</a>
              </div>
              <p>Bonjour, ceci est un commentaire.<br> Pour supprimer un commentaire, connectez-vous, et affichez les commentaires de cet article. Vous pourrez alors les modifier ou les supprimer.</p>
              <div class="reply">                                   <– lien pour répondre au commentaire
                <a href="/?p=1&replytocom=1#respond" class="comment-reply-link" rel="nofollow">Répondre</a>
              </div>
            </div>
            <div class="cleared"></div>                             <– zone utilisée pour forcer une "cassure" de la mise en page pour séparer verticalement les commentaires
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

Les feuilles de style permettent d’indiquer le formatage a appliquer en fonction de la structure du document.
On indique par exemple que tous les chapitres sous des titres de second niveau doivent être alignés à droite, …
On utilise pour cela des « sélecteurs », qui permettent de cibler les élements que l’on veut visuellement modifier, et on donne ensuite les caractéristiques que l’on veut appliquer :

.commentlist .Post {  /* le selecteur indique les objets de class « Post » situés (à n’importe quel niveau) sous des objets de class « commentlist » */
  background-color: #ccc;  /* on veut un fond gris */
  border: thin solid black;   /* et une bordure fine noire */
  font-size: 80%;               /* et une police à 80% de sa taille normale */
  margin-left: 5%;             /* et on laisse une marge à gauche et à droite de 5% de la taille disponible */
  margin-right: 5%;
}

L’exemple ci-dessus ajouté dans votre css fera plus ou moins ce que vous indiquez, mais l’important est surtout de comprendre le fonctionnement pour pouvoir ensuite faire vos propres modifications. Ceci dit, il faut prévoir du temps, ou alors le faire faire. Les css sont quelque chose de relativement complexe, surtout si on tient compte des bugs des différents navigateurs. L’exemple ici est très simple, mais si par exemple on ne met que « .Post » comme sélecteur, sans le faire précéder de « .commentlist », ou éventuellement « .comment », l’article subira la même mise en page que les commentaires, car il est lui aussi dans un bloc de classe « Post » . Il y a tout un ensemble de règles pour les sélecteurs (sur les classes, les identifiants des éléments, en fonction du type d’élément, avec des niveaux d’imbrications précis ou non, …), pour le formatage de chaque type d’élément, une hiérarchie des styles avec un héritage de certains attributs par les éléments « enfants », des priorités, des modèles de positionnement et de dimensionnement variés, …

Je ne peut que vous conseiller des outils comme les extensions « Web Developer » ou « FireBug » de Firefox, qui permettent de visualiser les différents blocs composant une page de manière intuitive, de voir le code css qui s’y applique, de faire des tests de modification « en direct », …

@++

Hello Polygones,

Ça fonctionne, mais ce n’était pas la demande initiale : ce qui est demandé est une image différente à chaque chargement pour la même page, pas une image différente par page, mais en affichant toujours la même image sur la même page.

Sinon, pour ton exemple, une petite optimisation :

            <div class="portrait">
              <img src=" » alt= » » />
              </div>
            

Le code sera nettement moins lourd comme cela 🙂
Le seul cas où cela ne convient pas est s’il n’y a pas d’image par défaut (si tu veux mettre quelque chose de complètement différent)

@++