Share
Dans la première partie de la série, j'ai donné un aperçu des préprocesseurs populaires LESS et SASS. J'ai également couvert les cadres auxquels ils sont généralement associés.
Dans la deuxième partie de la série, j'ai plongé dans LESS et en ai détaillé quelques-unes. Nous avons couvert les variables, la nidification et les mixins.
Dans cette partie de la série, je vais expliquer comment structurer logiquement votre .Moins des dossiers. Je vais également expliquer comment connecter tous les éléments à l'aide d'importations et enfin, rapidement, le grossissement.
Nous allons créer un thème enfant pour le thème par défaut Twenty Twelve. Pour ceux d’entre vous qui ne sont pas familiers avec la création de thèmes pour enfants, la seule chose dont nous avons besoin pour créer un thème pour enfants est un style.css fichier. Pour plus d'informations, visitez le WordPress Codex.
Tout d’abord, nous voudrons naviguer dans le dossier themes dans wp-content. Vous devriez voir le vingt douze dossier à l'intérieur d'ici. Nous allons ensuite créer un nouveau dossier et le nommer moins construit. Ouvrez ce dossier.
À l'intérieur de notre nouvelle moins construit dossier, nous allons créer un dossier ici et nommez-le css. Ouvrez ce dossier.
À l'intérieur de la css dossier, créez encore un autre dossier nommé Moins et ensuite l'ouvrir aussi. Dans ce dossier, nous voudrons créer un nouveau fichier., style.less. Ouvrez-le.
Pour un contrôle ponctuel, assurez-vous que vous avez maintenant le chemin suivant vers votre style.less fichier:
wp-content / themes / lessbuilt / css / less / style.less
Maintenant que nous avons le Moins dossier créé. Nous ajouterons tous nos .Moins fichiers dans ce dossier.
La première chose que nous allons vouloir faire dans notre style.less fichier est ajouter le code pour nous permettre de spécifier que nous créons un thème enfant. S'il vous plaît ajouter ce qui suit:
Accentsconagua
/ * Nom du thème: Thème moins construit URI: http://wp.tutsplus.com Description: Thème enfant pour le thème Vingt Douze Auteur: Jason Bradley URI Auteur: http://everchangingmedia.com Modèle: vingttwelve Version: 0.1.0 * / @import url ("… /twentytwelve/style.css"); C'est tout ce dont nous avons besoin pour commencer. Ensuite, nous allons créer l'autre .Moins fichiers et ensuite les attacher tous ensemble ici dans style.less.
Le premier fichier que je vais suggérer de créer est un variables.less fichier. C’est là que nous allons stocker toutes les variables que nous utiliserons pour notre thème enfant. Ce sera accessible à tous nos .Moins fichiers dans notre Moins dossier.
Ouvrez le nouveau fichier et collez ce qui suit:
// variables.less // Couleurs @white: #fff; @gray: # 666; @ gris foncé: # 333; @ grey-light: #eee; @blue: # 4d8b97; @ blue-dark: # 335c64; // Contenu @ body-background-color: @gray; @ couleur de la carrosserie: @ gris-clair; @ content-background-color: @ gray-dark; // En-tête @ site-title-color: @white; @ site-title-color-hover: @blue; @ site-description-color: @ grey-light; // Liens @ links-color: @blue; @ links-color-hover: @ blue-dark; // Navigation @ menu-items-color: @ gray-light; @ menu-items-color-hover: @blue; @ menu-items-color-active: @white; // Articles @ entry-title-color: @white; @ border-color: @gray; // Widgets @ search-form-background-color: @gray; @ search-form-border-color: @gray; @ search-form-text-color: @white;
Le prochain fichier que nous allons créer est un mixins.less fichier. La majorité des modifications que nous allons apporter concernent les couleurs des liens. Je vais créer un mixin qui prend une couleur de lien et une couleur de survol de lien. Il retournera le style en fonction de ce qui y est passé.
Tout d'abord créer un mixins.less fichier. Ouvrez ce fichier et collez-y les éléments suivants:
// mixins.less .links (@ link-color: @blue, @ link-color-hover: @ bleu-foncé) a color: @ link-color; &: hover color: @ link-color-hover;
Le fichier suivant contiendra divers styles comme le corps et les liens. Créer un misc.less fichier puis collez-le dans:
// misc.less body couleur de fond: @ corps-couleur de fond; couleur: couleur de corps; .site background-color: @ content-background-color; .liens();
Il est suggéré de garder tous les styles de navigation ensemble afin que nous puissions savoir rapidement où aller pour éditer nos menus..
Créer un navigation.less fichier et y ajouter ce qui suit:
// navigation.less .main-navigation li .links (@ éléments de menu-couleur, @ éléments de menu-couleur-survol); .current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor a color: @ menu-items-color-active;
Ensuite, nous allons ajouter le style pour le titre et la description du site dans l'en-tête..
Créer un header.less fichier et y ajouter ce qui suit:
// header.less .site-title a color: @ site-title-color; .site-header h1, h2 .links (@ site-title-color, @ site-title-color-hover); .site-header h2 color: @ site-description-color;
Ensuite, nous voudrons ajouter du style à nos articles. Nous allons changer la couleur du titre et les couleurs du lien de l'en-tête et du pied de page.
Créer un posts.less fichier et y ajouter ce qui suit:
// posts.less .site-content article border-bottom: 4px double @ border-color; .entry-header .entry-title .links (@ entry-title-color); .entry-header, .entry-meta .links ();
Nous voulons aussi que les titres de nos pages soient en blanc. Je vous suggère également de mettre toutes les différences de style que vous souhaitez pour les pages par rapport aux publications ici aussi.
Créer un pages.less déposer et ajouter ce qui suit:
// pages.less .entry-header .entry-title color: @ entry-title-color;
Je voulais ajouter une bordure à la gauche de la barre latérale, je vais donc l'ajouter dans un sidebar.less fichier. Créez ce fichier et ajoutez ce qui suit:
// sidebar.less #secondary border-left: 1px solid @ border-color; padding-left: 20px;
Nous voulons que les titres de widgets soient blancs et que les liens de nos widgets correspondent aux autres liens de notre thème enfant. Je veux aussi changer les couleurs du formulaire de recherche.
Il est suggéré de mettre n'importe quel style pour les widgets dans widgets.less et garder le style pour le conteneur autour d'eux sidebar.less.
Créer un widgets.less fichier et y ajouter ce qui suit:
// widgets.less .widget-area .widget .widget-title color: @ grey-light; .liens(); // Formulaire de recherche #s, #searchsubmit background: @ search-form-background-color; border-color: @ search-form-border-color; Couleur blanche;
Le dernier fichier que nous allons créer est footer.less. Il contiendra n'importe quel style pour le pied de page du thème de notre enfant.
Créer un footer.less fichier et y ajouter ce qui suit:
// footer.less footer [role = "contentinfo"] .links ();
Nous avons donc créé tous nos individus .Moins des fichiers pour décomposer nos modifications de style en une structure logique. Vous auriez dû voir que, lors de la création de nos fichiers, nous utilisions les variables créées dans variables.less dans tous nos autres .Moins des dossiers. Nous avons également utilisé notre .liens() mixin de mixins.less beaucoup aussi.
La façon dont nous allons connecter tous ces .Moins fichiers ensemble est en utilisant des importations.
Les importations en CSS et MOINS sont similaires à celles des autres langues. Vous dites à votre compilateur que vous voulez que votre fichier actuel connaisse et utilise d'autres fichiers. C'est comme importer une bibliothèque ou un framework que vous utilisez dans .NET, Ruby gems, etc..
La syntaxe pour importer un fichier avec LESS est identique à celle de CSS. Depuis tous nos .Moins les fichiers sont dans le même dossier, nous allons utiliser les éléments suivants:
@import "filename.less";
Ceci indiquera à notre compilateur MOINS que lorsque vous compilez ce fichier, vous devez également utiliser cet autre fichier..
Dans notre style.less fichier, nous voudrons ajouter des importations pour chacun des .Moins fichiers que nous avons créés. Cela fera également en sorte que tout .Moins fichier que vous importez dans style.less sera connecté aussi bien.
Par exemple, si nous importons variables.less et widgets.less dans notre style.less fichier, les variables que nous avons définies dans variables.less sera accessible dans widgets.less.
/ * Nom du thème: Thème moins construit URI: http://wp.tutsplus.com Description: Thème enfant pour le thème Vingt Douze Auteur: Jason Bradley URI Auteur: http://everchangingmedia.com Modèle: vingttwelve Version: 0.1.0 * / // Importer les styles de thème parent @import url ("… /twentytwelve/style.css"); /* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ CONTENU /\/\/\/\/\/\/ \ / \ / \ / \ / \ / \ / \ / \ // \ / \ / \ / \ 1. Divers - Variables - Mixins - Divers 2. Navigation 3. En-tête 4. Posts 5. Pages 6. Barre latérale 7. Widgets 8. Pied de page * / / * ---------------------------------------------- ---------------------------- 1. Divers * / // Variables @import "variables.less"; // Mixins @import "mixins.less"; // Misc @import "misc.less"; / * ---------------------------------------------------- ---------------------- 2. Navigation * / @import "navigation.less"; / * ---------------------------------------------------- ---------------------- 3. En-tête * / @import "header.less"; / * ---------------------------------------------------- ---------------------- 4. Posts * / @import "posts.less"; / * ---------------------------------------------------- ---------------------- 5. Pages * / @import "pages.less"; / * ---------------------------------------------------- ---------------------- 6. Barre latérale * / @import "sidebar.less"; / * ---------------------------------------------------- ---------------------- 7. Widgets * / @import "widgets.less"; / * ---------------------------------------------------- ---------------------- 8. Pied de page * / @import "footer.less"; Maintenant que nous avons tous nos .Moins les fichiers créés et tous importés dans notre style.less fichier, nous voudrons définir le chemin de sortie de style.less dans CodeKit.
Nous avons couvert comment définir la sortie de notre .Moins fichier dans le post précédent.
L’avantage de l’utilisation de LESS pour la création et la compilation de vos CSS est que vous pouvez choisir le format de compilation souhaité. Cela signifie que vous pouvez soit le compiler dans sa forme habituelle, soit réduire au minimum vos fichiers..
Il est certainement suggéré de réduire tous les éléments de votre site. .css des dossiers. Plus le fichier est petit, plus votre site va se charger rapidement. Vous voulez la plus petite taille de fichier car chaque page ne se chargera pas et ne sera pas vue par l'utilisateur jusqu'à ce que .css les fichiers sont chargés. Votre vitesse de chargement de page influe également sur votre référencement.
Avec CodeKit, il est aussi simple de modifier le réglage de votre sortie que de changer le Style de sortie à Minified. Maintenant, chaque fois que vous modifiez l'un de vos .Moins vos fichiers, CodeKit les compilera automatiquement et les minisera dans le thème de votre enfant style.css fichier.
J'ai passé en revue les meilleures pratiques pour structurer votre .Moins fichiers dans votre thème ou thème enfant. J'ai aussi parlé de la structure des dossiers et de l'endroit où placer votre .Moins des dossiers.
Je vous ai guidé dans la création de tous les .Moins fichiers et a parlé de la façon de les connecter tous à votre style.less fichier en utilisant imports. Enfin, j'ai parlé de l'endroit où définir le chemin de sortie de votre style.less fichier et comment avoir CodeKit minify votre .Moins fichiers quand il compile.
J'ai aussi ajouté le moins construit thème enfant à GitHub afin que vous puissiez le fourrer ou le télécharger.
