Création de votre premier thème enfant WordPress
Que vous souhaitiez simplement créer un thème légèrement personnalisé ou quelque chose de complètement unique, la création d'un thème enfant WordPress peut grandement accélérer le processus de développement.
Les thèmes enfants vous permettent de commencer avec les bases d'un thème existant, vous n'avez donc pas à réinventer la roue. Vous pouvez choisir un thème qui a la fonctionnalité et la mise en page de base dont vous avez besoin, mais ensuite personnaliser tout ce que vous envisagez pour créer un thème à partir de rien.
Pour ce tutoriel, nous allons créer un thème enfant basé sur le dernier thème WordPress par défaut, Twenty Eleven. Nous allons également utiliser des plugins pratiques et d'autres astuces pour faciliter encore plus la création d'un thème enfant.
Vous aurez besoin de connaissances de base en HTML et CSS, mais la bonne nouvelle est que pour un thème enfant de base, vous n'avez pas besoin de connaître de PHP! Le thème créé est très basique, mais il vous donnera les éléments de base dont vous avez besoin pour commencer à créer vos propres thèmes, même si vous n'avez jamais créé de thème WordPress auparavant!
Le thème que nous allons créer
Voici un bref aperçu du thème final que nous allons créer:
Un mot sur les thèmes parents
L'étape la plus importante dans la création d'un thème enfant consiste probablement à choisir votre thème parent. Pour ce tutoriel, comme déjà mentionné, nous utiliserons Twenty Eleven. Les raisons à cela incluent le fait qu'il est facilement accessible, gratuit, probablement déjà installé sur une installation WP mise à jour et qu'il est bien codé.
Ce dernier est la chose la plus importante à prendre en compte lorsque vous choisissez votre thème parent: assurez-vous qu'il est bien codé. La raison principale en est que si votre thème parent est bien codé, il sera infiniment plus facile de créer un thème enfant bien codé, car vous n’aurez pas à utiliser de piratage pour faire fonctionner les choses.
Chaque fois que vous souhaitez personnaliser un thème, il est préférable d'utiliser un thème enfant au lieu de modifier directement le thème parent. De cette façon, si une mise à jour du thème d'origine est publiée, votre thème ne sera pas rompu. Et si le thème parent et votre thème sont tous deux bien codés, vous ne remarquerez probablement aucune différence dans le thème mis à jour sur le front-end de votre site.
Thème enfant en un clic
La manière la plus rapide et la plus simple de commencer avec un thème enfant est d'utiliser le Thème enfant en un clic brancher. Installez-le simplement, activez le thème parent sur lequel vous souhaitez que le thème de votre enfant soit basé (s'il n'est pas déjà actif), et cliquez sur "Thème enfant" sous Apparence dans le tableau de bord WP.
De là, entrez un nom pour votre nouveau thème enfant, une courte description et votre nom, puis cliquez sur "Créer un enfant". C'est tout ce qu'on peut en dire. Un mot ou un avertissement: j'ai reçu un message d'erreur après avoir cliqué sur "Créer un enfant", mais le thème enfant a été créé sans accroc.
Vous pouvez également créer un thème enfant à partir de zéro. Pour cela, ouvrez votre éditeur de texte ou de code de votre choix et entrez les informations suivantes (en tenant compte du fait que vous utiliserez le thème parent Twenty Eleven):
/*Theme Name: Your Child Theme's NameDescription: Your theme's description.Author: Your Name HereTemplate: twentyeleven(optional values you can add: Theme URI, Author URI, Version)*/@import url("../twentyeleven/style.css");La partie "Modèle" est ce qui en fait un thème enfant plutôt qu'un thème régulier, alors assurez-vous d'identifier correctement le parent du thème.
Définition des options de thème
Avant de commencer à personnaliser le CSS de votre nouveau thème enfant, assurez-vous de vérifier les options du thème et d'y effectuer des personnalisations. Il est préférable d'apporter des modifications dans le cadre existant du thème si c'est une option, car cela facilite la gestion du code de votre thème.
Pour cette personnalisation, j'ai sélectionné une disposition de contenu sur la gauche avec une barre latérale unique et laissé le jeu de couleurs et la couleur de lien par défaut (pour le moment). J'ai également laissé le fond blanc, l'en-tête avec l'une des images par défaut et la couleur du texte de l'en-tête en noir.
Remarque: Si vous souhaitez désactiver la sélection de couleur dans les options de thème, ajoutez !important aux spécifications de couleur dans votre CSS.
Les bases de l'édition de votre thème
Si vous allez à l'éditeur de thème WordPress, vous verrez une feuille de style la plupart du temps vierge pour votre nouveau thème enfant. La première ligne de votre nouveau fichier CSS (après les informations de thème enfant) importe la feuille de style du thème parent. C'est vital, et il doit rester en haut de votre feuille ou la feuille de style parente sera invalidée et ne sera pas importée.
Une chose que vous pouvez faire à ce stade est d'installer un meilleur plug-in d'éditeur de code pour l'édition de thème. La syntaxe à code couleur facilite considérablement le codage directement dans WP et sera particulièrement utile pour ceux qui ont l'habitude de colorer la syntaxe avec des éditeurs externes. Mon choix personnel est Editeur de code avancé .
Vous voudrez également une sorte d'éditeur de texte pour configurer notre fichier functions.php, de préférence un avec la coloration syntaxique.
Trouver le code à changer
Cela peut être l'une des parties les plus frustrantes du développement du thème enfant: trouver quelles parties du code doivent être éditées et lesquelles peuvent être laissées seules. L'intérêt d'un thème enfant est de faciliter la création et la maintenance du thème. Pour ce faire, nous voulons créer le moins de nouveau code possible.
Pour rendre cela plus facile, vous voudrez faire est d'installer un plugin comme Pyromane . Cela vous permettra de cliquer sur une partie de la conception de votre page et de visualiser les éléments associés. div et classes CSS. Vous pouvez également essayer le code pour voir ce qui fonctionne, puis le copier et le coller dans le CSS de votre thème. Je trouve que le moyen le plus efficace de modifier votre code consiste à garder votre thème frontal ouvert dans un onglet à côté d'un autre onglet avec le tableau de bord WP où vous éditez les fichiers.
Les bases
Commençons par définir des choses comme la couleur d'arrière-plan du corps, la typographie et d'autres bases qui nous donneront la base de notre thème enfant. Ce code configure tout dans l'en-tête, à l'exception du déplacement de notre menu de navigation. Décortiquons en quelques étapes différentes.
Ce premier bloc de code nous donne toute notre typographie de base (nous allons extraire "Droid Sans" et "Dancing Script" de Google Web Fonts; functions.php ):
body, input, textarea, p {color: #000000;font-family: 'Droid Sans', sans-serif;}p {font-size: 14px;line-height: 24px;}h1, h2, h3, h4, h5, h6 {font-family: 'Dancing Script', cursive;}Cette section suivante définit l’arrière-plan du contenu principal et ombre portée .
#page {background: #f5f5dc;-moz-box-shadow: 0 0 10px #67949c;-webkit-box-shadow: 0 0 10px #67949c;box-shadow: 0 0 10px #67949c;}Ensuite, nous apporterons des ajustements sur le titre et la description de notre blog, ainsi que sur la bordure supérieure de l'en-tête et sur la suppression du formulaire de recherche (qui sera remplacé par notre menu de navigation à l'étape suivante).
#site-title a {font-size: 48px;font-weight: 700;line-height: 60px;}#branding {border-top: 2px solid #67949c;}#branding #searchform {display: none;}#site-description {font-size: 18px;margin: 0 270px 3em 0;}Cela nous donne un en-tête qui ressemble à ceci:
Déplacer le menu de navigation principal
La prochaine modification que nous souhaitons apporter consiste à déplacer le menu de navigation de sa position par défaut sous l’image d’en-tête vers le coin supérieur droit, en face du titre ou du logo du blog.
Ce format fonctionne mieux pour les sites ne comportant qu'un petit nombre de pages. Les sites plus grands ou les sites comportant des sous-pages nécessiteront une attention supplémentaire et ne fonctionneront probablement pas bien avec ce type de mise en page.
Voici le code dont vous aurez besoin:
#access {clear: both;display: block;float: right;margin: 0 auto 6px;position: relative;top: -410px;width: 500px;background: none;box-shadow: none;}Votre menu de navigation devrait maintenant être placé au-dessus de l’image d’en-tête, à côté de votre logo. Ensuite, nous allons ajouter des styles à notre navigation et les transformer en boutons au lieu d'une barre solide. Voici le code pour le style de police de base:
#access a {font-family: 'Dancing Script', 'Helvetica Neue',Helvetica,Arial,sans-serif;font-size: 1.4em;font-weight: 700;padding: 0 1em;line-height: 2.666em;}Voici la mise en forme de base du bouton derrière le texte, y compris une belle ombre intérieure:
#access li {background: #84bbc5;margin-right: 15px;-moz-box-shadow: inset 0 0 3px 3px #739ca3;-webkit-box-shadow: inset 0 0 3px 3px #739ca3;box-shadow: inset 0 0 3px 3px #739ca3;}Et voici le code pour ajouter une ombre portée derrière les boutons quand ils survolent (ce qui donne l'impression d'un effet d'animation utilisé):
#access li:hover > a, #access a:focus {background: #84bbc5;color: #EEEEEE;-moz-box-shadow: 0 0 3px 3px #739ca3;-webkit-box-shadow: 0 0 3px 3px #739ca3;box-shadow: 0 0 3px 3px #739ca3;}Maintenant, votre en-tête ressemblera à ceci:
Style de base pour votre barre latérale
Ajoutons quelques styles très basiques pour votre barre latérale. Les changements que nous apportons ici visent principalement à faire en sorte que les barres latérales correspondent au design du reste du site. Voici le code:
.widget a {font-weight: 400;font-family: 'Droid Sans', sans-serif !important;}.widget-title {color: #282828;letter-spacing: 0.1em;line-height: 1.5em;text-transform: none;} le .widget-title est déjà dans une balise H3, il prend donc la police déjà spécifiée.
Et voici à quoi ça ressemble:
Modification du format de poste
Tout d'abord, nous voulons changer le remplissage pour le haut des messages, de sorte que le premier message s'aligne avec le haut de la barre latérale.
.entry-title {padding-top: 0px;}Ensuite, nous modifierons l'icône de commentaire qui apparaît à côté du titre du message sur la page d'accueil. Celui-ci est simple: créez simplement votre nouvelle icône (j'ai créé des versions pour les versions actives et inactives), puis téléchargez-les en utilisant le chargeur de médias de WP. Prenez l'URL pour chacun et insérez-les comme ceci:
.entry-header .comments-link a {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-link.png") no-repeat scroll 0 0;top: 0;}.entry-header .comments-link a:hover, .entry-header .comments-link a:focus, .entry-header .comments-link a:active {background: url("https://blogetic.com/site/wp-content/uploads/2011/11/comment-active.png") no-repeat scroll 0 0;background-color: #f5f5dc !important;} Vous devrez ajouter le !important au background-color attribut pour l'état du survol afin de remplacer le style fait aux liens ailleurs dans le thème. L'image en vol stationnaire est une bulle de texte remplie, alors que l'état normal n'est qu'un contour. Voici le résultat:
Ensuite, nous allons travailler sur le style des commentaires. C'est simple, car tout ce que nous faisons, c'est changer le schéma de couleurs. Voici le code:
#respond {background: none repeat scroll 0 0 #dadabe;border: 1px solid #67949c;}#respond input[type="text"], #respond textarea {background: none repeat scroll 0 0 #FFFFFF;border: 4px solid #b3b398;}#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label {background: none repeat scroll 0 0 #b3b398;box-shadow: 1px 2px 2px rgba(204, 204, 204, 0.8);color: #555555;}#respond input#submit {background: none repeat scroll 0 0 #67949c;}Et voici le résultat final:
Insérer du code dans votre tête ou ailleurs dans votre thème
Ceci est probablement la partie la plus technique de la création d'un thème enfant et n'est nécessaire que si vous souhaitez faire quelque chose comme ajouter des polices Google Web à votre site. C'est exactement ce que nous allons faire ici. C'est le seul moment dans la création de votre thème enfant que vous aurez besoin de travailler avec PHP, et si vous n'avez pas besoin d'insérer quoi que ce soit dans l'en-tête de votre thème ou ailleurs, vous n'aurez pas besoin de travailler avec PHP.
Tout d'abord, créez un fichier functions.php dans votre éditeur de texte ou de code de votre choix. Le code de base que vous utiliserez ressemblera à ceci:
Pour le thème enfant ci-dessus, nous devions insérer du code dans notre en-tête pour associer les polices Web Google appropriées afin que nous puissions les appeler dans notre CSS. Voici comment nous faisons cela (vous pouvez obtenir le link directement depuis Google avec les polices que vous souhaitez utiliser):
Maintenant, vos polices devraient fonctionner correctement! Et toutes les fonctions incluses dans le thème parent d'origine continueront de fonctionner également.
Téléchargez les fichiers de thème
Si vous voulez voir tout le code des fichiers CSS et functions.php, vous pouvez les télécharger ici . Les icônes de la bulle de commentaires sont également incluses.
Conclusion
Créer un thème enfant est incroyablement simple par rapport à la conception et au codage d'un thème à partir de zéro. Avec quelques connaissances CSS de base et un peu de PHP, vous pouvez créer pratiquement n'importe quel type de thème. Les thèmes enfants, dans de nombreux cas, peuvent également être utilisés commercialement (dans la mesure où le thème parent permet une telle utilisation) ou vendus en tant que thèmes stockés (n'oubliez pas de laisser vos acheteurs savoir que le thème requiert un thème parent).
Assurez-vous que votre code est bien écrit, commenté et organisé. De cette façon, si votre thème parent est mis à jour, il est peu probable que votre thème enfant se brise.
Le thème enfant que nous avons créé dans ce tutoriel est très, très basique. Mais cela vous donne les informations dont vous avez besoin pour commencer à concevoir vos propres thèmes. Commencez avec le restyling de base pour vous familiariser avec les choses, puis commencez à explorer les choses que vous pouvez faire avec PHP dans votre fichier functions.php. Les thèmes enfants, construits sur un thème parent génial, peuvent être aussi puissants que tout autre thème disponible. Pour plus d'informations sur les thèmes enfants, consultez le WordPress Codex .
Vous avez d'autres astuces pour créer de super thèmes pour enfants? Faites le nous savoir dans les commentaires!