Share
Dans le dernier volet de cette série, nous avons créé notre cadre de thème, qui consiste en une plate-forme passe-partout simple, dans laquelle nous avons ajouté certaines fonctionnalités que nous utilisons couramment. Nous pouvons maintenant utiliser notre framework de deux manières: en tant que thème enfant et en tant que véritable passe-partout que nous venons de copier et d'éditer. Aujourd'hui, nous allons utiliser notre cadre comme thème pour enfants..
J'ai réalisé un didacticiel sur la création d'un thème enfant simple, mais il est un peu différent cette fois-ci car nous n'avons pas de thème à part entière avec lequel travailler. Nous avons presque le strict minimum en ce qui concerne les styles et les fonctionnalités. Donc, dans cet esprit, allons de l'avant.
Remarque: Pour que ce didacticiel ne prenne pas trop de temps, je pars du principe que vous connaissez bien la construction de thèmes pour enfants pour WordPress.
La première chose à faire est de créer le dossier dans notre répertoire / themes /. J'ai appelé le mien wp-boilerplate-child (très créatif, je sais); vous pouvez nommer le vôtre Comme toujours, nous allons commencer avec notre fichier style.css et la définition du thème:
/ * Nom du thème: Framework URI du thème enfant: http: //example.com/ Description: Thème enfant pour votre thème Framework. Auteur: Votre nom URI de l'auteur: http: //votre-site.com/ Modèle: wp-boilerplate Version: 1,0 * /
N'oubliez pas qu'avec les thèmes enfants, nous avons besoin de cette ligne supplémentaire pour définir le répertoire qui héberge le thème parent. Une fois que cela est établi, WordPress sait où récupérer les fichiers de thème parent. La prochaine chose à faire est d’importer le CSS de notre framework:
Accentsconagua
@import url ("… /wp-boilerplate/style.css"); Ceci est une étape nécessaire si vous ne voulez pas recommencer à zéro, car cela écrasera le CSS du thème parent. N'oubliez pas non plus que cela sera chargé une fois que tous les CSS de notre thème auront été chargés, y compris ie.css..
Maintenant, si vous vous en souvenez, notre framework sans aucune modification ressemble à ceci:
Il convient de garder à l’esprit que, puisque c’est notre cadre, nous le connaissons beaucoup mieux que d’autres; nous l'avons construit selon nos propres styles de codage. Bien que cela puisse sembler similaire à l’autre didacticiel sur les thèmes pour enfants que j’ai fait, une grande différence est que le thème parent est notre propre cadre, construit selon nos propres besoins..
Nous allons ajouter du style, en commençant par le CSS de base. Ajoutez ces lignes de code au code CSS de votre thème enfant:
corps background: # 000000; a, a: visité color: # a2a085; text-decoration: none; #container background: #FFFFFF;
Cela jette les bases de la transformation de notre thème, qui se déroulera principalement dans le CSS. Nous avons modifié certaines valeurs par défaut dans les couleurs de corps, de lien et de conteneur. Maintenant, nous allons rendre notre tête un peu plus attrayante.
en-tête taille de la police: 1.4em; arrière-plan: # D1CFB5; en-tête h1 padding: 10px; en-tête h1 a, en-tête a: visité color: # 69652B; nav background: # ABA0B6; taille de police: 1.5em; rembourrage: 3px; fond de bordure: solide 1px # 221F49; border-top: 1px solide # 221F49; nav a, nav a: visitée color: # 221F49; nav a: survol color: # 4C4B55;
Comme avec nos styles de base, nous avons simplement écrasé les styles d'en-tête et de navigation du framework. J'ai également ajouté d'autres styles à notre thème enfant, qui sont inclus dans ce didacticiel si vous souhaitez prendre une Regardez. Ce que nous avons fini avec était ceci:
Voyons maintenant comment créer un nouveau modèle de présentation que nous utiliserons strictement dans notre thème enfant..
La plupart de nos thèmes sont déjà pris en charge grâce à notre framework, mais cela ne signifie pas que nous ne pouvons rien y ajouter. Dans cette section, nous allons créer une page d'accueil personnalisée avec des modèles de page et un peu de magie fonctionnelle. Créons une nouvelle page appelée page-home.php et ajoutez ceci:
Lire le reste de cette page "'); ?>
Nous avons ici une page assez standard avec le nom du modèle, la boucle et les mêmes balises que celles utilisées sur la page de notre framework. Cependant, j'ai également ajouté une zone de widget juste sous le contenu afin que nous puissions ajouter ce que nous souhaitons à la page d'accueil. Nous devons maintenant définir cette zone de widget dans notre thème via notre fichier de fonctions..
Rappelez-vous que le fichier de fonctions de notre enfant est chargé avant le fichier de fonctions du parent.
Créer un functions.php déposer dans notre thème enfant et ajouter ceci:
__ ('Widgets de la page d'accueil', 'home-widgets'), 'id' => 'zone de la maison-widget', 'description' => __ ('Zone de la page d'accueil du widget', 'wpbp'), 'before_widget' = > '',' after_widget '=> "", 'before_title' => '',' after_title '=>'
',)); ?> Avec cela, nous pouvons maintenant ajouter des widgets à notre page d'accueil! J'ai ajouté un flux RSS. Avant d'appliquer un CSS, il ressemble à ceci:
Bien entendu, vous pouvez styler ce flux comme bon vous semble.
Nous pourrions faire beaucoup plus ici en utilisant la vaste API de WordPress. Nous pouvons utiliser des fonctions pour modifier le modèle de commentaires, créer un fichier de barre latérale vide afin, essentiellement, de supprimer la barre latérale ou de remplacer complètement le pied de page. Les possibilités sont infinies car notre cadre est si léger / simple.
L’un des avantages intéressants de l’utilisation de notre propre système local est que nous pouvons l’améliorer constamment. En fait, je l'utilise davantage comme un passe-partout que je copie et que je modifie (tutoriel à venir), donc le changer pour utiliser un thème enfant me montre quelques améliorations que je pourrais apporter au cadre..
get_sidebar ('different-sidebar')).functions.php fichier depuis que je les utilise régulièrement quand même. L'une des classes est un processeur de formulaire, je n'aurai donc pas besoin d'un plugin pour créer de simples formulaires de courrier électronique..N'oubliez pas que vous avez beaucoup de place pour la personnalisation personnelle, sauf si vous envisagez de rendre public votre cadre..
Ici, nous avons apporté quelques personnalisations de base à notre framework via notre thème enfant. Cette technique est particulièrement utile si vous conservez une structure similaire à votre site et que vous souhaitez simplement effectuer des personnalisations via CSS (pensez à CSS Zen Garden). Il est également utile d’ajouter de nouveaux modèles de page et une fonction personnalisée à ce qui existe déjà. Cependant, comme nous utilisons un framework basic / boilerplate, si nous modifions complètement la structure du thème, nous pourrions aussi bien créer un thème à partir de zéro si nous utilisons un thème enfant, car nous allons probablement remplacer la plupart des éléments. fichiers de modèle. La prochaine fois que je vais copier et coller notre passe-partout et apporter des modifications au thème lui-même pour tirer le meilleur parti du code que nous avons déjà présenté.
