Share
Un thème WordPress est une collection de fichiers de modèle qui vous permet de modifier l'interface utilisateur, la conception, l'apparence et la convivialité du site. Un thème WordPress peut ne comporter que quelques modifications de conception minimales, voire une logique avancée affichant le dernier message de manière différente des autres ou les messages d'une catégorie particulière dans une section différente de la page d'accueil, etc. Les thèmes WordPress peuvent vont d’un simple ensemble de fichiers à un cadre complexe complet de sorte que d’autres thèmes puissent être construits par-dessus. Dans cet article, nous allons voir comment créer des thèmes enfants pour d’autres thèmes afin d’exploiter le code fourni par le thème parent..
Pour créer un thème enfant, nous devons d’abord créer un dossier dans le dossier wp-content / themes dossier pour notre thème enfant. Ensuite, nous créons un style.css fichier dans notre dossier de thème enfant comme indiqué ci-dessous:
/ * Nom du thème: My Twenty Eleven Child URI du thème: Description: Thème de mon enfant Auteur: Abbas Suterwala URI de l'auteur: Modèle: twentyeleven Version: 1 * /
Une fois que nous avons fait cela, nous devrions pouvoir voir notre thème dans wp-admin, comme indiqué ci-dessous.
Nous pouvons maintenant activer notre thème pour enfants. Une fois que nous aurons activé notre thème enfant et consulté notre blog, nous le verrons déformé car nous n’avons pas fourni de CSS dans notre feuille de style. Ici, nous allons exploiter et réutiliser le style du thème parent et nous allons simplement l'inclure dans notre thème enfant. Puis changez simplement les parties que nous voulons changer. Dans ce cas, nous voulons rendre l'arrière-plan gris. Nous devrions ajouter les lignes suivantes à la style.css:
Accentsconagua
// Cette ligne @import charge la feuille de style à partir du thème parent @import url ("… /twentyeleven/style.css"); // Maintenant nous pouvons remplacer les styles du thème parent… body background: #eeeeee; Maintenant, si nous voyons notre blog, nous le verrons comme ci-dessous
Le thème de l'enfant doit contenir un style.css fichier. Ensuite, le thème de l'enfant peut éventuellement remplacer d'autres fichiers de modèle, tels que author.php, catégorie.php etc. Le framework WordPress cherche d’abord un fichier de modèle dans le répertoire du thème de l’enfant, puis, s’il est introuvable, il le récupérera dans le répertoire parent. Le thème de l'enfant peut également ajouter son propre functions.php d'ajouter ses propres fonctions et fonctionnalités à celles fournies par le thème parent.
L'utilisation d'un thème enfant présente de nombreux avantages, dont les suivants:
Certains des inconvénients des thèmes pour enfants sont les suivants:
Il existe de nombreux cadres de thèmes gratuits et commerciaux pour WordPress qui peuvent être utilisés en tant que thème parent. Certains d'entre eux sont génériques et ajoutent une grande variété de fonctionnalités. Il existe également des cadres thématiques disponibles pour des types de besoins spécifiques, tels que la création d'un site immobilier ou la création d'un site de catalogue de produits, etc..
Certains des cadres de thèmes populaires et gratuits sont:
Pour une liste plus complète des frameworks WordPress, vous pouvez visiter un article intéressant Le Guide de démarrage WordPress Theme Frameworks
Nous allons maintenant changer la conception du thème parent TwentyEleven dans notre thème enfant. Actuellement, supposons que nous voulions une disposition en 2 colonnes avec la barre latérale à droite. Dans ce cas, la mise en page dont nous avons besoin est la même que celle du thème parent. Nous obtiendrons donc cela directement du thème parent et nous ne modifierons pas le thème enfant..
Pour mon thème enfant, je ne veux pas d'image en-tête. Dans TwentyEleven, je peux modifier ou supprimer l'image d'en-tête des options de thème, comme indiqué ci-dessous..
Voici les changements dans la style.css du thème de l'enfant:
/ * Nom du thème: My Twenty Eleven Child URI du thème: Description: Thème de mon enfant Auteur: Abbas Suterwala URI de l'auteur: Modèle: twentyeleven Version: 1 * / @import url ("… /twentyeleven/style.css"); corps, entrée line-height: 1.75em; arrière-plan: # A9D0D6; taille de police: 11,5 pts; couleur: # 5A6466; famille de polices: Kreon, serif; a color: # 2A3436; # site-title a font-family: "Open Sans", sans-serif; taille de police: 3em; #access background: #FFFFFF; #access a text-transform: majuscule; texte-décoration: aucun; couleur: # 1C1C1C; taille de police: 1.2em; #access .current-menu-item> a, #access. ancêtre-menu-courant> a, #access .current_page_item> a, #access .current_page_ancestor> a background: # F2EBDE; bordure: solide 1px # BFB5A4; box-shadow: incrément 0px 0px 0px 1px #fff; ombre du texte: 1px 1px 0px rgba (255,255,255,0,9); #secondary background: # EEF5F6; rembourrage: 20px; bordure: solide 1px # D6E0E2; marge: 0 10 px 0 0; ombre du texte: 1px 1px 0px rgba (255,255,255,1); box-shadow: incrément 0px 0px 0px 1px #fff; .widget a text-decoration: underline; couleur: # 2A3436; .widget a: survol, .widget a: focus, .widget a: active text-decoration: none; # site-generator padding: 40px 40px 0 40px; couleur: # 302F2C; arrière-plan: # F2EBDE; famille de polices: Kreon, serif; bord supérieur: solide 1px # BFB5A4; box-shadow: incrément 0px 0px 0px 1px #fff; ombre du texte: 1px 1px 0px rgba (255,255,255,0,9); .entry-title, .entry-title une font-family: "Open Sans", sans-serif; couleur: # 2A3436; marge en bas: 1em; taille de police: 1.5em; text-transform: majuscule; poids de police: normal; .left-sidebar #secondary marge gauche: 3%; Dans le code ci-dessus, j'ai changé l'arrière-plan à l'aide de la balise body, la conception des éléments de menu à l'aide de l'accès et la barre latérale à l'aide de la balise secondaire. De manière similaire, vous pouvez modifier la conception de n’importe quelle partie du parent en fonction de vos besoins. Le thème se présentera comme ci-dessous:
Pour plus de détails sur la création d'un thème enfant à l'aide de TwentyEleven, consultez l'article Création d'un thème enfant simple à l'aide de Twenty Eleven..
Nous allons maintenant créer un thème enfant pour Thematic. Une fois que nous avons téléchargé le thème thématique et que nous l’avons ajouté à notre wp-content / themes dossier, nous allons ajouter un nouveau dossier pour notre thème de l'enfant appelé mythematicchildtheme. Dans le dossier thématique, il y a un dossier thématiqueamplechildtheme dans lequel il existe des exemples de fichiers pour créer un thème enfant à partir de Thematic. Nous pouvons utiliser ces fichiers comme point de départ et les coller dans notre dossier de thèmes enfants..
Thématique a différentes dispositions déjà définies que nous pouvons utiliser dans notre thème enfant. Pour notre thème enfant, nous utiliserons une mise en page à 3 colonnes. Nous allons apporter quelques modifications à la conception du site, comme suit:
/ * Nom du thème: Mon thème enfant thématique URI thème: Description: Il s'agit d'un thème thématique enfant créé par moi. Auteur: Abbas Suterwala URI auteur: Modèle: thématique Version: 1.0 * / / * Réinitialiser les paramètres par défaut du navigateur * / @import url ( '… /Thematic/library/styles/reset.css'); / * Appliquer des styles de base pour la typographie * / @import url ('… /thematic/library/styles/typography.css'); / * Appliquer une mise en page de base * / @import url ('… /thematic/library/layouts/3c-fixed.css'); / * Appliquer des styles d'image de base * / @import url ('… /thematic/library/styles/images.css'); / * Appliquer les styles et les couleurs de thème par défaut * / / * Il est préférable de copier réellement default.css dans ce fichier (ou de créer un lien vers une copie de votre thème enfant) si vous voulez faire quelque chose de scandaleux * / @import url ( '… /Thematic/library/styles/default.css'); / * Préparer le thème pour les plugins * / @import url ('… /thematic/library/styles/plugins.css'); corps color: # 787878; #header background: # 339900; #footer background: # 339900; #siteinfo a: actif, #siteinfo a: hover color: # 000000; #siteinfo a color: # 000000; #siteinfo color: # 000000; # blog-title a color: # 000000; # blog-description color: # 000000; .aside a color: # 006600; a, a: actif, a: survol color: # 006600; .aside h3 color: # 006600; .entry-title color: # 006600; .entry-title a color: # 006600; .entry-title a: actif, .entry-title a: hover color: # 006600; Le thème se présentera comme suit:
Thematic a également de nombreux crochets dans le cadre de thème dans lequel le thème enfant peut s’accrocher. Prenons le thematic_belowheader accrochez-vous à titre d'exemple et affichez les paroles Hello Dolly fournies avec le célèbre plugin Hello Dolly, écrit par Matt Mullenweg, installé par défaut dans WordPress. D'abord, activons le plugin Hello Dolly depuis l'administrateur.
Puis dans le functions.php dans le thème de l'enfant, ajoutez le code suivant:
Nous allons maintenant afficher au hasard une ligne des paroles de Hello dolly sur la page d'accueil, comme indiqué ci-dessous:
Thematic donne beaucoup de crochets, ce qui permet au thème enfant d'ajouter facilement des fonctionnalités à l'aide de ces crochets. Vous pouvez obtenir une liste de tous les hameçons fournie par Thematic à la page Hameçons du Guide thématique..
WordPress est une excellente plateforme pour créer des blogs et des sites. Il fournit également l’infrastructure permettant de créer des frameworks de plug-in ou des frameworks de thème. Les frameworks de thèmes construits sur WordPress peuvent vous aider à développer rapidement un thème stable et de bonne qualité, tout en préservant l’unicité de votre site. Cela contribue à accélérer le développement et à réduire les coûts. Alors amusez-vous à créer votre thème enfant WordPress.
