Hier soir à La Cantine à Nantes, c’était l’occasion pour moi de faire un retour d’expérience sur ma pratique de WordPress que j’utilise aujourd’hui pour construire les sites internet de type « vitrine ».
Le thème est souvent la première chose que l’on souhaite changer après avoir fait son installation WordPress. Et pour cause, quand on cherche à avoir sa propre identité visuelle, il est bien normal que l’on ne souhaite pas que son site internet ressemble trait pour trait à celui du voisin.
Créer son thème WordPress
Plusieurs choix s’offrent alors à vous pour bâtir votre thème :
- Garder un des thèmes par défaut (Twenty Twelve, Eleven ou Ten)
- Trouver un thème qui vous conviennent mieux dans l’immense choix proposé
- Modifier un thème par défaut
- Créer son thème en s’appuyant sur un autre thème
- Créer votre propre thème
Nous l’avons déjà vu, laisser un thème par défaut va très souvent ne pas vous convenir puisque l’idée première est de se démarquer.
Choisir un autre thème, outre les risques potentiels de sécurité, vous pouvez parfaitement trouver un ou plusieurs sites internet qui ressemblera au votre. En effet, qu’ils soient gratuits ou payants les thèmes sont à disposition de tout le monde.
La modification d’un thème existant peut à terme vous poser problème si vous souhaitez bénéficier du système de mise à jour prévu dans WordPress. En effet lors d’une mise à jour, celle-ci viendra écraser toutes les modifications que vous auriez pu faire dans votre thème.
Il vous reste alors les deux dernières alternatives. Vous l’aurez compris, la dernière qui consiste à construire son thème en partant de zéro, je la mets volontairement de côté, simplement pour deux raisons :
- Quand on débute dans la construction de son thème, on peut se sentir un peu perdu et ne pas trop savoir par quel bout le prendre pour commencer.
- Ce n’est pas ma pratique actuelle et il s’agit pour moi justement de faire un retour d’expérience à ce sujet
Construire son thème WordPress à partir de Twenty Eleven
Voici donc le décor planté et ce qui m’a principalement motivé à traiter ce sujet.
Pour le moment, j’ai rédigé ce billet pour vous mettre à disposition librement (licence creative commons BY-NC-SA) le fichier de la présentation qui m’a servi de support. Mais très prochainement je le compléterai des quelques détails que je vous ai livré lors de ce meetup.
La présentation Construire son thème WordPress (libre office)
La présentation Construire son thème WordPress (PDF)
La rédaction de la suite de ce billet est pour très bientôt ne perdez pas patience, merci !
Comment s’y prend-on concrètement pour créer son propre thème à partir de Twenty Eleven ?
Voilà bientôt un an que j’ai rédigé ce billet, et il était temps pour moi de vous livrer les détails de ce que vous aurez à faire pour construire votre thème à partir du thème Twenty Eleven. Il s’agit également pour moi de préparer un futur workshop que l’on présentera lors d’un prochain meetup WordPress à Nantes.
Cela tombe également à pic, puisque je dois produire justement un nouveau thème pour un projet de refonte pour un de mes clients. Je vais donc pouvoir m’appuyer sur ce projet pour vous livrer la manière de s’y prendre.
Je passerai sous silence le cas du thème enfant, puisque j’estime car partir du moment où vous allez faire des changements importants dans le thème, il n’y a, pour moi, plus grand intérêt de profiter des mises à jour du thème parent.
Rappel : il s’agit bien d’une méthode de duplication du thème Twenty Eleven sans passer par la mécanique de thème enfant. La répercussion des mises à jour du thème parent sur votre thème n’aura donc pas lieu. Il s’agit bien de construire votre propre thème. Vous aurez donc à votre charge de le maintenir comme il se doit.
Allons-y ! C’est parti !
Etape 1 : Télécharger et installer le thème Twenty Eleven
Eh oui ! Aujourd’hui nous sommes en 2014 😉 et le thème Twenty Eleven, avec les évolutions successives de WordPress ne fait plus partie des thèmes fournis par défaut.
Seul les thèmes Twenty Fourteen, Twenty Thirteen et Twenty Twelve sont aujourd’hui installés avec WordPress.
Mais rien de vous empêche de l’installer sur votre WordPress 3.8.1 fraîchement mis en place.
Rien de plus simple !
- Rendez-vous dans le menu Apparence / Thèmes puis ajoutez un nouveau thème en cliquant sur le bouton correspondant
- Saisissez Twenty Eleven dans le champ de recherche et validez
- Dans la liste des thèmes proposés cliquez sur le lien Installer maintenant sous le thème Twenty Eleven, bien sûr 😉
- Une fois le thème installé, vous pouvez l’activer
NB : Avec WordPress 3.8 vous serez alors averti que les traductions du thème ne sont pas à jour. Profitez-en pour effectuer la mise à jour.
NB : le thème Twenty Eleven est également téléchargeable pour une installation manuelle sur le site de WordPress. Téléchargez le thème Twenty Eleven
Voilà, vous en avez terminé avec cette première étape qui va vous servir de base pour dupliquer le thème Twenty Eleven et construire votre propre thème.
Etape 2 : Dupliquer le thème Twenty Eleven
Vous allez maintenant recopier le thème Twenty Eleven afin de construire votre propre thème. Nous l’appelerons Twenty 11 WP Theme pour l’exemple dans ce billet mais n’importe quel autre fera l’affaire.
- Commencez le dossier twenty11wptheme dans le dossier wp-content/themes de votre installation wordpress
- Recopier l’intégralité du dossier twentyeleven dans votre nouveau dossier
- Vérifiez ensuite l’existence du nouveau thème dans l’administration
Comme vous le voyez votre nouveau thème ressemble comme deux gouttes d’eau au thème Twenty Eleven. A noter, tout de même, une toute petite différence puisque le dossier twenty11wptheme apparaît après le nom du thème qui vient tout juste d’être créé.
Vous pouvez donc maintenant passer à l’étape pour créer vraiment votre propre thème et commencer à le personnaliser.
Etape 3 : modifier le thème Twenty Eleven pour obtenir son propre thème
Cette étape consiste à modifier le contenu de certains fichiers, voire de les renommer, pour s’assurer du bon fonctionnement du thème avec son nouveau nom : Twenty 11 WP theme.
- Changez le nom du thème. Pour cela éditez le fichier style.css et modifiez le commentaire en tête du fichier
NB : seul le nom du thème (Theme Name) a de l’importance ainsi que le nom du répertoire (repris par Text Domain). Dans le nom de dossier, par simplicité et pour éviter tout souci, évitez les espaces et autres caractères spéciaux (par exemple les accents pour nous autres francophones)
- Modifiez également le fichier readme.txt simplement pour rester cohérent. N’oubliez pas de citer la source.
- Personnalisez la capture d’écran de votre thème en y plaçant celle de la maquette de votre futur site par exemple. Ici j’ai fait simple, j’ai juste paramétré WordPress pour changer le titre du site et mettre le nom du thème. Enregistrez votre capture en remplaçant le fichier screenshot.png (600 x 450 pixels)
Voilà vous avez fait l’essentiel, votre thème pourrait parfaitement fonctionner comme cela, à un petit détail près toutefois et qui a son importance. En effet, dans le code développé pour le thème et dans les commentaires de celui-ci, vous avez encore la trace du nom du thème Twenty Eleven.
J’ai fait ce travail de recherche pour vous
| Chaîne de caractères | Respect Maj / Min | Nombre d’occurences trouvées |
| twentyeleven | oui | 451 |
| Twenty Eleven | non | 129 |
| Twenty_Eleven | non | 36 |
La partie de modifications la plus importante (chaine twentyeleven), concerne principalement l’appel au système de traduction de WordPress ainsi qu’au nommage spécifique de fonctions apportées par le thème. Vous pouvez modifier la totalité des chaînes sans risque.
La chaîne de caractères « Twenty Eleven » peut également être modifiée de manière globale sur l’ensemble du thème, car elle est principalement utilisée dans les commentaires du code et dans quelques chaînes de traduction.
La chaîne de caractères « Twenty_Eleven » peut également être modifiée de manière globale sur l’ensemble du thème, car elle est principalement utilisée dans les commentaires du code et pour nommer le widget éphémère spécifique au thème Twenty Eleven.
NB : au passage j’ai noté une erreur dans la traduction française de ce widget qui porte encore le nom Twenty Ten. Nos verrons plus loin à l’étape 4 comment le changer.
Par quoi remplacer ces chaînes de caractères ?
Vous allez remplacer dans tous les fichiers de votre thème les chaînes de caractères à l’aide du tableau suivant.
| Chaîne à remplacer | Chaîne de remplacement |
| twentyeleven | twenty11wptheme |
| Twenty Eleven | Twenty 11 WP Theme |
| Twenty_Eleven | Twenty11WPTheme |
C’est parti ? Vous avez relevé les manches ?
Blague à part, vous n’allez sûrement pas effectuer toutes ces modifications à la main.
Comment procéder alors ?
Pour faire ces modifications, vous allez utiliser votre éditeur de texte (Notepad++ par exemple) qui propose un outil de remplacement de chaîne de caractères directement dans tous les fichiers d’un dossier.
Personnellement j’utilise également l’interface de développement Netbeans qui possède le même genre de fonctionnalité.
Attention : il faut toutefois être prudent, ce type de manipulation est irréversible. Prévoyez donc de faire une sauvegarde de votre dossier thème. Si vous utilisez un logiciel de contrôle de version (Git, Mercurial, Subversion …) c’est encore mieux.
Dans notepad++, choisissez le menu « Recherche » puis « Rechercher dans les sous-dossiers » ou tapez la combinaison de touches CTRL + MAJ + F.
Vous obtenez alors la boîte de dialogue qui va vous permettre de remplacer les chaînes de caractères sur l’ensemble des fichiers de votre thème.
- Placez-vous dans l’onglet « Find in Files »
- Saisissez dans le champ « Recherche » la chaîne à remplacer (ici twentyeleven)
- Saisissez dans le champ « Remplacer par » la chaîne de remplacement (ici twenty11wptheme)
- Laissez « *.* » dans le champ « Filtres » afin que la modification se fasse sur l’ensemble des fichiers.
- Choisissez le dossier de votre thème dans votre installation WordPress (ici wp-content\themes\twenty11wptheme)
- Cochez la case « Sous-dossiers » afin que la modification se fasse également dans les fichiers des sous-dossiers de votre thème
- Cliquez sur le bouton « Remplacer tout » (même pas peur ! 😉 )
NB : Avant vous pouvez cliquer également sur le bouton « Trouver tout », notepad++ vous fournira alors la liste de l’ensemble des fichiers touchés par le remplacement de chaîne sans faire la modification. Cela peut permettre de vérifier que vous n’avez pas fait de coquille avant de faire la manipulation.
- Effectuez ensuite les mêmes étapes pour les 2 autres chaînes « Twenty Eleven » et « Twenty_Eleven »
NB : Twenty Eleven a légèrement évolué dans le temps et certains éléments ont été ajoutés au fil des versions. Si vous souhaitez également changer le numéro de version (mettre 1.0 qui correspond à la première version de votre thème), vous pouvez également changer la chaîne « @since Twenty 11 WP Theme x.x » (avec x.x pour les n° de versions 1.2, 1.3 et 1.6) par la chaîne « @since Twenty 11 WP Theme 1.0 »
Et voilà, vous avez terminé ! Votre thème est construit à partir du thème Twenty Eleven de départ. Vous pouvez donc maintenant l’activer.
Etape 4 : modifier les fichiers de traductions du thème Twenty Eleven
Aïe, aïe, aïe ! Mais que se passe-t-il ? Voilà que vous avez activé votre thème, tout beau tout neuf, mais votre site n’est pas traduit :-/
Rien de grave !
Pas de panique en effet ! Rappelez-vous que précédemment, pour créer votre thème, vous avez remplacé toutes les chaînes « twentyeleven » par la vôtre « twenty11wptheme ».
Or WordPress utilise cette chaîne de caractères pour déterminer dans quel fichier de traduction de thème il va trouver la correspondance de la chaîne à traduire. Depuis quelques versions de WordPress, ces fichiers de traductions portent le nom du thème et sont placés dans le dossier wp-content/languages/themes et non plus dans le dossier du thème lui-même.
Il faut donc recopier les deux fichiers (fichier .po et .mo) de traductions du thème Twenty Eleven et simplement les renommer avec le nom de votre thème (ici twenty11wptheme)
Ensuite rafraîchissez votre page et, cette fois-ci, elle devrait être correctement traduite.
Çà y est ! Vous êtes presque arrivé au bout. En effet, dans le fichier de traduction (fichier .po), il y a encore quelques chaînes « Twenty Eleven » qu’il faut encore modifier.
Ouvrez le fichier et remplacez-les par « Twenty 11 WP Theme » et sauvegardez le fichier.
Il faut ensuite recréer le fichier .mo correspondant (c’est ce fichier que WordPress utilise réellement pour traduire). Je vous invite à voir le podcast vidéo sur WP Channel qui vous explique comment utiliser l’utilitaire poedit pour effectuer cette ultime modification.
Pfiou ! C’est enfin terminé, vous avez votre propre thème prêt à être personnaliser.
Bien sûr, ce type d’exercice s’applique à n’importe quel thème WordPress. Attention toutefois à respecter les droits de licence GPLv2 qui régisse WordPress et le cas échéant le thème.
Attention également à la complexité du thème que vous voulez dupliquer. Il ne sont pas tous aussi simple que les thèmes proposés avec WordPress.
Télécharger le thème Twenty 11 WP Theme
En complément de ce billet, j’ai effectué toutes ces modifications et je vous les mets à disposition sur mon compte GitHub : télécharger Twenty 11 WP Theme
Que vous étiez présent ou non aux meetup et que le sujet vous intéresse, vous pouvez toujours échanger ici même en laissant un commentaire ci-dessous.
10 réponses sur « WordPress : construire son thème à partir de Twenty Eleven »
Bonjour, merci pour ces indications très précises.
On n’est jamais si bien servi que par soi-même et les thèmes qu’on trouve habituellement, bien que très esthétiques, sont assez lourds à charger car pleins de scripts.
Mieux vaut tout personnaliser soi-même si possible.
Bonjour Sandra : je t’en prie 🙂
Cet article commence a daté un peu mais, je pense, reste toujours d’actualité dès lors que l’on souhaite avoir une structure de thème sans avoir à la refaire entièrement à la main. Cela reste également réalisable avec les thèmes sortis depuis : toute la série des Twenty (12, 13, 14, 15, 16, 17 et 19) en analysant bien toutes les chaînes qu’il y aurait à modifier. Bien entendu, la méthode de personnalisation par thème enfant est également tout aussi envisageable mais comme je l’évoquais à l’époque si les modifications deviennent tellement nombreuses autant avoir son propre thème.
Il existe également maintenant des starters thèmes très légers qui peuvent jouer ce rôle bien mieux que les thèmes de base fournis par WordPress justement parce qu’ils ne posent que la structure avec en général un design minimaliste : Underscores, Beans, Bones …
Bonjour,
Je souhaite conserver mon thème actuel Twentyeleven (ou j’ai créé un child) mais je souhaite faire une page pleine (sans sidebar sans header et sans footer) est ce possible ?
Bonjour,
Désolé pour la réponse tardive et j’espère que tu as trouvé la solution depuis 🙂
Sinon, il suffit de créer un nouveau modèle de page dans le thème enfant.
Pour cela recopier le modèle de page par défaut (en principe page.php) dans son propre fichier (template-page-pleine.php par ex.).
Je recommande de préfixer les modèles de page avec « template- » qui n’est pas utilisé par WordPress et permet de facilement s’y retrouver dans le thème.
Ensuite dans ce nouveau fichier « template-page-pleine.php » :
Dans l’administration, se rendre sur la page concernée en modification ou modification rapide et changer le modèle dans la liste déroulante par le nouveau modèle « Page pleine »
Manu
Bonjour,
Et comment votre thème était-il touché par les mises à jour de Twenty Eleven ?
Pour moi, vous n’appliquez pas la bonne méthode, il faut créer un thème enfant ( child theme), créer un style.css qui « appelle » le style.css de twenty eleven ainsi on peut modifier le thème et avoir les mises à jour de Twenty Eleven, suivre ce tutoriel, là on fait ce qui faut.
http://wpchannel.com/creer-themes-enfants-child-themes-wordpress/
Bonjour Laurent,
Je te remercie de l’intérêt accordé à ce billet, et je vais apporter cette précision au début des explications de ma démarche.
Comme je l’ai expliqué lors du meetup et dans mon document PDF fourni juste au dessus, cette méthode nous fait perdre la mise à jour du thème parent et donc sa répercussion sur le thème enfant. La mise à jour n’aura donc pas lieu avec la méthode que j’évoque dans ce billet.
Ma pratique est bien de construire un thème complet qui n’a souvent plus rien à voir avec le thème Twenty Eleven (mais en ne partant pas complètement de zéro) et cela perd énormément de son intérêt d’avoir 2 thèmes embarqués alors que l’on a modifié quasiment tous les fichiers du thème parent dans son thème dupliqué.
S’il y a peu de modifications dans le thème que l’on construit, la bonne pratique est bien de faire un thème enfant comme tu l’évoques. Cette méthode est très simple comme l’indique le tutoriel d’Aurélien que tu as mis en lien ou encore le codex WordPress lui-même :
https://codex.wordpress.org/fr:Th%C3%A8mes_Enfant
Bonjour je souhaite installer une architecture d’un thème par défaut. Puis faire les modifs et les changements ensuite. Est ce que ça existe ? Merci bcp
Bonjour,
Oui, il existe des tutoriels à ce sujet comme :
Il y a également la documentation officielle de WordPress (si on a pas trop de problème avec l’anglais; à ma connaissance cette partie du codex n’est pas traduite) dont le point de départ est ici :
http://codex.wordpress.org/Theme_Development
On y trouve notamment le schéma générale de l’architecture d’un thème WordPress avec les fichiers absolument obligatoires pour son fonctionnement.
http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
Ceci étant ce schéma donne des indications sur le fonctionnement du thème mais pas réellement sur le découpage qui peut être fait dans celui-ci. Donc pour la construction du thème, il est préférable de suivre la documentation qui donnera quelques détails sur le découpage (header, footer, sidebar …)
C’est pour cela que, dans mon expérience personnelle, j’ai une préférence à m’appuyer sur un thème existant. J’ai choisi Twenty Eleven parce que je trouvais le Twenty Twelve était vraiment trop dépouillé. Il faudrait s’intéresser au tout nouveau Twenty Thirteen arrivé avec la version 3.6 de WordPress.
Il existe d’autres thèmes minimalistes qui peuvent servir de base à cette architecture, par exemple ici : http://www.plaintxt.org/wordpress.html
Voilà en espérant t’avoir apporté réponse à ta question.
Bonjour,
Je suis une jeune étudiante débutante en charge de la création d’un site pour une esthéticienne. Et votre document PDF est génial, merci !
Bonjour Sabine,
Bien content que ma présentation ait pu te donner les éléments de base pour démarrer.