Share
En tant que développeurs, nous devrions toujours rechercher les moyens d'accélérer et d'automatiser notre flux de travail autant que possible, mais ce processus n'est pas toujours simple. Nous devons nous rappeler de compiler, de minimiser, de concaténer et de rendre nos fichiers plus efficaces pour assurer des temps de chargement plus rapides à nos utilisateurs finaux tout en conservant une structure de fichier organisée qui nous permet d’appliquer facilement les modifications. Heureusement, il existe des outils qui nous aident dans ce processus et je voudrais partager comment je les ai mis en place pour améliorer le développement de mon thème WordPress..
Nous savons tous que nous devrions optimiser nos fichiers CSS et JavaScript avant de déployer notre site WordPress. Bombarder nos feuilles de style avec @importation déclarations ou y compris plusieurs fichiers en utilisant > Les balises ne sont pas le moyen le plus efficace, car elles augmenteront le nombre de requêtes que le navigateur doit faire lors du chargement de nos sites. Changer cela manuellement pourrait être une tâche ardue, ajoutons le fait que nous devrions également optimiser nos images et nos pages HTML - nous avons beaucoup de travail à faire..
Heureusement, certaines personnes très intelligentes ont créé d'excellents outils qui peuvent nous aider à rendre notre flux de travail aussi simple que possible:
J'aimerais mettre l'accent sur la mise en œuvre de ces technologies pour le développement de thèmes WordPress. Je ne veux pas donner une analyse approfondie de ces outils car il existe déjà dans le réseau Tuts + des articles qui expliquent comment les installer et les configurer, tels que:
Sans plus tarder, je vais développer un petit thème de test décrivant les étapes à suivre pour intégrer ces outils ensemble..
Nous utiliserons le kit Nettuts + Fetch pour télécharger la dernière version de WordPress. Bien entendu, si vous utilisez un environnement de développement intégré autre que Sublime Text 2, vous devrez utiliser une méthode différente..
Pour notre thème de test, nous allons créer la structure de fichier suivante:
Examinons rapidement chaque dossier et fichier et voyons à quoi ils servent:
functions.php - Vous pouvez inclure toutes les fonctions dont vous avez besoin dans ce fichier, je commence à charger jQuery dans mon dossier. wp_head action (les meilleures pratiques recommandent de charger jQuery et d’autres scripts avant la balise body de fermeture, mais les plugins aiment charger des scripts personnalisés dans wp_head et s’ils s’appuient sur jQuery, ils ne fonctionneront pas), je charge également mes scripts dans le wp_footer action (nous n'avons pas encore créé ce fichier).
Accentsconagua
function jvs_theme_setup () // Mettre en file d'attente jQuery wp_enqueue_script ('jquery'); // Mise en file d'attente de scripts de thème personnalisés dans le pied de page wp_enqueue_script ('scripts personnalisés', get_bloginfo ('template_url'). '/Js/script.min.js', array ('jquery'), false, true); add_action ('after_setup_theme', 'jvs_theme_setup'); index.php - Rien de bien spécial ici, juste un fichier que je préfère dans tous mes projets, notez que la feuille de style principale est appelée après wp_head cela nous permet de remplacer les styles personnalisés ajoutés par les plugins sans utiliser méchant !important déclarations.
><?php wp_title(' | '); ?> >
Vous avez peut-être remarqué que ni le style.css ni script.min.js les fichiers existent encore, ne vous inquiétez pas, nous nous en occupons.
Nous devons d’abord configurer notre config.rb fichier puisque cela indiquera la boussole où se trouvent nos feuilles de style et comment nous voulons les compiler, nous les stockerons dans le src dossier:
# Répertoires de thèmes: http_path = "" css_dir = "…" sass_dir = "… / sass" images_dir = "… / img" javascripts_dir = "… / js" # Vous pouvez sélectionner votre style de sortie préféré ici (peut être remplacé par la commande line): output_style =: compact # Pour activer les chemins relatifs vers les actifs via des fonctions d’assistance au compas. relative_assets = true # Pour désactiver les commentaires de débogage qui affichent l'emplacement d'origine de vos sélecteurs. # line_comments = false
Rien de spécial ici, cela signifie simplement que Compass cherchera notre .scss fichiers à l'intérieur du toupet dossier et placez les feuilles de style compilées dans le dossier racine de notre thème. Si vous souhaitez en savoir plus sur la configuration du fichier de configuration, il vous suffit de vous reporter à la documentation officielle..
Revisitons notre toupet dossier à nouveau et voir ce que nous pouvons faire maintenant.
Maintenant, nous pouvons séparer les styles associés dans leurs propres fichiers dans un sous-dossier appelé partiels et avoir un seul style.scss fichier où pouvons-nous mettre les principaux styles qui devraient ressembler à ceci:
// Bibliothèque de boussole @import "compass"; // Variables globales @import "partials / base.scss"; // Normalize elements @import "partials / normalize.scss"; / * == | == Styles primaires ======================================= =========== Auteur: =================================== ==================================== * / // Les principaux styles vont ici / * == =============================================== ================== * / // Styles CSS spécifiques à WP @import "partials / wp.scss"; // Classes d'assistance non sémantiques @import "partials / helpers.scss";
Remarquez comment nous avons préfixé les fichiers partiels avec un trait de soulignement. Ceci indique à Compass de les ignorer, car nous souhaitons simplement compiler la feuille de style principale. Maintenant, si nous naviguons vers notre src dossier dans notre terminal et courir compiler compas ça va créer un nouveau style.css déposer à l'intérieur de notre toupet dossier avec tous nos partiels concaténés dans une seule feuille de style. Cependant, nous manquons les lignes d'en-tête de commentaire requises pour les thèmes WordPress, à droite?
Vous devrez installer Grunt, ce qui nécessite Node.js en même temps, mais je suppose que vous l’avez déjà. Par défaut, Grunt ne prend en charge que les fonctionnalités des fichiers JavaScript, mais heureusement, il existe des extensions tierces telles que grunt-css et grunt-compass qui peuvent prendre en charge le reste des fichiers nécessaires..
Alors passons à notre src dossier dans notre terminal et lancez les commandes suivantes:
npm installer grunt-css npm installer grunt-compass
Cela installera les deux extensions localement afin que nous puissions les importer / charger avec Grunt.
Maintenant organisons notre js dossier:
J'ai créé un sous-dossier appelé libs où nous pouvons placer n'importe quel script tiers dont nous avons besoin, j'ai également créé un script.js fichier où nous allons coder nos fonctions personnalisées qui sont exécutées généralement lorsque le DOM est prêt.
Maintenant, pour configurer les options de configuration de Grunt, nous devrons créer un nouveau fichier appelé grunt.js, alors faisons-en un dans notre src dossier avec le contenu suivant:
/ * module global: false * / module.exports = function (grunt) // Configuration du projet. grunt.initConfig (meta: version: '0.1.0', bannière: '/ *! PROJECT_NAME - v<%= meta.version %> - '+'<%= grunt.template.today("yyyy-mm-dd") %>\ n '+' * http://www.votresite.com/\n '+' * Copyright (c) <%= grunt.template.today("yyyy") %> '+' Votre entreprise; Licence MIT * / ', wpblock:' / *! \ n '+' Nom du thème: Thème du test \ n '+' URI du thème: http://www.votresite.com \ n '+' Description: Thème du test \ n '+' Auteur: Votre nom \ n '+' URI de l'auteur: http://www.votresite.com \ n '+' Version: 1.0 \ n '+' * / ', lint: fichiers: [' grunt.js ','… /js/script.js '], concat: dist: src: ['','… /Js/libs/*.js ','… /js/script.js '], dest:'… /js/script.min.js ', min: dist: src: [ '',''], dest:'', cssmin: dist: src: ['','… /Sass/style.css '], dest:'… /style.css ', regardez: fichiers: ['','… /Sass/*.scss '], tâches:' default ', jshint: options: curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true, sub: true, undef: true, boss: true, eqnull: true, jquery: true, devel: true, navigateur: true, globals: , uglify: , compass: dist: forcecompile: true ); // tâche par défaut. grunt.registerTask ('default', 'lint concat min compass cssmin'); // tâches de boussole grunt.loadNpmTasks ('grunt-compass'); // tâches CSS grunt.loadNpmTasks ('grunt-css'); ; Hou la la! C'est beaucoup plus complexe que notre fichier Compass mais je ferai de mon mieux pour essayer de l'expliquer, lisez à nouveau la documentation officielle de Grunt pour en savoir plus..
Le fichier de configuration demande à Grunt de procéder comme suit, dans l’ordre, tous les
temps nous courons le grognement commande de notre terminal à l'intérieur de notre src dossier:
Mieux encore, nous pouvons courir grunt regarder dans notre terminal et ça va surveiller les changements
dans nos fichiers JavaScript et Sass et exécuter les tâches automatiquement. Doux hein?
En passant, Grunt minimise non seulement les fichiers javascript en supprimant les espaces et les nouvelles lignes, il optimise également vos scripts en renommant des variables telles que var myLongVariable = true; à var a = true; plus d'autres types de magie pour les rendre encore plus petits! Je dois admettre que j'étais un peu sceptique à propos de cette fonctionnalité, mais il est vraiment très intelligent de s'assurer que votre code ne sera pas endommagé (jusqu'à présent, il ne l'a pas été.).
grunt-compas ne peut pas minifier (au moins sans supprimer les commentaires) et grunt-css ne peut pas lire .scss fichiers, c’est pourquoi nous avons dû compiler d’abord les fichiers Sass en un seul fichier. .css fichier.
Nous pourrions utiliser ce que nous avons jusqu'à présent et commencer à coder notre thème, mais pourquoi nous arrêter maintenant, alors que nous avons encore des modèles et des images sales? Pour gérer cela, j'ai modifié le script de génération Ant fourni avec le Boilerplate HTML5. Celui-ci dépend de fourmi alors assurez-vous de l'avoir installé.
Celui-ci est vraiment long et je ne veux pas vous ennuyer en affichant ici le fichier de construction complet, mais en résumé, chaque fois que vous êtes prêt à déployer votre thème dans le monde réel, nous avons juste besoin de naviguer vers notre construire dossier dans notre terminal et courir construction de fourmis, cette volonté:
Donc, à la fin, nous allons nous retrouver avec un nouveau dossier dans notre dossier de base de thème appelé
publier ça va ressembler à ça:
Tous les fichiers de thème prêts à être déployés.
Donc voilà, c’est fondamentalement mon flux de travail de développement de thèmes. Gardez à l'esprit que même si cela a l'air très long, il vous suffit de le configurer une fois et d'extraire les fichiers de thème de base à chaque fois que vous en avez besoin. Vous devrez donc:
grognement ou grunt regarder dans votre terminalJe suis sûr qu'il y a des façons de l'améliorer, alors laissez-moi savoir dans les commentaires ci-dessous si vous trouvez quelque chose d'intéressant qui pourrait rendre cela encore meilleur.
Mettre à jour: Nous avons apporté quelques corrections mineures aux extraits de code ci-dessus. En outre, il existe maintenant un lien de téléchargement vers le référentiel GitHub pour ce tutoriel, où vous pouvez trouver les fichiers de construction complets, etc..
