Un guide pour le développement de thèmes pour enfants WordPress

Les développeurs WordPress commencent à utiliser des thèmes enfants pour un certain nombre de raisons. Ils vous permettent de personnaliser une mise en page unique par-dessus un autre thème existant. Ceci est parfait pour les débutants qui veulent jouer avec la construction de leurs propres thèmes.

De plus, de nombreux modèles haut de gamme publient de nouvelles mises à jour au fil du temps. Si vous apportez des modifications à des fichiers de thèmes principaux, ils seront écrasés lors de la mise à jour, mais les thèmes enfants seront séparés et soigneusement rangés. Cela signifie que vous pouvez créer des thèmes premium existants et gagner du temps..

Dans ce guide, je souhaite présenter les concepts de base de la création d'un thème enfant WordPress et expliquer pourquoi c'est une si bonne idée..

Commencer

Les thèmes pour enfants ne sont pas aussi difficiles qu'ils peuvent paraître. Les avantages de travailler à partir d'un thème parent signifient que vous n'avez pas besoin d'écrire tout le code HTML / CSS à partir de zéro. Un thème enfant utilisera automatiquement tous les fichiers de modèle que vous incluez, tels que sidebar.php ou footer.php. Mais s’ils manquent, votre thème enfant extraira les mêmes fichiers de son parent.

Cette fonctionnalité offre une énorme liberté pour personnaliser les modèles existants. C'est également idéal pour retoucher des zones autour de votre site Web lors d'événements spéciaux, tels que l'ajout de motifs de conception pour Noël ou le nouvel an..

Vos fichiers requis

Vous n'avez besoin que d'une seule feuille de style .css pour configurer un thème enfant dans WordPress. Vous devez également créer un nouveau répertoire dans le répertoire. / wp-content / themes dossier qui hébergera le thème de votre enfant. Faites attention que vous ne sont pas créer ce dossier à l'intérieur du thème parent, mais juste à côté dans le même répertoire de thèmes.

Les développeurs incluent souvent un fichier functions.php et screenshot.png dans le même dossier que votre nouveau fichier CSS. La capture d'écran est affichée dans votre panneau d'administration WordPress et le fichier de thème des fonctions peut être utilisé pour des tonnes de modifications du backend.

Mais pour l'instant, nous devrions nous concentrer sur la feuille de style principale. Ceci est communément appelé style.css et inclut un en-tête de commentaire avec les méta-informations clés. Cela est important car votre thème ne sera affiché en tant qu'enfant si vous incluez le nom de répertoire du parent. Ci-dessous un exemple de commentaire d'en-tête:

 / * Nom du thème: Twenty Eleven Child URI du thème: http: //example.com/ Description: Thème de l'enfant pour le design Twenty Eleven Auteur: Jake Rocheleau Auteur URI: http: //www.hongkiat.com/blog/ Modèle: twentyeleven Version: 0.1 * /

La valeur pour modèle devrait être le nom du répertoire pour le thème parent accompagné. En dehors de cela, toutes les autres balises doivent être familières avec les thèmes WordPress standard..

Bien que tous les modèles PHP parent soient utilisés, le fichier style.css du parent d'origine sera ne pas être importé automatiquement. Si vous souhaitez supprimer les styles d'origine, vous devrez l'inclure en haut du document style.css de votre enfant. Vous trouverez ci-dessous un exemple incluant le thème WP Twenty Eleven.

 @import url ("… /twentyeleven/style.css");

Configurer de nouveaux styles

L'application de règles CSS à votre thème est aussi simple que la modification de l'original. Si vous savez quels éléments vous devez cibler, utilisez les mêmes sélecteurs dans votre propre thème enfant..

Nous pourrions faire une démonstration en apportant des modifications très simples aux liens et aux paragraphes. J'ai utilisé du code du thème original Twenty Eleven pour cibler les différents éléments. Il est parfois nécessaire d’utiliser un sélecteur plus spécifique pour remplacer la conception plus ancienne..

 body padding: 0 1.4em;  #page margin: 1.667em auto; largeur maximale: 900px;  a color: # 5281df; texte-décoration: aucun; famille de fontes: Calibri, Tahoma, Arial, sans-serif;  a: focus, a: actif, a: hover text-decoration: underline;

Dans ces modifications, j'ai réduit la taille globale du corps et également supprimé un rembourrage des bords. Tous ces sélecteurs peuvent être trouvés énumérés dans le document original .css. Il est à noter que je modifie également certaines propriétés pour tous les liens d'ancrage qui incluent une pile de polices et un choix de couleurs différents..

Les choses importantes

CSS a une déclaration spéciale pour marquer la priorité au-dessus des autres styles. La syntaxe est affichée comme !important commençant par le point d'exclamation et se terminant à la fin de votre propriété CSS. Cela est nécessaire si les styles en cascade d'un thème parent remplacent vos propres règles personnalisées..

 a color: # 5281df! important; texte-décoration: aucun; famille de fontes: Calibri, Tahoma, Arial, sans-serif;

Ci-dessus, j'ai copié mes modifications d'origine et modifié la couleur du texte d'ancrage avec une clause importante. Cela aura priorité sur tous les autres styles de la même profondeur de sélecteur. Des éléments plus définis (tels que #accès li: survol> a) auront généralement leur propre style, à moins que le Couleur était encore hérité de notre sélecteur d'origine. Dans ce cas, notre thème parent ne configure pas une propriété font-family sur des liens d'ancrage, nous ne rencontrons donc aucun problème d'héritage..

Si vous rencontrez des difficultés pour conserver vos modifications, essayez d’ajouter une de ces marques importantes à la fin de votre relevé de propriété. Ce n'est pas la solution idéale à tous les problèmes d'héritage, mais cela s'avère beaucoup plus pratique que vous ne le pensez.

Clonage des fonctions.php

Contrairement à la feuille de style principale, votre thème enfant importera automatiquement les fonctions de son parent. Cela signifie que vous n'avez pas besoin de copier le code PHP pour l'activer dans votre nouveau thème. Cependant, si vous souhaitez redéfinir certaines des fonctions, vous pouvez en créer un autre, functions.php, et écrire votre nouveau code avec les modifications éventuelles..

A titre d'exemple, j'ai construit une fonction qui analyse quelques fichiers JavaScript lorsque le modèle est lancé. Cela supprimera toutes les anciennes versions des scripts jQuery et SWFObject, tout en ajoutant simultanément les versions les plus récentes à la wp_head surface.

 // file d'attente des fichiers js pour la fonction de chargement mytheme_js () if (is_admin ()) return; wp_deregister_script ('jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ('jquery'); wp_deregister_script ('swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ('swfobject');  add_action ('init', mytheme_js);

Je dois signaler que si vous importez du code à partir du fichier parents functions.php, vous devrez utiliser un nom de fonction différent. Sinon, PHP générera une erreur fatale et vous devrez FTP sur le serveur pour corriger l'erreur..

Travailler avec des fichiers de thème

La catégorie de thèmes la plus large est la création de dispositions et de types de page personnalisés. Par défaut, votre thème enfant héritera de tous les fichiers de thème de son parent. Mais vous avez la possibilité de créer de nouveaux fichiers de thème enfant et WP les enregistrera comme modèle "principal"..

Par exemple archive.php et index.php sont utilisés pour afficher les archives de la poste et l'écran de la page d'accueil, respectivement. Si vous souhaitez apporter des modifications nécessitant des modifications du code HTML, il serait alors plus sûr de cloner les fichiers parents et de les modifier dans le répertoire theme de l'enfant..

Modèles de page personnalisés

Pendant que nous parlons de fichiers modèles, je souhaite également introduire une fonctionnalité de WordPress avec laquelle beaucoup ne sont pas familiers. Vous pouvez créer des modèles de page et de publication que vous pourrez sélectionner dans le panneau d'administration lors de la création d'un nouveau contenu. Même si le thème parent ne dispose pas du nouveau fichier de modèle personnalisé, WordPress utilisera toujours l’enfant au lieu d’un page.php ou single.php.

Commencez par créer un nouveau fichier nommé page-offer.php. Ce sera un “offre spéciale” page promotionnelle dont le thème est différent de tous les autres. Ici, vous pouvez copier votre code de page d'origine ou même créer le thème entièrement à partir de rien. Le seul code dont nous avons besoin pour informer WordPress de ce nouveau modèle est une configuration de commentaire en PHP.

Une autre alternative à cette méthode consiste à créer des pages personnalisées nommées d'après le numéro d'identification unique. Donc, au lieu de charger la valeur par défaut archive.php pour les pages d’auteurs, vous pouvez créer un fichier tel que author-ID.php où ID est le numéro d'identification WordPress unique de l'utilisateur. Bien que ce système soit plus éprouvant, vous devez créer un nouveau fichier de modèle pour chacun des auteurs sur votre site..

Cela devient plus utile si vous pouvez combiner ces deux techniques avec d’autres fichiers modèles. Notamment les catégories et les balises fonctionnent bien avec leurs propres fichiers de thème. De même, si vous créez un lien vers des pièces jointes dans votre contenu, vous devrez envisager les différentes dispositions de modèle possibles pour chaque type MIME. J'ai inclus la hiérarchie de modèles ci-dessous pour une pièce jointe d'image JPEG simple:

image.php
jpeg.php
image_jpeg.php
pièce jointe.php

Outils WordPress utiles

WordPress lui-même a un système de plugins polyvalent qui peut gérer beaucoup de personnalisations. Puisque les thèmes pour enfants sont si nouveaux, il n’ya pas (encore) de lancements de versions tierces. Cependant, il existe quelques outils que vous pouvez tester pour rendre votre temps de développement un peu plus court.

Une mention évidente est le plugin One-Click Child Theme construit et testé pour la dernière version de WordPress 3.x. Il ajoute un lien de menu dans votre administrateur “Des thèmes” section pour construire automatiquement un enfant en utilisant votre thème actif. C’est fantastique si vous ne voulez pas jouer avec FTP et cherchez à jouer avec de nouvelles idées.

Si vous envisagez de modifier ces fichiers dans le panneau d'administration, vous bénéficierez également d'une mise en évidence plus claire de la syntaxe. Ceci n'est pas proposé par défaut dans WordPress, mais vous pouvez installer l'éditeur de code avancé pour certaines fonctionnalités bien améliorées. Cela facilite la gestion des blocs de code PHP et HTML / CSS..

Ressources supplémentaires

Outre tous les conseils de ce guide, je souhaite partager un ensemble de liens importants pour les développeurs de thèmes. Il y a déjà tellement d'excellents articles et thèmes d'enfants gratuits que vous pouvez consulter pour approfondir ce sujet. J'ai ajouté une merveilleuse collection de ces ressources ci-dessous:

8 thèmes gratuits pour vingt et onze enfants
WordPress Online Codex »Thèmes pour enfants
Comment construire un thème pour enfants WordPress à l'aide de crochets et de filtres
Quelques mots sur les thèmes de l'enfant
Comment créer, modifier et utiliser des thèmes pour enfants dans WordPress

Conclusion

J'espère que le processus de création de thèmes enfants WordPress sera plus clair après la lecture de cet article. J'ai essayé d'expliquer comment les thèmes enfants peuvent hériter des modèles CSS et PHP d'un parent. En outre, il est très simple de manipuler des fichiers spécifiques et de créer vos propres thèmes..