Personnaliser un thème WordPress pour un Blog de l`ARA.

Personnaliser un thème
WordPress pour un
Blog de l'ARA.
Méthode pas à pas.
BLOGS : Personnaliser un thème WordPress (pas à pas).
Dernière publication, le dimanche 20 septembre 2009
Table des matières
I.
Les outils nécessaires ................................................................................................................... 3
II. Utilisation de l'outil Artisteer. ...................................................................................................... 3
1. Pourquoi utiliser Artisteer ? .................................................................................................................. 3
2. Partir d'un thème existant pour le modifier. .......................................................................................... 3
3. Modification, sous Photoshop, de l'image constituant l'en-tête du thème. ............................................ 4
4. Modification, avec Artisteer, de l'en-tête de votre thème...................................................................... 4
5. Modification de l'aspect des menus. ..................................................................................................... 5
6. Modification de l'aspect des titres et sous-titres. .................................................................................. 6
7. Modification de l'arrière-plan du thème. ............................................................................................... 6
III. Exportation d'un thème utilisable pour un blog Wordpress ........................................................ 7
1. Les fichiers générés ............................................................................................................................... 7
2. Les options d'exportation de Artisteer 2 (et plus) .................................................................................. 7
3. L'exportation de votre thème ................................................................................................................ 7
IV. Personnalisation ARA après la génération du thème ................................................................... 9
1. La feuille de style et les classes de propriétés ARA................................................................................. 9
2. Mise en place du menu ARA dans les onglets du blog ............................................................................ 9
3. Remplacement du pied de page (en anglais) par un pied de page ARA .................................................10
4. Mise en place d'un compteur de visites au-dessus des widgets ............................................................10
5. Mise en place des procédures javascript spécifiques aux blogs ARA .....................................................12
6. Déploiement du thème personnalisé....................................................................................................12
Page 2 sur 12
BLOGS : Personnaliser un thème WordPress (pas à pas).
I.
Dernière publication, le dimanche 20 septembre 2009
Les outils nécessaires
A priori, seul le webmaster (ou son assistant technique) peut intervenir sur la préparation d'un nouveau thème utilisable par un
des blogs de l'ARA1.
Il est donc normal, pour lui, de disposer d'outils adéquats avec, en particulier :
·
·
·
·
·
II.
Photoshop CS2 ou +. Le leader des logiciels de retouche d'images.
Artisteer 2.02 ou +. Un outil performant de gestion de thèmes pour sites web ou blogs.
Dreamweaver CS3 ou +. Le leader des outils de génération de pages web.
Un client FTP de son choix.
Un éditeur de blog comme Windows Live Writer ou équivalent.
Utilisation de l'outil Artisteer.
1. Pourquoi utiliser Artisteer ?
Pour préparer/modifier un thème destiné à être utilisé par un blog Wordpress, il faut disposer d'un outil… ou être
particulièrement compétent dans la manipulation des fichiers PHP trouvés en téléchargeant des thèmes sur le net. Il vous
faudra passer dans tous les fichiers pour assurer les traductions et les mises en page…
Par contre, si vous choisissez l'option outil, je vous recommande Artisteer. Il vous apportera une souplesse et une puissance
incroyable pour générer des thèmes WordPress traduits en français !
Vous pouvez évaluer puis acheter ce logiciel sur le site : http://www.artisteer.com/?p=wordpress_themes . Contrairement à ce
que montre le site, votre logiciel Artisteer sait parler français !
2. Partir d'un thème existant pour le modifier.
Dans le cas particulier des blogs pour l'Association des amis de Saint-Jacques, on ne pas créer un nouveau thème de toute
pièce. On va charger un thème existant pour l'adapter à nos besoins.
Ci-dessous, on a chargé le thème ISERE que l'on va dupliquer sous le nom de son choix avant de le personnaliser.
La personnalisation va toucher de "petites choses" pour garder un aspect relativement homogène à l'ensemble des blogs ARA.
Observez, ci-dessous, ce que l'on peut modifier (mais, en fait, le logiciel permet beaucoup plus) :
Œ L'En-tête peut être
modifié en choisissant
une autre image de 940
X 184 pixels (taille
standard).
• La taille et la couleur
des menus peuvent
également
être
modifiées.
Ne pas choisir une taille
trop grande pour que le
menu ne "déborde " pas
de la page.
Ž Enfin, la couleur du fond et son motif
graphique peuvent être différents.
1
ARA : Association des Amis de Saint-Jacques en Rhône-Alpes.
Page 3 sur 12
BLOGS : Personnaliser un thème WordPress (pas à pas).
Dernière publication, le dimanche 20 septembre 2009
3. Modification, sous Photoshop, de l'image constituant l'en-tête du thème.
En général, on s'arrangera pour avoir des en-têtes de blogs relativement semblables. On pourra les distinguer par un blason de
département différent ou un logo représentatif d'une commission de l'ARA.
Pour cela, nous allons utiliser Photoshop et un fichier PSD fourni avec le package standard2. Ce fichier est le
"Header_qq_chose.psd". On le copiera avec un nom rappelant le nom du thème pour lequel il sera utilisé.
Pour obtenir une certaine souplesse dans les modifications, ce fichier est constitué de 3 calques (au sens Photoshop) comme
le montre le dessin ci-dessous :
Ce "calque" est constitué par le blason. Ici, c'est celui de l'Isère. Il
est remplaçable par n'importe quelle image (jpg, gif ou mieux,
png). Cette image devra "mesurer" 160 pixels de haut.
Ce "calque" est constitué par le texte mis en relief. Avantage : on
utilise la police de caractères que l'on veut (alors que sur le web, il
n'est pas évident d'utiliser une zone texte avec des caractères
sophistiqués. Ici, elle fera partie de l'image). Dans notre entête,
cette zone de texte est optionnelle…
Sur les trois calques, on s'attachera à toujours conserver l'arrière-plan (image rappelant le logo du site web de l'ARA) mais, bien
entendu, les deux autres calques peuvent être supprimés ou remplacés. Le travail terminé, on fera une copie au format JPEG
dans le répertoire de son choix. A terme, on stockera les fichiers JPG et PSD dans le thème, une fois que celui-ci aura été
constitué.
4. Modification, avec Artisteer, de l'en-tête de votre thème.
Rouvrons le logiciel Artisteer avec un projet de thème qui nous servira de base pour construire le nôtre. Copions ce projet de
thème en le renommant de façon explicite (exemple "theme_ISERE_2"). Modifions ensuite l'en-tête avec le fichier préparé sous
Photoshop comme ci-dessous :
Œ On part d'un thème relativement neutre
que l'on va modifier pour nos besoins.
Changeons cet en-tête par celui que nous
avions modifié sous Photoshop.
• Dans l'onglet "en-tête" du logiciel, on
peut changer son en-tête en sélectionnant
un fichier image…
Ž Avec ces boîtes de dialogue, je vais
sélectionner
le
fichier
image
"Header_de_lisere.jpg", par ex…
2
Package standard : Ensemble de fichiers et d'images installés par le webmaster pour faire fonctionner votre blog. Ces fichiers sont logés sous l'URL de
votre blog ARA.
Page 4 sur 12
BLOGS : Personnaliser un thème WordPress (pas à pas).
Dernière publication, le dimanche 20 septembre 2009
Voyons ce que cela donne :
Œ L'en-tête du thème s'est
bien réactualisé avec le
fichier que nous avons
choisi.
• La taille de la fenêtre du
thème et la taille de l'image
peuvent être différents.
Dans tous les cas, choisir
l'option "Redimensionner
l'image selon l'en-tête".
5. Modification de l'aspect des menus.
La personnalisation des menus fait partie de la "customisation" d'un thème. Sans forcément chercher à modifier
les couleurs (qui font partie de la charte graphique), on peut jouer sur la police de caractères (la prendre très
lisible) et sur la taille des caractères (pour que tous les onglets du blog soit correctement visualisables).
Voyons ce que cela donne :
L'aspect du menu et de ses
sous-éléments sont
totalement paramétrables
(couleurs des différents
états, police et taille).
Page 5 sur 12
BLOGS : Personnaliser un thème WordPress (pas à pas).
Dernière publication, le dimanche 20 septembre 2009
6. Modification de l'aspect des titres et sous-titres.
En fonction de vos goûts, l'entête de votre blog intégrera directement la "raison sociale". Ici "Délégation
départementale de l'Isère" apparaît en relief et, quel que soit le navigateur qui affichera cet entête, on a la
certitude que cette "raison sociale" ne changera pas d'aspect (car ce n'est pas un texte mais une image).
Cependant, on peut afficher un titre et un sous-titre dans l'en-tête. L'interface d'administration d'un blog
WordPress permet de les modifier à tout moment…
L'aspect des titres et soustitres
est
totalement
modifiable (couleur, police,
taille
et
même
l'emplacement).
Si on est attentif à utiliser des polices de caractères communes à la plupart des machines, on peut personnaliser
l'aspect de ces titres et sous-titres (couleur, police de caractère et taille). On peut même les positionner a priori.
7. Modification de l'arrière-plan du thème.
Pour apporter une petite touche personnelle, on peut modifier l'arrière-plan du thème.
Il suffit d'en choisir un dans une liste et de lui choisir une couleur de fond et une transparence…
L'arrière-plan du thème peut
être modifié aisément grâce
à un choix dans une liste.
Ensuite,
vous
pourrez
modifier sa couleur de fond
et sa transparence…
Page 6 sur 12
BLOGS : Personnaliser un thème WordPress (pas à pas).
III.
Dernière publication, le dimanche 20 septembre 2009
Exportation d'un thème utilisable pour un blog Wordpress
1. Les fichiers générés
Concrètement, quand on génère un thème pour un blog Wordpress, on génère un ensemble de fichiers regroupés
dans un répertoire portant le nom du thème. Pour l'utiliser dans votre blog, ce répertoire (et son contenu) devra
être uploadé dans son sous-répertoire "/wp-content/themes".
2. Les options d'exportation de Artisteer 2 (et plus)
Artisteer 2 permet de générer des thèmes pour différents types de blogs (WordPress et Joomla) ou de générer du
code HTML + CSS afin de constituer un look de portail, par exemple.
Pour un blog WordPress, Artisteer permet de personnaliser l'onglet "HOME" (le premier onglet sous lequel
apparaissent les articles publiés récemment). C'est ce que nous allons faire sur l'écran ci-dessous :
ΠEn choisissant ici, le menu "Options
d'exportation", vous verrez apparaître la
popup ci-dessous.
• En sélectionnant "WordPress", vous
pourrez confirmer que l'onglet doit rester
visible et lui donner un titre.
En général, nous choisissons "Dernières
publications" sur tous les blogs ARA
3. L'exportation de votre thème
Vos options d'exportation définies, il ne vous reste plus qu'à cliquer sur le bouton "Exporter".
La popup qui apparaît vous
permet de choisir un nom pour
ce thème (qui sera également le
nom du répertoire où les fichiers
seront accessibles) et le chemin
d'accès pour son stockage.
Page 7 sur 12
BLOGS : Personnaliser un thème WordPress (pas à pas).
Dernière publication, le dimanche 20 septembre 2009
Vous devez choisir un nom pour ce thème (ce sera le nom du sous-répertoire où tous les fichiers générés seront
stockés). Bien entendu, vous devrez également définir un chemin pour le loger ce sous-répertoire et tout son
contenu…
Page 8 sur 12
BLOGS : Personnaliser un thème WordPress (pas à pas).
Dernière publication, le dimanche 20 septembre 2009
IV. Personnalisation ARA après la génération du thème
1. La feuille de style et les classes de propriétés ARA.
Sur votre blog ARA utilisant le thème que vous venez de générer, la feuille de style va conditionner toutes la
présentation des articles publiés.
En particulier, les tableaux seront bridés, les images seront présentées avec un cadre inamovible, etc.
De plus, pour mettre en place la "charte graphique" de l'association, il nous faut disposer de "classes de
propriétés" utilisables sur des paragraphes, des titres, des tableaux ou des images.
Pour tout cela, il faut modifier le fichier "style.css" du thème généré en insérant le texte ci-dessous :
AVANT la déclaration des
classes dans ce fichier style.css,
vous devez importer les "classes
de propriétés" ARA avec cette
simple ligne de commandes.
2. Mise en place du menu ARA dans les onglets du blog
Pour permettre une navigation homogène dans tous les blogs ARA, nous modifions le fichier "header.php" et nous
y insérons une ligne de commande permettant de faire apparaître un menu comme dernier onglet.
Ci-dessous, le code inséré :
Après la ligne 50 (qui affiche les pages de
votre blog comme autant d'onglets), nous
insérons un include avec notre propre code
PHP.
Cela permet d'afficher un menu ARA comme
dernier onglet.
Page 9 sur 12
BLOGS : Personnaliser un thème WordPress (pas à pas).
Dernière publication, le dimanche 20 septembre 2009
3. Remplacement du pied de page (en anglais) par un pied de page ARA
Par défaut, Artisteer2 génère un pied de page en anglais permettant un lien sur le site WordPress et un autre sur
le site Artisteer.
Nous modifions le fichier "footer.php du thème généré" pour y insérer notre propre pied de page qui comporte un
premier lien sur les "contacts" de l'association et un second lien sur les "mentions légales".
Voir le code ci-dessous :
Tout ce code entre les lignes 4 et 20 doit remplacer l'ancien code
généré par Artisteer2.
Il permet de pointer sur deux liens propres à l'ARA :
· Le premier sur "Contactez-nous".
· Le second sur "Mentions légales"
4. Mise en place d'un compteur de visites au-dessus des widgets
Les compteurs de visite ARA s'appuient sur une base de données MySQL.
Pour mettre en place un compteur de visites dans un blog, il faut d'abord s'assurer que la base de données est
paramétrée pour cela. Nous devons contrôler sous PhpAdmin de la base de données des blogs :
S'il n'existe pas déjà, on doit créer un
enregistrement dans la table "amis-compteur".
Cet enregistrement spécifiera le nom du
compteur ("blog_savoie", par exemple) et la
valeur du compteur (on l'initialise à 0).
Page 10 sur 12
BLOGS : Personnaliser un thème WordPress (pas à pas).
Dernière publication, le dimanche 20 septembre 2009
Cela fait, on devra modifier le fichier "sidebar1" généré par Artisteer.
La mise en place d'un compteur de visites revient à insérer du code PHP dans ce fichier pour placer notre
compteur au-dessus des widgets.
Voyons cela ci-dessous (première partie à insérer après la ligne 2) :
Le nom du compteur de
visites doit être passé en
paramètre : Attention aux
copier/coller sauvages !
Et deuxième partie à la suite :
Tout ce code est inséré avant l'affichage des widgets. On insère directement depuis la ligne 2.
Page 11 sur 12
BLOGS : Personnaliser un thème WordPress (pas à pas).
Dernière publication, le dimanche 20 septembre 2009
5. Mise en place des procédures javascript spécifiques aux blogs ARA
Pour permettre l'utilisation de fonctions et de procédures javascript spécifiques à l'ARA, il faut les insérer dans le
fichier "script.js" généré dans le thème Artisteer. Ce code est à insérer A LA FIN du fichier comme ci-dessous :
Première partie :
Fonction d'ouverture d'une fenêtre.
Paramètres : URL de l'objet à afficher + largeur en
pixels + hauteur en pixels.
Fonction d'affichage d'une image ou d'une photo.
Paramètres : URL de l'image à afficher + orientation
en majuscules ("PORTRAIT" ou "PAYSAGE").
Et la suite :
Fonction de lancement d'un diaporama.
Paramètres : URL du diaporama à lancer et… c'est
tout !
6. Déploiement du thème personnalisé
A présent, votre thème peut être déployé sur le site web grâce à un client FTP.
Copier TOUT le répertoire portant le nom du nouveau thème sous "/wp-content/themes" en partant de l'URL de
base de votre blog ARA !
Page 12 sur 12