Médias & Internet > Site Web Pratique

WORDPRESS : PERSONNALISATION DES THÈMES, VERS UN SITE D'ARTISTE (3)

Vous êtes sûrement maintenant au courant que Wordpress est gratuit, parfaitement adapté à un site musical et multimédia, moderne, très simple à mettre à jour, généralement très simple à installer.
La difficulté se trouve vraiment dans la personnalisation, le changement d'un thème, l'intégration de plugins. En guise de dernier encouragement, voici quelques connaissances et astuces qui, je l'espère, pousseront quelques artistes à faire un site web pratique, propre et convaincant.

Il existe beaucoup et toujours plus d'articles et de tutoriels sur la création de sites spécialisés avec Wordpress. Il serait trop long de faire ici un article exhaustif sur le sujet, voire impossible. Ceux qui voudront aller plus loin n'auront aucun mal à trouver des ressources plus complètes et sérieuses sur les sujets abordés. Les paragraphes qui suivent entrent dans le "vif du sujet", pour comprendre la façon dont les pages sont faites et appréhender la manière de les modifier.

Qu'est-ce qu'un thème dans Wordpress ?

Le thème est en fait l'apparence d'un site Wordpress. Après l'installation, une page se compose de 3 parties "graphiques" et de 4 "zones/pages".

Les 3 parties graphiques correspondent aux images de fond.
Les images de l'entête, du corps et du pied de page ne bougent pas dans le thème de base et dans la plupart des thèmes. Elles seront présentes sur tous le site.
Il est bien sûr possible d'ajouter des éléments différents à l'intérieur d'une ou plusieurs pages, mais le "fond" ne changera pas. C'est l'une des limites de Wordpress, qui peut être dépassée avec quelques connaissances en programmation. Cela va être un élément décisif du design du site.

Les zones/pages affichent le contenu du sites : les textes, le multimédia, les plugins (calendrier, commentaires...).
Il y a le footer, le "content" et la "sidebar", et le footer. Des structures plus compliquées sont mises en place sur bien des thèmes, et les modifications peuvent s'avérer très compliquées. C'est ici qu'il vous faudra sûrement faire des recherches pour trouver un thème à la fois simple et fidèle à vos souhaits, ou faire des concessions.

	parties graphiques		zones/pages
	entête		header
	corps de page		content contenu principal, par exemple photos pour un blog photo, billets pour un blog "classique", articles pour un webzine...		sidebar généralement une colonne à droite ou à gauche contenant la liste des pages, un calendrier, des liens de sites amis...
	pied de page		footer

Header, content, sidebar et footer forment la structure du thème, et donc de chaque page.
Ce sont en fait des pages PHP qui s'afficheront à l'intérieur de la page que vous voyez, en fonction de votre navigation.
Il existe plusieurs types de "content", pour les billets, qui partiront en archives, pour les pages uniques (par exemple contact, qui sommes-nous et toutes les pages qui ne changent pas, qui doivent être toujours accessibles)...
Ce sont les fichiers PHP de votre répertoire thème (dans /wp-content/themes/). Les plus utilisés sont header.php, index.php, home.php, footer.php, sidebar.php, single.php, page.php et archives.php. Header et footer sont bien sûr toujours présents.
En fonction de la page affichée, la sidebar sera présente ou pas. et le content peut être formé de l'index.php et de la sidebar.php, de page.php et de la sidebar.php, d'archives.php uniquement... les constructeurs des thèmes font un choix, qu'il est possible de modifier avec de la rigueur et les liens du codex de wordpress.org (les articles y sont principalement disponibles en anglais). En français, une des ressources très complète est Fran6art.
Tout n'est pas accessible, mais si vous n'avez besoin de tout changer, c'est plus simple !

Le thème que vous choisirez aura sans fait évoluer le modèle de base. Pour modifier des éléments, il vous faudra donc quelques connaissances et un peu d'astuce.

Petit cours de HTML/CSS : identifier les éléments que vous souhaitez changer

Les CSS servent à "habiller" des éléments. Il peuvent être considérés comme les habits et le HTML pourrait être alors le corps.

Le PHP ira chercher les données pour les afficher dans cette structure "corps/vêtements" selon le clic de l'internaute et donc les pages appelées (index.php, home.php, archives.php, sidebar.php...).

Le langage CSS permet de donner des propriétés à des éléments.
Une image pourra avoir des marges, un emplacement et une bordure...
Un texte pourra être écrit avec une couleur, une police, une taille, une hauteur de ligne...
Beaucoup d'éléments visuels sont régis dans Wordpress (et d'ailleurs dans Myspace) par ces propriétés CSS. Savoir les comprendre et les modifier est la clé pour commencer à changer la typographie, les couleurs de fond...

Si certains éléments et plugins sont assez bien renseignés sur les forums, blogs et sites spécialisés, d'autres sont beaucoup moins évidents à trouver. Je vais vous proposer une technique pour retrouver un élément dans cette jungle de signes confus. Il existe plusieurs extensions de Firefox qui pourront vous aider. FireBug vous sera d'une précieuse aide.

Méthode par l'exemple : vous souhaitez changer la couleur d'un sous-titre de widget

1/ affichez dans le navigateur une page ou se trouve l'élément en question
2/ sélectionnez l'élément à l'aide la souris (surbrillance habituellement bleue)
3/ avec le clic droit sur la sélection, choisissez "code source de la sélection"
4/ et là apparait un code !

Le HTML est fait de balises. Elles sont reconnaissables car elles sont inscrites entre des chevrons : < ouvre la balise et /> la referme.
Exemples :
paragraphe : <p>blabla</p>
image : <img src="emplacement/dossier/fichier.jpg" xxxxx="10" xxxxxx="fezfllk" xxxxxxxx />
lien : <a href="emplacement/pageoufichier" xxxxxx xxxxxx xxxx>texte (ou image : <img xxxxxx />) du lien</a>
"dive" (ou bloc, calque...) : <div> contenu </div>
gros titre : <h1>titre</h1>

Beaucoup d'attributs peuvent être inscrits dans une balise : la taille, les comportements (est-ce qu'un lien s'ouvre dans une autre fenètre ou pas ?), ... vraiment plein de choses. Il y a également des alt="" et des titles="" qui sont des descriptions à destination des mal et non-voyants, des <strong></strong> qui ajoutent du gras, des <span></span> qui définissent un sous-élément... Les ressources complètes sont largement publiées sur le web sous forme de tableaux.

Les styles CSS sont apparus et ont changé la manière de travailler. Il existe également pléthore de pages web et de tableaux très savants. Au lieu d'écrire à chaque fois : je veux que cet élément soit jaune, ait une taille de 12 pixels avec une marge supérieure de 25 pixels, il suffit de créer la class CSS .jaune12margesup, et d'appeler les éléments voulus jaune12margesup.

Exemple d'une class écrite en CSS :

Si on veut donner ces propriétés à deux paragraphes dans une page, il faut écrire :
<p class="jaune12margesup">blablabla</p>
<p>blablabla pas jaune</p>
<p class="jaune12margesup">blablabla</p>

Une dernière chose concernant les CSS avant de vous laisser découvrir la suite de la méthode, il existe des class et des id. A la différence des class, les id ne peuvent apparaitre qu'une seule fois par page.
Ils se notent en HTML :
- id="nom d'identifiant" à l'intérieur d'une balise (de préférence sans caractères spéciaux, accents, espaces) : <img src="source de l'image.jpg" id="identifiant1" />
- class="nom de la class" : <p class="class1">blabla< /p>
Et en CSS :
- #nom d'identifiant
- .nom de la class

5/ vous pouvez désormais identifier l'élément en question et la class, l'identifiant qui lui ont été attribués.
6/ dans le répertoire wp-content/themes/votre thème, ouvrez style.css et cherchez la class ou l'identifiant souhaité avec la commande présente sur tous les éditeurs depuis le Bloc-note : Edition>Rechercher... Cliquez plus d'une fois sur rechercher, il est fort possible que le nom que vous recherchez se trouve à plusieurs endroits dans le fichier.
7/ identifiez la ligne à changer parmi celle qui porte le nom cherché, soit en tâtonnant, soit par logique.

DERNIÈRES RECOMMANDATIONS

Plus il est précisement déclaré, plus un style CSS a du poids. Il ne s'agit pas de la longueur du nom du style ou de sa pertinence.
Exemple : dans un fichier CSS, ".blanc" a moins de poids que "div#bloc5 p.blanc" (qui signifie le paragraphe qui a la class blanc et qui se trouve dans une div qui a l'identifiant bloc5).
De plus, si un paragraphe a un style défini par défaut, celui aura plus de poids que le style de la classe assignée.
Exemple : si "div p" (une paragraphe situé dans une div) a une couleur jaune et que vous écrivez "p.blanc", "p.blanc" devrait s'afficher en jaune s'il est dans une div.
Pour terminer sur dernière règle de base, l'ordre d'apparition dans un fichier CSS (tel que style.css de votre thème) est important : en cas d'égalité du poids de 2 propriétés (ou en cas de répétition), c'est celle située le plus bas dans le fichier qui sera prise en compte.

Ce n'est pas sorcier, cela peut s'apprendre (au moins les bases :)) assez facilement, mais se familiariser et obtenir un premier succès peut prendre un peu de temps.

Courage !

Dernière mise en garde : ce qui marche sur Internet Explorer 7 ne s'affichera pas forcément de la même manière sur IE8, Firefox... Si vous êtes devant un problème de ce genre, il existe des astuces, parfois absolument incompréhensibles, qui permettent un rendu identique. Ce sera pour vous le moment de demander de l'aide, sur les forums spécialisés !

La rédaction - juin 2009