Comment personnaliser le style de thème avec des thèmes enfants dans vingt quinze wordpress

A WordPress thème se compose d`un ensemble de fichiers de modèles, feuilles de style, des images et des fichiers javascript. Le thème contrôle la mise en page et la conception que vos visiteurs voient sur le site. Lorsqu`un tel thème est correctement configuré comme thème parent, il permet une thème enfant, ou un sous-ensemble d`instructions, de passer outre ses fichiers. Cela garantit qu`un thème enfant peut modifier sélectivement la mise en page, le style et la fonctionnalité du thème parent.

La meilleure façon de comprendre des thèmes enfants est par exemple. Ici, vous découvrirez comment créer un thème simple de l`enfant qui modifie le style du thème parent. À l`heure actuelle, le thème par défaut WordPress Twenty Quinze.

Le thème Vingt Quinze.
Le thème Vingt Quinze.

Vous avez probablement Vingt Quinze sur votre site WordPress, et vingt Quinze est enfant thème donc prêt à l`emploi, il est un excellent candidat pour la création d`un thème enfant par exemple.

Création d`un thème enfant

Comme thèmes réguliers, un thème enfant doit résider dans un répertoire à l`intérieur du / wp-content / thèmes annuaire. La première étape pour la création d`un thème enfant est d`ajouter le répertoire qui va le tenir. Pour cet exemple, créez un nouveau twentyfifteen-enfant à l`intérieur du répertoire / wp-content / thèmes annuaire.

Pour enregistrer le twentyfifteen-enfant répertoire comme un thème et d`en faire un enfant du thème Vingt Quinze, créer un style.css fichier et ajoutez les en-têtes de thème appropriés. Pour ce faire, tapez le code suivant dans votre code préférée ou éditeur de texte comme Bloc-notes (Windows) ou TextMate (Mac) et enregistrez le fichier style.css:

/ * Thème: Vingt Quinze ChildDescription: Mon enfant magnifique themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentyfifteen * /

En règle générale, vous trouverez les en-têtes suivants dans un thème WordPress:

Video: Part 1 - Black Beauty Audiobook by Anna Sewell (Chs 1-19)

  • Thème: L`utilisateur voit thème ce nom à l`arrière de WordPress.

  • La description: Cet en-tête fournit à l`utilisateur des informations supplémentaires sur le thème. À l`heure actuelle, cet en-tête apparaît uniquement sur la page Gérer les thèmes (choisissez Apparence → Thèmes).

    Video: Young Love: The Dean Gets Married / Jimmy and Janet Get Jobs / Maudine the Beauty Queen

  • Auteur: Cette liste en-tête un ou plusieurs auteurs thématiques. À l`heure actuelle, cet en-tête est affiché uniquement sur la page Gérer les thèmes (choisissez Apparence → Thèmes).

  • Version: Le numéro de version est très utile pour garder la trace des versions obsolètes du thème. Mise à jour du numéro de version lors de la modification d`un thème est toujours une bonne idée.

  • Modèle: Cet en-tête change un thème dans un thème de l`enfant. La valeur de cet en-tête indique WordPress le nom du répertoire du thème parent. Parce que votre exemple thème enfant utilise Vingt Quinze en tant que parent, votre style.css doit avoir un en-tête de modèle avec une valeur de twentyfifteen.

Activez le nouveau thème Vingt Quinze enfants comme thème actif.

Les Vingt Quinze thème enfant qui ne semble pas tout à fait raison.
Les Vingt Quinze thème enfant qui ne semble pas tout à fait raison.

Vous pouvez voir que le nouveau thème ne semble pas tout à fait raison. Le problème est que le nouveau thème de l`enfant a remplacé le style.css fichier du thème parent, mais le nouveau thème de l`enfant style.css fichier est vide. Vous pouvez simplement copier et coller le contenu du thème Parent style.css fichier, mais ce serait perdre une partie du potentiel des thèmes enfants. Au lieu de cela, vous voulez modifier uniquement les styles et / ou fonctionnalités que vous souhaitez modifier et laisser le reste seul.

Chargement du style d`un thème parent

Une des grandes choses sur Cascading Style Sheets (CSS) est comment les règles peuvent remplacer les uns les autres. Si vous listez la même règle deux fois dans votre CSS, la règle qui vient aura priorité.

Par exemple:

a {color:} bleu- a {color:} rouge-

Cet exemple est trop simple, mais il illustre bien le concept. La première règle dit que tous les liens (une tags) devrait être bleu, tandis que le second dit que les liens doivent être rouge. Parce que les règles CSS stipulent que la dernière instruction a la priorité, les liens seront rouges.

En utilisant cette fonctionnalité de CSS, vous pouvez hériter tout le style du thème parent et modifier sélectivement en redéfinissant les règles du thème parent. Mais comment pouvez-vous charger est le thème enfant style.css fichier de sorte qu`il hérite de style du thème parent?

Heureusement, CSS a une autre particularité qui vous aide à faire avec facilité. Il suffit d`ajouter une ligne à ce thème Vingt Quinze enfants style.css fichier:

/ * Thème: Vingt Quinze ChildDescription: Mon enfant magnifique themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentyfifteen * / @ import url ( « ../ twentyfifteen / style.css ») -

Un certain nombre de choses se passent ici, donc nous allons décomposer pièce par pièce:

  • @importer: Cela indique au navigateur de charger une autre feuille de style. En utilisant ce qui vous permet de tirer dans la feuille de style parent rapidement et facilement.

  • url («...»): Cela indique que la valeur est un emplacement et non une valeur normale.

  • («../twentyfifteen/style.css») -: Ceci est l`emplacement de la feuille de style parent. Notez la / twentyfifteen nom du répertoire. Cela doit être changé pour correspondre à la Modèle: valeur dans l`en-tête du CSS de sorte que la feuille de style appropriée est chargé.

Une fois que vous actualisez votre site, vous voyez que la conception du thème des enfants et la mise en page correspondent au thème Vingt Quinze d`origine.

Personnalisation de style du thème parent

Votre Vingt Quinze thème des enfants est mis en place pour correspondre au thème parent Vingt Quinze. Maintenant, vous pouvez ajouter un nouveau style à la vingt de quinze enfants thème style.css fichier. Un exemple simple de la façon dont la personnalisation des œuvres ajoute un style qui convertit tous les h1, h2, h3 et les titres en majuscules.

/ * Thème: Vingt Quinze ChildDescription: Mon enfant magnifique themeAuthor: Lisa Sabin-WilsonVersion: 1.0Template: twentyfifteen * / @ import url ( » ../ twentyfifteen / style.css`) - h1, h2, h3 {text-transform : uppercase-}

Vous pouvez voir comment le thème de l`enfant regarde avec les ajouts de style CSS appliqué - obtenir mieux, est-ce pas?

Le thème de l`enfant mis à jour avec des titres en majuscules.
Le thème de l`enfant mis à jour avec des titres en majuscules.

Video: Suspense: The Lodger

Comme vous pouvez le voir, avec seulement quelques lignes dans un style.css fichier, vous pouvez créer un nouveau thème enfant qui ajoute des personnalisations spécifiques à un thème existant. Non seulement il est rapide et facile à faire, mais vous n`avez pas à quoi que ce soit de modifier dans le thème parent pour le faire fonctionner.

Articles connexes