Share
L'une des premières choses que j'ai remarquées quand j'ai commencé à utiliser WordPress était à quel point il utilise le mantra du développeur, "Séparation des préoccupations". Dans le monde de la programmation, vous voulez que chaque composant utilise le moins possible les autres composants; cela rend chaque composant plus réutilisable. Themes est un exemple parfait dans WordPress. Ils séparent totalement le design du contenu. Nous pouvons changer de thème et le contenu reste inchangé. WordPress fait quelque chose de similaire avec leur façon de construire sur des thèmes dans WordPress. Au lieu de modifier un thème existant (et de risquer de perdre les modifications lors de la prochaine mise à jour), nous pouvons créer un thème enfant, qui sépare nos modifications du parent. Dans ce tutoriel, je vais vous montrer comment créer un thème enfant simple..
Du Codex WordPress:
En gros, cela signifie que nous pouvons utiliser le thème parent sans modifier ses fichiers. Nous pouvons modifier les CSS, ajouter un type de publication personnalisé ou intégrer notre propre ensemble de fonctions. C'est également la méthode recommandée pour créer un thème basé sur un autre thème..
Outre les thèmes enfants, il existe deux autres moyens de créer un thème basé sur un autre. La première consiste à modifier ce thème. Cependant, si nous faisons cela et que le thème est mis à jour, nous perdrons tous nos changements. La deuxième méthode consiste à copier ce thème dans un autre dossier et à partir du thème. Nous n'avons pas perdu le thème (à condition de l'avoir renommé correctement), mais nous aurions des doublons de tous les fichiers, même ceux que nous n'avons pas modifiés..
"Un thème enfant WordPress est un thème qui hérite de la fonctionnalité d'un autre thème, appelé thème parent, et vous permet de modifier ou d'ajouter à la fonctionnalité de ce thème parent."
Dans ce tutoriel, nous allons modifier le dernier thème par défaut (à partir de 3.2), Twenty Eleven
La première chose que nous voudrons faire après la mise à niveau de WordPress vers la version 3.2 ou le téléchargement et l’installation de Twenty Eleven est de créer son propre répertoire pour notre thème enfant. Dans / wp-content / themes / créer le répertoire vingteleven-enfant. Nous pouvons maintenant commencer à ajouter des fichiers à notre thème enfant.
Un seul fichier est requis lors de la création d'un thème enfant: style.css. C’est ici que nous allons déclarer notre thème et indiquer à WordPress qu’il est l’enfant d’un autre thème. Créez style.css dans le dossier twentyeleven-child et ajoutez les lignes suivantes:
/ * Nom du thème: Twenty Eleven Child URI du thème: http: //example.com/ Description: Thème de l'enfant pour le thème Twenty Eleven Auteur: Votre nom URI de l'auteur: http: //votre-site.com/ Modèle: twentyeleven Version: 0.1.0 * /
La plupart des informations ci-dessus correspondent à ce qui convient dans tout autre thème: nom, lien, crédit d'auteur et version. Cependant, il existe également une ligne pour Template. C'est ici que vous indiquez à WordPress ce qu'il doit utiliser pour le thème parent. Ce doit être le nom du répertoire du thème parent, et il est sensible à la casse.
Une chose à noter avant de commencer à ajouter notre propre CSS personnalisé: le fichier style.css de notre thème enfant remplacera complètement celui du parent. Par conséquent, après nos informations de déclaration de thème, notre première ligne doit importer le code CSS du parent:
Accentsconagua
@import url ("? /twentyeleven/style.css"); Nous sommes maintenant prêts à modifier le code CSS du parent. Si nous souhaitons apporter quelques modifications simples, nous vous conseillons d’utiliser Firefox avec Firebug ou les outils de développement de Google Chrome pour vous aider. Ils sont très utiles! Pour l’instant, ajoutez les lignes suivantes à votre fichier style.css, sous le @importation ligne:
a color: # 254655; body background: # 727D82; header # branding background: # 29305C; couleur: # B3BDC1; en-tête # marque h1, en-tête # marque h2, en-tête # marque a color: # B3BDC1; #respond background: # E7DFD6;
Ces lignes modifieront l’arrière-plan et la couleur de police des zones de corps, d’en-tête et de commentaire. Bien sûr, vous pouvez jouer autant que vous le souhaitez :-)
Si je classais les fichiers de thème WordPress par ordre d'importance, je mettrais style.css et index.php à égalité, car vous en avez besoin pour fonctionner. À la seconde, je mettrais functions.php. Le fichier functions.php vous permet d'ajouter des fonctionnalités personnalisées à votre thème: types personnalisés, prise en charge des menus et des vignettes, barres latérales supplémentaires et modifications apportées à la boucle, entre autres choses..
Bien que functions.php ne soit pas requis pour un thème enfant (rappelez-vous, style.css est le seul fichier requis), il s'agit de la meilleure façon de l'ajouter à vos propres fonctionnalités. Et contrairement à style.css, qui remplace le style.css du parent, le fichier functions.php de notre enfant est chargé. avant les parents. Nous allons créer une zone de widget pour l'en-tête et remplacer l'une des fonctions intégrées de Twenty Eleven..
Tout d'abord, nous allons ajouter la zone du widget. Crée ton functions.php et ajoutez le code suivant:
__ ('Header Widget', 'twentyeleven-child'), 'id' => 'header-widget', 'before_widget' => '',' after_widget '=> "", 'before_title' => '',' after_title '=>'
',)); ?> Ceci enregistrera la zone du widget que nous ajouterons à l'en-tête à l'étape suivante..
Nous allons maintenant remplacer l’une des fonctions intégrées de Twenty Eleven. Les développeurs de Twenty Eleven ont très facilement simplifié la tâche des développeurs de thèmes enfants, car ils ont d'abord vérifié si une fonction du même nom existait. Regardez l'exemple dans vingteleven / functions.php que nous allons modifier:
if (! function_exists ('twentyeleven_posted_on')):: / ** * Imprime le code HTML avec les métadonnées de la post-date / heure actuelle et de l'auteur. * Créez votre propre vingteleven_posted_on à remplacer dans un thème enfant * * @since Twenty Eleven 1.0 * / function twentyeleven_posted_on () printf (__ ('Posté sur par % 7 $ s',' twentyeleven '), esc_url (get_permalink ()), esc_attr (get_the_time ()), esc_attr (get_the_date (' c ')), esc_html (get_the_date ()), esc_url (get_aut_hors (sur c)). , sprintf (esc_attr __ ('Afficher tous les articles de% s', 'twentyeleven'), get_the_author ()), esc_html (get_the_author ())); fin si; Remarquez comment la première ligne vérifie s'il y a une fonction par le nom vingteleven_posted_on () premier. En plaçant une fonction portant ce nom dans le fichier functions.php de notre thème enfant, nous remplacerons la fonction du thème parent.
Note pour les développeurs de thèmes:Si vous souhaitez rendre votre thème plus facile pour les développeurs de thèmes enfants («plugable»), vous devez suivre l'exemple de Twenty Eleven et vous assurer qu'une fonction du même nom n'existe pas pour chacune de vos fonctions personnalisées.!
La fonction imprime une ligne après le titre du message avec la date et les informations sur l'auteur masqué. Nous allons changer un peu cette ligne en utilisant le même appel de fonction. Ajoutez le code suivant à votre functions.php fichier:
function twentyeleven_posted_on () $ link = esc_url (get_permalink ()); $ title = esc_attr (get_the_title ()); $ time = esc_attr (get_the_time ()); $ dateGMT = esc_attr (get_the_date ('c')); $ date = esc_html (get_the_date ()); $ authorURL = esc_url (get_author_posts_url (get_the_author_meta ('ID'))); $ author = esc_html (get_the_author ()); écho ('Posté sur par '. $ auteur.''); La première chose que nous avons faite a été de mettre toutes les valeurs que nous utilisons dans les variables. C’est une de mes préférences personnelles car j’estime que le code est un peu plus facile à lire. Comme vous pouvez le constater, nous n’avons pas trop changé ici. Nous avons d’abord imprimé l’heure ainsi que la date. Deuxièmement, nous avons ouvert la signature afin que les gens puissent voir le lien vers les autres publications de l'auteur..
Encore une fois, même si nous n’avons rien fait de novateur, nous avons pu montrer comment remplacer une fonction de thème personnalisé [correctement codée]. Passons maintenant aux fichiers de modèles réels!
La dernière chose que je veux aborder ici concerne les fichiers de modèle pour le thème enfant. Peut-être voudrons-nous modifier l'en-tête du site, ou la boucle de publication unique, ou même ajouter une page d'archive. Cela et plus est possible en utilisant des thèmes pour enfants. Nous voudrions simplement nommer notre fichier du même nom que celui que nous souhaitons remplacer dans le fichier parent. Ces fichiers, comme style.css, remplacent le fichier du parent. Nous allons modifier l'en-tête et créer un nouveau modèle de page.
Nous allons d'abord faire la tête. Créer header.php, copier le code de twentyeleven / header.php et collez-le dans notre fichier header.php. Une fois cela fait, nous allons remplacer les lignes 104 et 109 () avec l'appel de fonction suivant:
Nous allons maintenant ajouter le code suivant à notre fichier functions.php:
function techild_header_widget () if (! dynamic_sidebar ('header-widget')): get_search_form (); fin si; Ce code fera en sorte que s'il y a des widgets dans la zone Header Widget, nous les montrons, sinon nous montrerons la barre de recherche. Enfin, nous aurons besoin d’un peu de CSS pour adapter notre en-tête aux widgets. Ajoutez ceci à votre fichier style.css:
en-tête # image de marque .widget position: absolute; en haut: 2em; à droite: 7,6%;
Cela va styler le widget de la même manière que le champ de recherche, mais attention. Cette méthode n'est pas exactement à l'épreuve des balles. C'est juste pour montrer la modification des fichiers de modèles dans les thèmes enfants. Voici notre résultat:
Next Up, nous allons créer un nouveau modèle de page. Créer le fichier twentyeleven-child / page-welcome.php et copiez le code de la page.php de Twenty Eleven (vingteleven / page.php). La première chose à faire est de modifier les commentaires en haut pour que WordPress sache qu’il s’agit d’un modèle de page. Remplacez les commentaires en haut par ceci:
/ ** * Nom du modèle: Bienvenue * /
Lorsque nous créons une nouvelle page, nous pourrons utiliser le modèle "Bienvenue". Nous allons maintenant ajouter un message personnalisé en haut de la page. Votre fichier entier devrait ressembler à ceci:
Bienvenue sur mon site web! Je lance une modification du thème WordPress 'Twenty Eleven. N'hésitez pas à fouiller un peu!
Notez qu'entre les divs #primary et #content, nous avons ajouté un div avec la classe welcome. Passons à notre fichier style.css et ajoutons quelques CSS pour cela:
.bienvenue margin: 15px 60px; arrière-plan: # fbffd8; bordure: 1px solide # f6ff96; rembourrage: 15px; text-align: center;
Notre résultat final devrait ressembler à ceci:
Je devrais mentionner que la meilleure façon de le faire serait d'ajouter un champ personnalisé à ce modèle, mais comme je l'ai dit plus tôt, je voulais garder les choses simples afin que nous puissions nous concentrer sur la création du thème de l'enfant..
Bien que l'article devienne un peu long pour que je ré-liste le code dans chacun des fichiers, j'ai inclus le thème de l'enfant que vous pouvez télécharger. Évidemment, nous venons de gratter la surface de la création de thèmes enfants; Mon objectif était de vous donner une bonne idée de la création d'un fichier en fonction de la manière dont WordPress gère chaque type de fichier. Une chose à noter est que lorsque vous référencez des images ou d’autres fichiers de votre thème enfant, vous devez utiliser: get_stylesheet_directory_uri () par opposition à get_template_directory_uri () comme ce dernier sera lié au thème parent.
N'oubliez pas que vous pouvez créer un thème enfant à partir de n'importe quel thème WordPress. Cependant, il existe également un ensemble de cadres de thèmes permettant de créer des thèmes enfants assez détaillés. Parmi les plus populaires, citons Carrington, Thematic et Thesis. Ils ont chacun une courbe d'apprentissage, mais ils sont tous très puissants!
