WordPress Francophone

Pour rédiger ce tutoriel, je pars  du principe qu'évidemment vous n'avez aucune connaissance en html et css et qu'il faudra donc faire avec les moyens du bord, c'est à dire avec les outils que tout le monde possède par défaut (enfin presque).

Je dis "enfin presque" car en effet il est pratiquement certain que le plus grand nombre d'entre vous soyez des utilisateurs du navigateur Internet Explorer.

Autant vous le dire de suite pour réaliser cette petite opération, il vous faudra utiliser FireFox. Pour rassurer les réticents, sachez que Firefox est en Français, il est gratuit et rien ne vous empêche d'avoir 2 navigateurs sur votre ordinateur (et même +) et qu'ils peuvent être ouverts en même temps sans aucun problème.
Pour ceux qui veulent le télécharger c'est ici : http://www.mozilla-europe.org/fr/ ou là http://www.geckozone.org/telechargement/#dl-firefox

Ne prenez pas peur en voyant la longueur de ce tutoriel, c'est seulement parce que les opérations sont très détaillées (texte + image). Quand on y connait rien ça peut aider mais après vous verrez, vous ferez ça les yeux fermés.

Pour des raisons pratiques et d'esthétisme, j'ai du réduire certaines images (en largeur) pour quelles ne soient pas déformées dans l'espace alloué par le forum (donc ne vous fiez pas aux dimensions données dans le tuto et l'image affichée correspondante).

Pour info, ce tuto a été fait sous Windows XP2 avec la version 2.5.1 de WordPress et bien sûr vous devez avoir Wamp (ou EasyPhp) installé sur votre ordinateur.

1ERE PARTIE
CHANGEMENT IMAGE DU HEADER (EN LOCAL)
Une dernière précision, cet exemple concerne une modification réalisée pour un site présent sur votre disque dur (donc en local). On verra plus loin pour les manipulations sur un site en ligne. Mais il est toujours plus prudent de faire des essais en local sur son disque dur plutôt que directement en ligne (sauf quand on sait ce qu'on fait bien sûr et encore ....)



Firefox étant donc installé, nous allons voir comment modifier l'image de fond du thème d'origine soit WP Default que vous voyez  ci-dessus . Je prends ce thème comme modèle car tout le monde l'a mais le principe reste le même pour la majorité des thèmes ayant une image dans son header (certains disent en-tête, bannière ou encore tétière).

Ceux qui sont déjà utilisateurs de Firefox sauront comment afficher ce thème directement dans ce navigateur mais pour les nouveaux utilisateurs de FF (qui veulent conserver IE comme navigateur par défaut), il vous suffit d'afficher votre site comme vous avez l'habitude de le faire avec Internet Explorer puis d'activer le thème WP Default.

Une fois ce thème ouvert dans IE, copiez/collez l'Url complète apparaissant dans la barre d'adresse. Pour cela avec le curseur de votre souris sélectionnez http://localhost/wp_themes/  (l'adresse doit alors passer en vidéo inverse soit avec un fond de couleur comme le montre l'image ci-dessous).



puis faites Ctrl + C ce qui a pour effet de copier (provisoirement) cette adresse dans la mémoire.

Nota : Bien sûr l'adresse mentionnée ci-dessus sera différente en fonction du nom donné à votre répertoire et contenant le module WordPress.

Maintenant si ce n'est déjà fait lancez FireFox. Une fois ouvert, cliquez simultanément sur les 2 touches Ctrl et T ce qui doit vous afficher un nouvel onglet vide.  Il suffit maintenant de coller dans la barre d'adresse l'Url que vous avez copié peu avant. Pour cela faites 1 clic gauche dans cette barre d'adresse puis faites Ctrl + V (vous devez voir une adresse ressemblant à ceci  - voir image ci-dessous).



Une fois l'adresse collée appuyez sur la touche Entrée. Votre site doit maintenant s'afficher dans Firefox.
Faites un clic DROIT n'importe où sur la page pour afficher le menu contextuel (celui-ci sera plus ou moins important en fonction des extensions installées).



Cherchez la ligne Informations sur la page et faites 1 clic (gauche) sur celle-ci.
La fenêtre suivante apparaît avec ses 5 onglets.



Cliquez sur l'onglet Médias et au besoin agrandissez cette fenêtre.
Par défaut vous voyez que la première image de votre site est sélectionnée soit ici un rectangle de couleur gris qui correspond à l'image servant à remplir le background de ce thème WP Default.



Pour voir les autres images, faites un clic droit sur la deuxième ligne et ainsi de suite jusqu'à ce que vous trouviez l'image composant le header. Ici avec le thème WP Default ce sera vite fait car il s'agit de la 3eme ligne soit de l'image appelée kubrickheader.jpg.

Nota : N'hésitez pas à agrandir encore (en hauteur et largeur) votre fenêtre pour apercevoir l'image du header dans son entier (ceci est possible pour ce thème WP Default car l'image ne fait que 760px de large - voir image ci-dessous).
Par contre bien évidemment il sera impossible d'afficher une image prévue pour une résolution d'écran de 24 pouces dans un 17 pouces (dans ce cas là des barres de scroll apparaîtront).
Lorsqu'il y a de nombreuses images, pour les voir plus rapidement il suffit de sélectionner la première puis de les faire défiler avec les touches directionnelles (flèche bas et flèche haut)



Tout ça pour arriver à avoir les dimensions de cette fameuse image que vous voulez remplacer. Oui je sais ! il y aurait bien eu d'autres façons d'arriver à ce même résultat sans rien installer mais bon voilà maintenant vous avez Firefox et vous verrez qu'un jour ou l'autre, vous en serez ravi et qu'il vous servira dans bien d'autres circonstances (notamment pour ceux qui veulent en apprendre un peu plus et essayer certains trucs ou conseils donnés sur le forum (firebug entr'autres ).

Donc pour faire simple disons que pour remplacer une image par une autre et ne pas "foutre en l'air" l'apparence du site, il faut impérativement que la nouvelle image (ou photo) ait les mêmes dimensions que celle d'origine. Ici nous pouvons voir que cette image  kubrickheader.jpg fait 760px de large sur 200px de haut.

Nota : Vous verrez plus tard qu'une image insérée dans le code CSS peut très bien être plus grande que la zone affichée sur le site mais n'allons pas plus loin pour ne pas embrouiller les choses.

Je vais donc changer l'image d'origine par l'image ci-dessous. Au départ celle-ci faisait 1300px par 919px, je l'ai donc retaillée pour arriver à un bloc faisant pile les dimensions voulues (760*200).



Alors à partir d'ici j'ai 2 possibilités soit :

1/ La manière vite-fait bien-fait qui consiste à sauvegarder l'image en question dans le même répertoire que celui de l'image origine tout en lui donnant le même nom, c'est à dire kubrickheader.jpg et vous n'aurez plus rien à faire sinon d'aller vérifier que votre image apparaît bien dans le header en faisant un rafraîchissement de la page avec F5 ou Ctrl +F5 (répétez l'opération 1 ou 2 fois si vous ne constatez pas de changement). Cette solution a l'avantage d'être très rapide mais a pour inconvénient d'écraser votre image d'origine (ici ce n'est pas grave car pour pourrez toujours récupérer cette image dans un module WP) mais pour une image que vous aurez travaillée, modifiée, etc... cela pourrait être beaucoup plus ennuyeux s'il s'agit d'une image originale que vous n'aurez pas sauvegardée bien sûr (souvenirs snif).

2/ Personnellement, par sécurité et maintenant par habitude, je préfère donner un autre nom au fichier en question. Par exemple ici je le nommerai  headerf1.jpg (ainsi je ne perds pas l'image actuellement présente dans le header). Oui mais voilà si vous retournez sur votre site et que vous faites un rafraîchissement de la page (F5 ou Ctrl+F5), cette fois vous ne constaterez aucun changement. En effet contrairement au premier exemple où nous avons sauvegardé la nouvelle image avec le nom de l'image origine, ici nous l'avons sauvegardée sous un autre nom donc il faut aller indiquer le nom de cette nouvelle image dans le fichier prévu à cet effet. C'est là qu'il vous faudra aller faire un petit tour en territoire inconnu soit dans la feuille de style nommée tout simplement style.css. Voilà un bon moyen de voir à quoi ressemble cette bête.

Alors ici il y a tellement de possibilités pour ouvrir un fichier de ce type que je passerai tout simplement par l'outil que tout le monde possède soit le bloc notes (attention surtout ne pas utiliser Word, Writer ou autre traitement de texte). Donc à l'aide de cet éditeur de lignes vous irez ouvrir le fichier qui se trouve dans le répertoire suivant :

C:\nom_de_votre_repertoire\wp-content\themes\default\style.css

Nota :  je vais me répéter mais là aussi adaptez le chemin ci-dessus à la configuration de votre ordinateur et du nom donné au répertoire contenant votre module WP).

Une fois ouvert vous verrez un tas de lignes avec des expressions qui paraîtront aussi compréhensibles que des hiéroglyphes (ou presque). Dans toutes ces lignes, allez chercher celles-ci :

#header {
    background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
    }

Maintenant attention soyez bien précis, il faut tout simplement changer kubrickheader.jpg par headerf1.jpg (ou même seulement les noms de fichier puisque l'extension est la même .jpg) ce qui doit donc donner au final :

#header {
    background: #73a0c5 url('images/headerf1.jpg') no-repeat bottom center;
    }

Une fois la modification effectuée enregistrez votre fichier style.css au même endroit sous le même nom.

Allez dans FireFox et faites un rafraîchissement (vous savez faire maintenant) et là vous devriez voir votre nouvelle image insérée dans le header de votre site.



Effectivement la nouvelle image apparaît bien dans le header à la place de l'ancienne mais comme vous pouvez le constater celle-ci dépasse des deux cotés et ce n'est pas terrible.

Arf !!!! en fait je dois vous avouer que je n'ai pas fait attention lors de la rédaction de ce tuto que l'image d'origine comprenait bien la partie bleue mais j'ai complètement oublié qu'il fallait prendre en compte l'encadrement gris qui se fond dans le background (voir l'image plus haut).

Et moi qui croyais avoir fini !

Alors ici aussi il y a 2 solutions.

1/ Là je compte sur vos talents et connaissances acquises pour manipuler un outil graphique du genre Photoshop ou PhotoFiltre (ce dernier Français et gratuit étant largement suffisant). En effet il vous faudra tout simplement ajouter (par copier/coller) une bordure à droite et à gauche de cette image pour lui donner l'apparence d'être insérée aux dimensions de cette page blanche avec des bords légèrement ombrés.
Après avoir fait un imprim écran, il vous suffira de travailler l'image dans votre logiciel de retouche graphique pour copier la bordure de la page vers la bordure de l'image et ce de chaque coté (m'en tire pas mal sur ce coup là ).



une fois fait, vous devriez obtenir le résultat suivant (ouais bon les bordures grises sont pas très visibles mais elles y sont) :



Sauvegardez cette image par exemple sous headerf1bis.jpg puis allez dans votre fichier style.css et répétez l'opération décrite plus haut pour changer le nom du fichier existant par celui-ci.

Soit modifier cette ligne :

#header { 
background: #73a0c5 url('images/headerf1.jpg') no-repeat bottom center;   
}

comme ci-dessous :

#header { 
background: #73a0c5 url('images/headerf1bis.jpg') no-repeat bottom center;   
}

Vous devriez maintenant obtenir ceci (après rafraîchissement).



Pour les plus "pinailleurs" (j'en suis) la deuxième solution est un peu plus difficile à réaliser car elle consiste à remplacer uniquement la partie bleue de l'image origine (entourée d'un filet rouge dans l'image ci-dessous) . Cela implique donc de conserver l'encadrement gris + le blanc de l'image origine dans laquelle on ira coller la nouvelle image. Par conséquent les dimensions seront donc différentes car plus petites mais en plus il faudra lui appliquer un arrondi à chaque angle.



Ce qui pourrait donner ceci par exemple  (c'est mieux non ?) :



Voilà cette fois je pense avoir terminé. Alors bien sûr cet exemple n'est qu'une des nombreuses façons d'arriver à ce résultat mais comme c'est celle que j'utilise et que je n'ai pas à m'en plaindre ...

Par contre je vous ai fait utiliser le bloc notes car normalement par défaut tout le monde doit l'avoir sur son ordinateur mais personnellement j'utilise PsPad (d'autres préfèrent Notepad++  etc.). L'explorateur peut également être très utile mais bon vous découvrirez tout ça vous même au fur et à mesure de vos essais.

                                  --------------------- FIN de la 1ère partie ---------------------

2EME PARTIE
CHANGEMENT IMAGE DU HEADER (EN LIGNE)

Avant de faire quoi que ce soit sur un site qui se trouve en ligne, le premier conseil que je vous donnerai c'est de faire une sauvegarde (souvenirs ).

Puis en tant que débutant, le 2ème conseil serait de toujours faire une modification d'abord en local sur votre disque dur comme on vient de le faire dans l'exemple ci-dessus. Cela vous permet de voir si tout se passe bien et n'entraîne aucun risque pour votre site et puis ça vous fait faire de l'exercice (il n'y a pas mieux pour progresser).

Que ce soit en local ou en ligne, le principe est exactement le même.

1/ Il faut préparer son image aux dimensions de celle que l'on veut remplacer.

2/ Mais cette fois on ne peut pas enregistrer cette image directement sur le site, et il faut pour cela passer par un système de FTP qui va faire monter (uploader) l'image sur le site (pour les curieux qui veulent en savoir un peu plus http://fr.wikipedia.org/wiki/File_Transfer_Protocol).

3/ Enfin il faudra aller modifier le fichier CSS pour lui donner l'adresse et le nouveau nom du fichier à afficher.

Seulement là je dois vous avouer que je coince un peu car je me suis toujours servi d'un logiciel de FTP pour effectuer ce genre de modification et n'ai aucune idée sur le comment faire avec WordPress sans passer par ce Ftp (pour info je suis un utilisateur assez récent de WP). De plus je ne pense pas que vous sachiez vous servir de ce genre d'outil (en tout cas c'est à ceux-là que je m'adresse) et même s'il est vrai que pour mettre en ligne votre site il a bien fallu passer par ce système (mais souvent cela est fait par un parent, un collègue ou un voisin, etc. ). D'habitude quand vous manipulez des images dans WP c'est surtout lorsque vous voulez insérer une image dans un article ou une page et là  vous passez tout naturellement par le bouton prévu à cet effet depuis l'Editeur visuel comme il est montré ci-dessous (rappel les imprim écran sont faits sous la version 2.5.1)



Du coup, je me suis intéressé à une option que je n'avais jamais regardée jusqu'ici soit Image et couleur de l'en-tête



mais finalement c'est pas avec ça qu'on y arrivera car on ne peut que modifier la couleur du fond bleu mais pas insérer une autre image (voir ci-dessous 2 exemples). Toutefois pour ceux qui veulent conserver ce look, il faut reconnaître que c'est très pratique et rapide.



Bon alors j'ai trouvé une façon de faire qui vaut ce qu'elle vaut mais ça a l'air de marcher (si vous avez une autre solution (hors Ftp bien sûr), je suis preneur).

Le truc était surtout de trouver un moyen simple de faire monter l'image du disque dur vers votre site sans créer un article ou une page à chaque fois.

En fait (en y réfléchissant un peu) comme il est dit plus haut lorsque vous traitez des images depuis l'Editeur visuel soit en créant un article ou une page, vous allez bien chercher votre image sur votre disque dur et celle-ci est bien uploadée sur votre site dans un emplacement prévu à l'avance dans la console d'administration soit dans Onglet Réglages options Divers (voir image ci-dessous) donc le voilà notre système Ftp.



Allez c'est reparti. Nous sommes donc dans le thème d'origine WP Default avec notre fond bleu et nous voulons cette fois mettre l'image suivante :



Avant toute chose il va falloir adapter les dimensions de votre image à celle que vous allez remplacer. Faites le bien sûr tout d'abord sur votre disque dur en suivant exactement la même procédure qui est décrite plus haut. Comme nous l'avons fait dans l'exemple précédent, pensez à modifier les bordures gauche et droite pour obtenir l' image suivante (rappel 760*200).



Une fois le traitement de votre image fini, enregistrez là sur votre disque dur par exemple sous le nom de plage.jpg

Maintenant allez sur votre site et faites comme si vous alliez écrire un article  (1)



N'inscrivez rien dans le champ Titre
Maintenant cliquez sur le bouton prévu pour l'insertion d'une image (2) qui fait apparaître l'image suivante.



Cliquez sur le bouton Choisissez les fichiers à envoyer.
La fenêtre ci-dessous s'ouvre.
Allez chercher le fichier plage.jpg que vous venez d'enregistrer (1)
puis cliquer sur le bouton Ouvrir (2)



Là pendant quelques secondes vous voyez la fenêtre se transformer pour faire apparaître le message suivant En cours de traitement (là j'imagine que c'est le système Ftp interne de WordPress qui travaille et qui uploade l'image sur le site). Si un spécialiste a une explication (ou un lien) sur le système en question, je suis preneur.



Après quelques secondes d'attente, la fenêtre ci-dessous s'ouvre. J'ai laissé cette image en entier pour qu'il n'y ait pas de confusion mais en réalité une seule information nous intéresse ici c'est l'URL de cette image.

En effet maintenant que l'image est "montée" sur le site, il va falloir aller dans le fichier style.css pour inscrire l'adresse de cette nouvelle image (soit exactement pareil que lorsque nous étions en local).



Attention ici pour récupérer l'adresse avec la souris c'est pas toujours évident aussi le mieux est de cliquer n'importe où dans ce champ adresse puis de faire Ctrl + A ce qui aura pour effet de sélectionner tout le texte (celle-ci doit passer en vidéo inverse - voir image ci-dessous).



Faites un Ctrl + C pour copier provisoirement cette adresse en mémoire, ouvrez le bloc notes et collez là tout de suite avec un Ctrl V dans cet éditeur. En effet si vous suivez ce tuto à la lettre vous allez faire un autre Ctrl C sous qui vous fera perdre cette adresse (que c'est compliqué tout ça). Conservez le bloc notes ouvert mais fermez la fenêtre de l'image ci-dessus  avec la croix en haut à droite.



Cliquez sur le bouton Apparence



Une fenêtre contenant les screenshots des divers thèmes installés apparaît, cliquez sur Editeur de thème



La page de l'Editeur de thème s'ouvre sur le fichier style.css, ça tombe bien puisque c'est dans celui-ci que l'on doit effectuer la modification. Sinon pour ouvrir un fichier voulu, il faut aller le chercher dans la colonne de droite (non visible sur l'image).



Maintenant il faut aller chercher le code du header en se servant de l'ascenseur pour faire défiler les lignes de code.

Ici un petit conseil car là vous êtes dans les entrailles de votre site et toute erreur même minime peut mettre tout en en vrac et rendre le site inexploitable. Personnellement (via le Ftp) je renomme directement en ligne mon fichier style.css en style.css.old par exemple. Ainsi en cas de problème avec le nouveau fichier style.css, je supprime ce dernier puis renomme le fichier style.css.old en style.css et tout redevient comme avant.

Donc dans le cas présent pour sauvegarder l'intégralité de votre code cliquez n'importe où dans le fenêtre contenant ce code puis là aussi faites Ctrl + A qui sélectionnera tout le texte (il doit être en vidéo inverse - voir image ci-dessous) puis Ctrl + C pour copier tout ce texte en mémoire (c'est de ce Ctrl C que je vous parlais un peu plus haut)



Ouvrez votre bloc notes (normalement celui-ci est déjà ouvert avec une ligne correspondant à l'adresse de la nouvelle image du header qui vient d'être uploadée) et collez à la suite le texte en faisant Ctrl + V.
Sélectionnez l'adresse de cette première ligne puis faites un Ctrl + X (soit Couper ce qui fait que cette ligne doit disparaître du bloc notes) et maintenant sauvegardez le sous un nom explicite par exemple style_default.css (cette sauvegarde sera sur votre disque dur et vous servira en cas de mauvaise manipulation effectuée sur le fichier style.css en ligne).

Aussi maintenant vous pouvez continuer sans risque avec ce fichier style.css. Allez sur la ligne qui vous intéresse et sélectionnez l'adresse de l'image actuelle et uniquement cette adresse sans les apostrophes (voir ci-dessous)



cette sélection étant active, faites un Ctrl + V qui va coller l'adresse que vous venez de mettre en mémoire juste au-dessus (avec le Ctrl + X) ce qui doit donner :



Maintenant allez en bas de la fenêtre contenant ce code et cliquez sur le bouton Mettre à jour le fichier.



Cela aura pour effet d'enregistrer ce fichier modifié directement sur votre site. Pour vous informer que tout s'est bien déroulé un bandeau jaune apparaît en haut de l'écran avec le message suivant : Modification du fichier réussie.

Maintenant il ne vous reste plus qu'à aller voir si votre nouvelle image apparaît bien dans le header. Pour cela cliquez sur le bouton Aller sur le site.



Il est fort probable que vous ayez encore l'image du header précédent aussi faites un rafraichissement de la page avec F5 (ou Ctrl+F5) (Rappel Il arrive parfois que ce rafraichissement ne se fasse pas au premier essai alors essayez de nouveau et normalement maintenant vous devriez avoir ceci.)



Voilà qui est terminé (Ouf ! )

Étant donné la longueur de ce tutoriel et malgré les relectures et essais effectués , il est bien possible qu'il y ait quelques erreurs ou omissions. Si vous constatiez l'une d'elles, n'hésitez pas à me le faire savoir afin d'apporter la ou les corrections qui s'imposent.

Merci.

jessy

Dernière modification par jessy (23-06-2008 23:27:56)