Advertisement
  1. Code
  2. WordPress

Débuter avec WordPress : Préparation à la personnalisation de votre thème en utilisant un thème enfant

Scroll to top
Read Time: 12 min
This post is part of a series called Beginning With WordPress.
Beginning With WordPress: First Steps With Your New Website
Beginning With WordPress: Editing the Look of Your Site With CSS

French (Français) translation by Henri Lotin (you can also view the original English article)

OK, si votre site est opérationnel et que vous avez probablement commencé à avoir des démangeaisons d’apporter quelques modifications, et pas seulement quelques changements au contenu, n'est-ce pas ?

Vous pouvez bien être désireux de changer certains éléments d'apparence de votre thème actuel et peut-être même changer son comportement. Ainsi, comme nous continuons à avancer dans ces tutoriels nous nous dirigeons vers le fait de pouvoir mieux personnaliser votre thème et nous allons réellement avancer plus dans ce qui se passe dans le développement et le peaufinage du thème. Toutefois, avant que nous y allons, nous avons quelques dernières choses à faire pour en finir avec la configuration du site, afin que vous puissiez commencer à faire quelques modifications du code.

Ce que nous allons aborder aujourd'hui :

Derniers peaufinages de configuration

  1. Désactivation des commentaires sur les pages
  2. Réglage des menus

Préparation pour l’édition de thème en créant un thème enfant

Un coup de œil à ce qui constitue votre thème :

  1. Utiliser un éditeur de texte pour modifier les templates/fichiers de thème
  2. Thèmes enfant - pourquoi nous les utilisons
  3. Thèmes enfant - comment en faire un et l’activer sur votre site

Vous aurez besoin :

  1. D'une compréhension de HTML et CSS (si vous êtes un débutant absolu sur ce front, vous pourriez commencer ici avec ce cours gratuit de Tuts+ Premium : 30 Days to Learn HTML & CSS)
  2. Votre installation fonctionnelle de WordPress
  3. Un client FTP
  4. Logiciel d'édition de texte
  5. Un navigateur Web

Peaufinage d'édition final du site

OK, juste rapidement, avant d’entrer dans le peaufinage de votre thème, nous allons en finir avec ces deux derniers paramètres du site, en commençant par désactiver les commentaires sur les pages.

Désactiver les commentaires sur les pages

Par défaut, les paramètres de discussion pour WordPress permettent de commenter sur votre site et ajoute le champ de commentaires aussi bien pour les articles que pour les pages. Plus souvent qu’autrement, quand je suis dans une classe de formation je demanderai de désactiver les commentaires sur les pages. Vous pouvez le faire de l'une des deux manières.

La première façon de désactiver discussion/commenter est de le faire page par page, alors allez à Modifier la page et cliquez sur le bouton Options de l’écran en haut à droite de la page.

Cochez la case Discussion. Cela fait apparaître le panneau d’options Discussion dans votre éditeur de page.

Maintenant, située sous la zone de l’éditeur de contenu vous verrez maintenant les options de Discussion... allez-y et décochez la case Autoriser les commentaires, puis mettez à jour votre page. Travail réalisé !

7-bwwp_5-edit-commenting_single7-bwwp_5-edit-commenting_single7-bwwp_5-edit-commenting_single

Alternativement, vous pouvez gagner du temps et désactiver les commentaires sur plusieurs pages à la fois... alors dirigez-vous vers la liste des Toutes les pages et sélectionnez les pages sur lesquelles vous souhaitez désactiver les commentaires.

Puis allez jusqu'au menu déroulant des Actions groupées et choisissez la commande Modifier et cliquez sur le bouton Appliquer.

9-bwwp_5-edit-commenting-bulk9-bwwp_5-edit-commenting-bulk9-bwwp_5-edit-commenting-bulk

Cela fera apparaître le panneau Modifier en bloc. Sur la gauche de ce panneau se trouvera la liste des pages que vous modifiez, s’il y en a une que vous ne voulez pas modifier, cliquez le « x » à côté d'elle pour la supprimer de la liste.

Sur la droite se trouvent les éléments disponibles pour la modification groupée des pages. Comme prévu, l’un est Commentaires alors changez cet élément selectionné à « Ne pas autoriser » et puis cliquez sur Mettre à jour. Travail réalisé, encore une fois !

8-bwwp_5-edit-commenting-bulk_28-bwwp_5-edit-commenting-bulk_28-bwwp_5-edit-commenting-bulk_2

Paramétrage de notre menu

Accédez à Apparence » Menus dans la barre latérale.

Il s’agit de la zone dans laquelle vous pouvez définir juste comment est structurée la navigation de votre site - vous serez en mesure de voir un couple de grands domaines ; la colonne de gauche dans laquelle vous sélectionnez vos éléments de menu et le panneau sur la droite où vous structurez le menu.

2-bwwp_5-menu-editor2-bwwp_5-menu-editor2-bwwp_5-menu-editor

1. Créez votre menu, et vous verrez ci-dessus que nous avons créé un menu, dans ce cas appelé le Primary Menu.

(Dans l’exemple ci-dessus j’ai choisi l’onglet Tout afficher pour que je puisse voir toutes les pages que j’ai à choisir.)

2. Sélectionnez les pages que vous souhaitez ajouter à votre menu dans la liste du panneau gauche et cliquez sur le bouton Ajouter au menu.

3. Vous verrez maintenant les éléments de menu figurer dans votre structure de menu que vous pouvez glisser et déposer dans votre ordre désiré.

4-bwwp_5-menu-editor_drag_drop4-bwwp_5-menu-editor_drag_drop4-bwwp_5-menu-editor_drag_drop

4. Ajoutez le menu à votre Menu de navigation. Cela mettra notre liste à la place que le développeur du thème a choisi pour la navigation principale. En fait, les options apparaissant sur les emplacements de menu sont spécifiques à chaque thème. Notre thème actuel, Twenty Thirteen, offre un emplacement de menu appelé le Menu de navigation, les options disponibles ici peuvent différer selon votre thème. Cochez cette case et cliquez sur Enregistrer le menu.

5-bwwp_5-menu-editor_add_location5-bwwp_5-menu-editor_add_location5-bwwp_5-menu-editor_add_location

5. Accédez au front-end de votre site pour voir votre nouveau menu en action.

6-bwwp_5-menu-editor_menu_published6-bwwp_5-menu-editor_menu_published6-bwwp_5-menu-editor_menu_published

OK, c’est assez au sujet des réglages de base du site... maintenant nous allons retrousser nos manches pour commencer à vraiment nous préparer pour une personnalisation.


Préparation pour la personnalisation du thème - configuration d’un thème enfant

Tout d’abord procurez-vous un logiciel d’édition de texte. Il y a un tas d’éditeurs de texte gratuits sur le marché, qui réduitsà au plus simple, pourraient inclure le bloc-notes sous Windows ou TextEdit sur Mac (Assurez-vous que vous modifiez les préférences Text Edit en texte brut si vous utilisez ce dernier), mais l'inconvénient avec ces éditeurs, c’est qu’ils ne sont pas vraiment conçus pour les développeurs. Éditeurs de texte spécialisés vous donnent l’avantage supplémentaire de numéros de ligne et de la coloration syntaxique (codes couleurs) qui rendent l’ensemble du processus beaucoup moins compliqué.

Pour cet exercice je vous suggère de mettre la main sur un éditeur de texte spécialisé, et pour faire simple, je vous suggère d’essayer un de ces éditeurs gratuits, voici quelques suggestions :

(J’utilise Text Wrangler dans tous ces exemples. La mise en page sera différente dans les autres éditeurs, mais vous devriez trouver que les éléments essentiels sont les mêmes.)

Voici un rapide aperçu de ce que vous verrez lorsque vous regardez un fichier CSS dans Text Wrangler.

  • Une liste des documents ouverts, de telle sorte que vous pouvez naviguer dans les fichiers que vous êtes désireux d’éditer
  • Numéros de ligne pour vous aider à trouver votre chemin à travers votre fichier (particulièrement utile si vous constatez des erreurs faisant référence à une ligne de code)
  • Coloration syntaxique qui vous donne du texte de couleur selon la partie de la fonction du code dans ce fichier
1-bwwp_5-text-editor1-bwwp_5-text-editor1-bwwp_5-text-editor

Une fois que vous avez mis tout ça ensemble, nous allons entrer dans la partie majeure de notre tutoriel, nous reviendrons à l’éditeur de texte sous peu.

Un oeil à vos fichiers de thème

L’installation de WordPress que nous utilisons actuellement par défaut utilise le thème Twenty Thirteen, une collection de templates PHP, CSS, Javascript et fichiers image qui tous travaillent ensemble pour que votre site aie l'apparence qu'il a. Jetons un coup d'oeil rapide sur où trouver les fichiers de thème, parce que la modification du look and feel de votre thème nécessite l’édition de certains de ces fichiers.

Démarrez votre client FTP (vous souvenez-vous de Filezilla ? Nous l'avons paramétré dans la Partie 3 - Installer WordPress manuellement) et ouvrez une connexion à votre site Web et dans le volet distant, accédez au répertoire wp-content.

10-bwwp_5-wp-content10-bwwp_5-wp-content10-bwwp_5-wp-content

Comme vous explorez le répertoire vous trouverez une structure de dossiers, quelque chose comme ceci :

Comme prévu, le répertoire qui nous intéresse est twentythirteen, ouvrez-le et vous aurez une vue comme ceci (dans l’image d'exemple j'ai choisi l'option Tri par type de fichier, alors l’ordre des fichiers peut être différent du vôtre).

11-bwwp_5-twenty-thirteen11-bwwp_5-twenty-thirteen11-bwwp_5-twenty-thirteen

À ce stade, ne paniquez pas au sujet du volume des fichiers. ça peut être intimidant ; cependant, lorsque nous arriverons au stade de la modification de notre thème nous allons apporter des modifications à l’aide d’un thème enfant, ce qui réduira une partie du « bruit » et rendra les choses un peu moins encombrées.

Que sont, et pourquoi devrait-on utiliser, les thèmes enfant ?

L'une des choses que vous remarquerez comme vous passez du temps avec le développement WordPress ou web est que c’est un environnement en constante évolution. Il y a toujours des mises à jour de code, ou de plugins et de thèmes ce qui bien sûr, est l’une des grandes qualités du projet WordPress. Mais cela signifie aussi qu’à un moment donné, il est tout à fait susceptible d'y avoir des changements au thème que vous utilisez lorsque le développeur lance des mises à jour de performance, de sécurité et de fonctionnalité.

Voici le truc... Si vous avez utilisé un thème comme thème de départ pour votre site et l'avez personnalisé pour convenir à un design particulier et à vos besoins de site et que les développeurs originaux publient une mise à jour pour le thème, les modifications vous avez apportées seraient remplacées si vous appuyez sur ce bouton de mise à jour. Mais si la mise à jour porte sur la sécurité, qu’allez-vous faire ? Laissez votre site tel qu’il est et prendre le risque avec du code non sécurisé ? EEK ! Vous ne voulez pas le faire.

Donc, ce que nous voulons est un système qui nous permet de mettre à jour notre thème sans écraser les personnalisations.

Arrive l'humble thème enfant.

Les thèmes enfant vous permettent de créer un nouveau thème qui utilise un autre thème comme son parent. Tous les styles et fonctionnalités du parent sont utilisés en tant que gabarit pour votre site, mais tous les fichiers modifiés et personnalisés sont conservés dans leur propre répertoire, complètement séparé de celui du parent. Donc dans le cas d’un thème parent mis à jour, parce que le thème enfant est séparé, il n’y a aucun risque que ses fichiers soient écrasés. Se servir de thèmes enfant, c’est aussi une excellente façon de débuter avec le développement WordPress, ce avec une vraie longueur d’avance plutôt qu’à partir de zéro absolu.

C’était le pourquoi, voici le comment

Tout d’abord, voici la référence pour les thèmes enfant de WordPress.org lui-même, c’est une excellente référence http://codex.wordpress.org/Child_Themes.

C'est ici que nous commençons à réellement créer certains de nos propres fichiers avec notre texte éditeur. Alors ouvrez votre éditeur et copiez ce code dans la partie supérieure de votre nouveau document :

Avant d’enregistrer le fichier, vous pouvez modifier certains de ces champs pour vous les approprier, donc allez-y et modifiez le nom du thème et les URL et les champs description et auteur, mais ne modifiez pas le Template, qui est la ligne importante qui indique que ce thème s’appuie sur un thème parent, dans ce cas, twentythirteen.

12-bwwp_5-stylesheet-header12-bwwp_5-stylesheet-header12-bwwp_5-stylesheet-header

La 2ème chose que nous avons à faire est de coller une ligne qui indique à WordPress où trouver la feuille de style (le fichier CSS qui dicte tous les styles qui font que le thème apparaisse comme il le fait)

Alors, copiez cette ligne dans votre fichier :

13-bwwp_5-stylesheet-header_213-bwwp_5-stylesheet-header_213-bwwp_5-stylesheet-header_2

Enregistrez le fichier sous le nom style.css (ce nom est important, ne le renommer pas autrement, WordPress cherche spécifiquement ce fichier) sur votre bureau (ou quelque soit l'endroit où vous serez capable de le trouver).

Transférer le fichier de notre machine en local sur le serveur

La prochaine chose que nous devons faire est d’envoyer ce fichier vers le serveur, mais nous devons d’abord créer un répertoire dans notre dossier wp-content pour notre nouveau thème enfant. Alors retournez à votre programme FTP et dans la fenêtre du serveur distant développez l’arborescence de fichier pour que vous puissiez consulter le répertoire des thèmes, et faites un clic droit dessus et choisissez Créer un dossier dans le menu contextuel.

14-bwwp_5-new-directory_214-bwwp_5-new-directory_214-bwwp_5-new-directory_2

Cliquez sur créer un dossier, puis entrez un nom dans la fenêtre pour notre thème (donnez le même nom que votre thème à ce répertoire pour vous faciliter les choses), puis cliquez sur ok.

15-bwwp_5-new-directory15-bwwp_5-new-directory15-bwwp_5-new-directory

Puis double-cliquez sur votre nouveau répertoire de thème ainsi, sur la partie distante de votre fenêtre FTP, vous êtes dans le nouveau répertoire de thème vide et accédez au côté local de votre fenêtre FTP afin que votre bureau, ou le répertoire où vous avez mis votre feuille style.css, est celui qui est sélectionné.

Lorsque vous avez fait cela, glissez votre fichier style.css du panneau de dossier local dans le répertoire du thème distant.

Maintenant, retournez à votre navigateur et votre site WordPress et accédez à Apparence > Thèmes. Notez qu’il y a un nouveau thème là avec votre nom dessus ! (En supposant que vous avez remplacé le nom de l’auteur par le vôtre lorsque nous avons modifié l’en-tête de la feuille de style).

Allez-y et activez-le...

17-bwwp_5-activate-theme17-bwwp_5-activate-theme17-bwwp_5-activate-theme

Vous devriez maintenant voir que votre thème est celui en cours d'utilisation - vous remarquerez peut-être que les détails dans le panneau de Thème actuel reflètent les informations que vous avez éditées dans l’en-tête de la feuille de style que nous avons faite.

18-bwwp_5-activate-theme_218-bwwp_5-activate-theme_218-bwwp_5-activate-theme_2

Enfin, accédez à l’avant du site web et observez...

19-bwwp_child_frontpage19-bwwp_child_frontpage19-bwwp_child_frontpage

Eh oui, même si vous avez un nouveau thème, votre site ne semble pas du tout différent... n’oubliez pas que nous utilisons toujours fondamentalement le thème Twenty Thirteen. Mais rassurez-vous, dans notre prochain tutoriel, nous allons jeter un oeil à la façon de commencer à faire quelques changements simples pour rendre ce thème beaucoup plus personnalisé !


Conclusion

Une fois que votre site est opérationnel, les pages et les menus réglés, vous pouvez commencer à penser à comment vous pouvez réellement ramener le thème à plus « vous » ressembler. La meilleure façon et la plus rapide de le faire est de démarrer avec un thème existant et mettre en place votre propre thème enfant en utilisant le thème existant comme son gabarit. Non seulement cela accélère les temps de développement, (debout sur les épaules des géants, en quelque sorte), nous permet d’apprendre comment les thèmes sont configurés, mais avant tout, cela protège nos changements contre les moments où le développeur original du thème met à jour le thème.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.