Premiers pas avec les thèmes pour enfants WordPress

Article écrit par:
  • WordPress
  • Mis à jour: Jul 27, 2013

Alors, vous imaginez que vous commencez vos modifications dans le monde WordPress et que vous avez trouvé beaucoup de thèmes géniaux. Vous trouvez même beaucoup de thèmes premium et la plupart d’entre eux en valent vraiment la peine (quelques livres pour un look et un code professionnels). Et la plupart des thèmes que vous trouvez sont si proche, mais aucun n’est exactement ce que vous voulez. Il serait bon de pouvoir déplacer légèrement la barre de menus, remplacer la police, ajouter un nouveau bloc de texte.

Eh bien, si cela semble familier, ce guide est pour vous. Ici, nous allons plonger dans le monde des thèmes enfants, où vous pouvez faire à peu près tout ce que vous voulez sans briser le thème fabuleux que vous avez acheté ou sans perdre les mises à jour futures, car tout ce que vous ferez sera annulé.

Modification de l'apparence sans modifier les fichiers de thème

En bref, c’est ce que dit le thème Child: Personnaliser sans modifier les fichiers originaux. Un thème enfant aura fondamentalement les mêmes fonctionnalités et l'apparence de votre thème principal (parent), sauf si vous dites explicitement le contraire.

Il contiendra au moins les fichiers 2, le fichier style.css et le fichier functions.php. Tous les autres fichiers seront extraits du thème parent. Ainsi, à moins de créer un nouveau fichier dans votre répertoire de thème enfant, vous utiliserez des fichiers parent.

Nous avons beaucoup de possibilités ici, mais le principal avantage est que vous pouvez revenir facilement au thème d'origine et ainsi mettre à jour votre thème principal sans perdre les modifications, car elles sont effectuées dans un dossier complètement différent.

Obtenons nos mains sales

La première étape consiste donc à créer un nouveau répertoire de thème enfant dans votre dossier / wp-content / themes /. Appelons cela «Vingt enfants» et créons notre fichier styles.css de base:

/ * Nom du thème: Twenty Child URI du thème: http://www.webrevenue.co Description: Apprendre des thèmes pour enfants en ce moment Auteur: Rochester Oliveira URI de l'auteur: http://www.webrevenue.co/author/rochester/ Modèle: vingt * / / * Appel du fichier CSS du thème principal * / @import ("../ twentytwelve / style.css"); / * Ajoutez tout ce que vous voulez ci-dessous * /

Les paramètres sont (parmi d'autres paramètres facultatifs omis):

  • Nom du thème: nom que vous voyez sous l'écran de sélection des thèmes
  • Thème URI: Le lien qui y sera affiché
  • Description: Une courte description pour vous rappeler de quoi il en retourne.
  • Auteur: Qui a créé le thème de l'enfant
  • Author URI: Si vous souhaitez créer un lien vers le site de l'auteur
  • Modèle: le dossier du thème principal (donc si vous souhaitez utiliser un thème différent comme thème principal, remplacez simplement ce paramètre)

Une fois que vous avez ajouté ce code, vous verrez le thème enfant sous WP admin> Apparence> Thèmes. Vous pouvez le sélectionner maintenant et toutes les modifications apportées seront visibles sur votre site.

Le thème enfant édite 101

Cela peut être inutile si vous n'avez aucune connaissance en CSS, n'est-ce pas? Faux! CSS est en fait assez facile et vous pouvez trouver beaucoup d'extraits pour vous aider. Voici quelques conseils simples pour vous aider dans vos personnalisations.

#1 Installer Firebug

Beaucoup de gens aiment Chrome et Safari (moi aussi!), Mais pour moi, FireFox est bien meilleur pour le développement. Donc, si vous voulez l'utiliser, je vous recommande également d'installer firebug, un outil formidable pour comprendre tous les sélecteurs actifs dans l'élément en cours.

Une fois que vous l'avez installé, vous pouvez appuyer sur F12 ou cliquer avec le bouton droit de la souris quelque part dans la page et sélectionner «Inspecter l'élément». Vous verrez une nouvelle fenêtre avec la page actuelle HTML et CSS (et de nombreux autres onglets utiles, nous pourrons peut-être en parler plus tard).

Dans la zone CSS, vous verrez de haut en bas toutes les règles CSS appliquées à l'élément en cours, ainsi que la règle plus «spécifique» en haut. C'est cool, mais voyons ce que vous pouvez faire avec cette information

#2 Considérer la spécificité CSS (ou le poids du sélecteur)

Chaque règle CSS a son sélecteur, ses propriétés et ses valeurs. Mais lorsque le navigateur trouve 2 ou plusieurs règles qui affecteront le même élément, il doit choisir laquelle d’entre elles convient le mieux. Nous avons généralement cette "règle" pour comprendre ce qui sera considéré:

  • ! déclaration importante écrasera toute autre chose
  • CSS en ligne écrasera tout sauf! règles importantes
  • Les identifiants (#header, #footer, # container…) valent des points 100
  • Classes (.main, .nav, .box) valant des points 10
  • Tags (body, div, p, a) valant un point 1
  • Le sélecteur universel et les pseudo-classes (*,: hover,: after) valent 0 mais elles s'appliqueront s'il y a une «égalité»

Ok, voyons un exemple pour mieux comprendre cela. Cliquez avec le bouton droit de la souris sur l'en-tête de votre site à l'aide du code vingt douze et vous verrez que le premier CSS qui apparaît est le suivant:

.site-header {padding: 1.71429em 0; } article, aparté, détails, figcaption, figure, pied de page, en-tête, hgroup, nav, section {display: block; }

Le premier sélecteur a des points 10 (puisqu'il s'agit d'une classe) et le second possède des points 1 (car les virgules séparent différents sélecteurs), c'est pourquoi il apparaît en haut. Si vous aviez quelque chose comme #header div, ce sélecteur serait certainement le premier à apparaître.

Pourquoi c'est si important?

Parce que pour éditer le thème principal sans éditer ses fichiers CSS, vous devez TOUJOURS utiliser des règles comportant plus de points que celles définies dans le thème principal. Et vous pouvez être intelligent à ce sujet et utiliser un code simple. Par exemple pour écraser cette propriété:

.site-header {padding: 1.71429em 0; }

Vous pouvez ajouter ceci dans votre CSS de thème enfant, mais vous ne devriez pas:

.site-header {padding 15px 0! important; }

Parce que c'est un mauvais code et qu'il est beaucoup plus difficile de l'écraser à nouveau si vous devez le modifier sur une seule page, par exemple. Donc, vous pouvez simplement utiliser ceci:

body .site-header {padding: 15px 0; }

Ce sélecteur a des points 11, ce qui est supérieur au 10 d'origine et ce code sera donc appliqué.

#3 Faites bon usage des fonctions

Le fichier functions.php enfant est le seul fichier qui sera chargé en plus du fichier d'origine. L’équipe de WP propose une solution de contournement intelligente qui vous permet de conserver les fonctions originales et d’ajouter vos propres fonctions. Le problème est que les fonctions du thème enfant seront chargées en premier et le développeur du thème DOIT faire quelque chose comme ceci pour éviter les conflits lors de la déclaration de fonctions:

if (! function_exists ('top_menu')) {function top_menu () {// code froid ici} add_action ('wp_head', 'top_menu'); }

En effet, si vous définissez une fonction dans votre fichier de thème enfant, celle-ci peut remplacer celle d'origine. Si le développeur de thème ne le fait pas de cette façon, vous vous retrouverez avec une erreur PHP moche (puisque la même fonction est créée deux fois).

#4 Apprendre quelques propriétés CSS

Saviez-vous que vous pouvez masquer et ajouter des éléments à l'aide de CSS? Vous aurez besoin d'installer Firebug pour trouver le bon sélecteur, mais vous pouvez masquer un élément en ajoutant le code suivant:

body a {display: none}

Pour ajouter c'est plus compliqué, puisque vous ne pouvez ajouter que de petits textes, si vous voulez un texte «En solde!» Après un prix, par exemple, vous pouvez utiliser ce code:

.price del: after {couleur: rouge; contenu: "En vente!"; }

Que pensez-vous?

Que pensez-vous de ce guide? Envisagez-vous d'utiliser des thèmes pour enfants? Est-ce que vous l'utilisez déjà? Faites-nous savoir en utilisant la section commentaires ci-dessous!

A propos de Rochester Oliveira

Je suis un concepteur de sites Web et un entrepreneur de Itajubá (MG), Brésil. J'aime écrire sur des sujets obscurs et faire des trucs sympas.