Share
La dernière fois que nous avons utilisé notre cadre comme thème enfant, nous avons créé un thème totalement nouveau qui dépend du cadre. Aujourd'hui, nous allons utiliser notre framework comme un passe-partout, en copiant le dossier et en le modifiant directement..
Maintenant, certaines personnes pourraient remettre en question le raisonnement derrière cela, et c'est juste. Pourquoi changerions-nous le cadre lui-même? Mon intention initiale pour ce cadre était en réalité de n'être qu'un passe-partout - quelque chose que je pourrais copier, coller et modifier - à la place du Boilerplate HTML5. Pour cette raison, la plupart du temps, j'utilise mon passe-partout, je ne fais que copier et coller..
Cette méthode présente également des avantages. Si, par exemple, vous utilisez une conception très différente, vous finirez par réécrire la plupart des pages de modèle. Le principal raisonnement derrière la création de ce cadre était de réutiliser mes CSS et des fonctions plus communes. Il en a été de même pour créer un en-tête, un pied de page, un index, etc. afin que le thème fonctionne. Bien que j'ai essayé de le rendre aussi générique que possible, je voulais aussi le garder léger. Pour cette raison, il n’existe pas de moteur permettant d’injecter du code dans différentes parties du thème, comme dans Themaic ou d’autres frameworks plus volumineux, ce que je préfère. Comme je l'ai dit dans la partie 1, je ne voulais pas créer une nouvelle API pour que les gens sachent qu'il existe déjà une API WordPress..
Avant de commencer, nous devrions définir quelques objectifs pour l’utilisation du cadre comme un modèle standard. La première est que nous ne devrions modifier que les fichiers à modifier. N'oubliez pas qu'en dehors de notre en-tête et de notre pied de page, nous avons essayé de rendre les autres pages aussi génériques que possible. Cela signifie que si CSS peut être utilisé pour arranger ce qui existe déjà, nous pourrions aussi bien l'utiliser car cela représente moins de travail (de modification) pour nous. Nous devrions également être conscients de ce qui est dans nos fichiers de thème. Nous avons 2 zones de widgets (une dans le pied de page) et quelques fonctions conçues pour être réutilisées. Nous devrions les utiliser si nous le pouvons. Cela étant dit, voici un petit rappel de ce par quoi nous partons:
La première chose à faire en premier: copions et pageons notre framework et préparons-le à l'utilisation. Je viens de copier mon dossier / wp-boilerplate / et de le renommer / wp-boilerplate-copy / (je reviens avec les noms des créations). Comme toujours, nous allons modifier notre fichier style.css:
/ * Nom du thème: URI du thème de copie de la structure: http: //example.com/ Description: Copie de votre thème de la structure Auteur: Votre nom URI de l'auteur: http: //votre-site.com/ Version: 1.0 * /
Rappelez-vous, nous n'avons pas besoin de modèle ligne cette fois-ci parce que ceci est une copie directe du cadre.
Avant de plonger dans le CSS, considérons les changements structurels que nous souhaitons apporter. Je voudrais faire quelques choses à la conception globale du site. La première consiste à placer la navigation au-dessus du nom du site et de la barre de recherche (que nous ajouterons également). J'aimerais aussi que les barres d'en-tête et de pied de page étendent la largeur de l'écran de l'utilisateur, tout en maintenant le contenu à une largeur définie de 960 pixels. Voici le produit final sur lequel nous allons travailler:
Ce que nous ferons ensuite est de modifier l'en-tête. Voici tout dans header.php après le étiquette:
">
Vous devriez remarquer quelques choses. J'ai changé l'ID de conteneur principal en "wrapper" et ajouté une classe "contenir". C'est pour ne pas confondre les deux. Le #wrapper est toujours appliqué à la page entière, mais comme nous voulons que l'en-tête et le pied de page étendent toute la largeur de l'écran de l'utilisateur, nous devons supprimer la définition de la largeur. Cependant, comme nous souhaitons toujours que le contenu actuel soit maintenu à notre largeur d'origine de 960 px, nous devons créer une classe distincte que nous utiliserons pour plusieurs sections de contenu. Voici à quoi ressemble le CSS pour #wrapper et .contain:
#wrapper text-align: left; fond: #FFFFFF; couleur: # 333333; .contain width: 960px; marge: 0 auto;Comme vous pouvez le constater, nous avons déplacé les informations relatives à la largeur et à l’alignement sur .contain. Nous allons maintenant modifier footer.php pour qu'il corresponde à header.php:
Accentsconagua