Hoe u uw WordPress ontwikkelingswerkstroom kunt optimaliseren

Gelukkig hebben enkele echt slimme mensen geweldige tools gemaakt die ons kunnen helpen onze workflow zo eenvoudig mogelijk te maken:

• Kompas
• knorren
• H5BP Build Script
• Nettuts + Fetch

Ik wil me graag concentreren op het implementeren van deze technologieën voor de ontwikkeling van WordPress-thema's. Het is niet mijn bedoeling om een ​​diepgaande analyse van deze tools te geven, omdat er al enkele artikelen in het Tuts + Network zijn die uitstekend werk leveren en uitleg geven over hoe ze te installeren en configureren, zoals:

• Mastering van Sass
• Meet Grunt: The Build Tool voor JavaScript
• De officiële gids voor HTML5-boilerscherm
• Introductie van Nettuts + Fetch

De workflow

Zonder verder oponthoud ga ik een klein testthema ontwikkelen dat de stappen beschrijft die ik neem om deze hulpmiddelen samen te voegen.

Stap 1 Download WordPress

We gebruiken de Nettuts + Fetch-bundel om de nieuwste versie van WordPress te downloaden, natuurlijk als u een andere ID dan Sublime Text 2 gebruikt, moet u een andere methode gebruiken.

Stap 2 Stel de themabestandstructuur in

Voor ons testthema maken we de volgende bestandsstructuur:

Laten we snel naar elke map en elk bestand kijken en zien waar ze voor zijn:

• bouwen - H5BP build-script
• img - Afbeeldingen
• js - JavaScript-bestanden
• sass - stylesheets
• src - Grunt / Compass-configuratiebestanden

functions.php - Je kunt elke functie opnemen die je nodig hebt in dit bestand, ik begin met het laden van jQuery in mijn wp_head actie (beste praktijken zeggen dat jQuery en andere scripts moeten worden geladen vóór de afsluitende body-tag, maar plug-ins willen graag aangepaste scripts laden in wp_head en als ze vertrouwen op jQuery zullen ze niet werken), ook laad ik mijn scripts in de wp_footer actie (we hebben dit bestand nog niet gemaakt).

 function jvs_theme_setup () // Enqueue jQuery wp_enqueue_script ('jquery'); // Geef aangepaste themascripts in footer wp_enqueue_script ('custom-scripts', get_bloginfo ('template_url'). '/Js/script.min.js', array ('jQuery'), false, true);  add_action ('after_setup_theme', 'jvs_theme_setup');

index.php - Niets bijzonders hier, alleen een bestand waar ik graag mee start in al mijn projecten, merk op dat het hoofd stylesheet wordt genoemd wp_head dit stelt ons in staat om aangepaste stijlen die door plug-ins zijn toegevoegd te vervangen zonder vervelende dingen te gebruiken !belangrijk declaraties.

  >          >   

U hebt misschien gemerkt dat geen van beide style.css noch script.min.js Bestaande bestanden bestaan ​​nog, maak je geen zorgen we zullen ervoor zorgen.

Stap 3 Stijlbladen instellen met Sass / Compass

Eerst moeten we onze config.rb bestand omdat dit het kompas zal vertellen waar onze stylesheets zijn en hoe we ze willen compileren, we zullen het opslaan in de src map:

 # Themamappen: http_path = "" css_dir = "..." sass_dir = "... / sass" images_dir = "... / img" javascripts_dir = "... / js" # U kunt hier uw gewenste uitvoerstijl selecteren (kan via het commando worden opgeheven) line): output_style =: compact # Om relatieve paden naar items in te schakelen via kompashelperfuncties. relative_assets = true # Foutopsporing bij opmerkingen uitschakelen die de oorspronkelijke locatie van uw selectors weergeven. # line_comments = false

Niets bijzonders hier, dit betekent alleen dat Compass ons zal zoeken .SCSS bestanden binnen de sass map en plaats de gecompileerde stylesheets in de hoofdmap van ons thema. Als u meer wilt weten over het instellen van het configuratiebestand, raadpleegt u de officiële documentatie..

Laten we opnieuw onze sass map opnieuw en kijk wat we nu kunnen doen.

Nu kunnen we gerelateerde stijlen in hun eigen bestanden in een opgeroepen submap van elkaar scheiden partials en heb een single style.scss bestand waar kunnen we de hoofdstijlen zetten die er als volgt uit moeten zien:

 // Kompasbibliotheek @import "kompas"; // Algemene variabelen @import "partials / base.scss"; // Normeer elementen @import "partials / normalize.scss"; / * == | == Primaire stijlen ========================= ============ Author: ==================== ====================== * / // Hoofdstijlen ga hier / * == ================================================== =================== * / // WP-specifieke CSS-stijlen @import "partials / wp.scss"; // Niet-semantische helperklassen @import "partials / helpers.scss";

Merk op hoe we de gedeeltelijke bestanden hebben voorafgegaan door een onderstrepingsteken, dit vertelt kompas om ze te negeren, omdat we alleen het hoofd stylesheet willen compileren. Nu als we naar onze navigeren src map in onze terminal en uitvoeren kompas compileren het zal een nieuw maken style.css bestand in onze sass map met al onze partials aaneengeschakeld in een enkel stylesheet. We missen echter de vereiste koptekstregels voor WordPress-thema's, rechts?

Stap 4 Stel grunt in

U moet Grunt hebben geïnstalleerd, maar tegelijkertijd heeft u Node.js nodig, maar ik neem aan dat u het al hebt. Standaard ondersteunt Grunt alleen functionaliteit voor JavaScript-bestanden, maar gelukkig zijn er extensies van derden zoals grunt-css en grunt-compass die voor de rest van de bestanden kunnen zorgen die we nodig hebben.

Dus laten we naar onze navigeren src map in onze terminal en voer de volgende opdrachten uit:

 npm install grunt-css npm grunt-compass installeren

Hiermee worden beide extensies lokaal geïnstalleerd, zodat we deze met Grunt kunnen importeren / laden.

Laten we nu onze organiseren js map:

Ik heb een submap gemaakt met de naam libs waar we elk script van een derde partij kunnen plaatsen dat we nodig hebben, heb ik ook een script.js bestand waar we onze aangepaste functies zullen coderen die meestal worden uitgevoerd wanneer de DOM klaar is.

Om de configuratie-opties van Grunt in te stellen, moeten we nu een nieuw bestand maken met de naam grunt.js, dus laten we er een maken in onze src map met de volgende inhoud:

 / * global module: false * / module.exports = function (grunt) // Projectconfiguratie. grunt.initConfig (meta: versie: '0.1.0', banner: '/ *! PROJECT_NAME - v<%= meta.version %> - '+'<%= grunt.template.today("yyyy-mm-dd") %>\ n '+' * http://www.yoursite.com/\n '+' * Copyright (c) <%= grunt.template.today("yyyy") %> '+' Uw bedrijf; Licentie MIT * / ', wpblock:' / *! \ n '+' Theme Name: Test Theme \ n '+' Theme URI: http://www.yoursite.com \ n '+' Omschrijving: Test theme \ n '+' Auteur: Your Name \ n '+' URI van de auteur: http://www.yoursite.com \ n '+' Versie: 1.0 \ n '+' * / ', lint: files: [' 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 ', bekijk: files: ['',' ... /sass/*.scss '], tasks:' 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, browser: true, globals: , uglify: , compass: dist: forcecompile: true ); // Standaardtaak. grunt.registerTask ('standaard', 'pluis concat min kompas cssmin'); // Compass-taken grunt.loadNpmTasks ('grunt-compass'); // CSS-taken grunt.loadNpmTasks ('grunt-css'); ;

Wauw! Dat is een stuk ingewikkelder dan ons Compass-bestand, maar ik zal mijn best doen om het uit te leggen, lees opnieuw de officiële documentatie van grunt om er meer van te weten.

Wat het configuratiebestand doet is Grunt vertellen om het volgende te doen, in volgorde, elke
tijd lopen we het knorren commando van onze terminal in onze src map:

1. Controleer op fouten in onze grunt.js en js / script.js bestanden met JSHint.
2. Samenvoegen van al onze javascript-bibliotheken en aangepaste scripts samen in een
   bestand genoemd script.min.js die is degene die we in onze functions.php het dossier.
3. Minimaliseer de script.min.js het dossier.
4. Gebruik grunt-compass om onze stylesheets te compileren met behulp van onze config.rb het dossier.
5. Gebruik grunt-css om onze te minimaliseren style.css bestand en plaats de nieuwe versie in de basismap van ons thema. Het bevat ook het opmerkingenblok dat we hebben ingesteld op de wpblock optie voor het stylesheet, zodat het kan worden gelezen door WordPress.

Sterker nog, we kunnen rennen gegrom horloge in onze terminal en het zal letten op veranderingen
in onze JavaScript- en Sass-bestanden en voer de taken automatisch uit. Lief he?

By the way, Grunt jaagt niet alleen JavaScript-bestanden door witruimte en nieuwe regels te verwijderen, maar het optimaliseert ook je scripts door variabelen als variabelen te hernoemen var myLongVariable = true; naar var a = true; plus andere soorten magie om ze nog kleiner te maken! Ik moet toegeven dat ik een beetje sceptisch was over deze functie, maar het is eigenlijk heel slim om ervoor te zorgen dat het je code niet verbreekt (tot nu toe heeft het mijn mijn niet verbroken).

grunt-compass kan niet verkleinen (in ieder geval zonder opmerkingen te verwijderen) en grunt-css kan niet lezen .SCSS bestanden, daarom moesten we Sass-bestanden als eerste in een enkele compileren .css het dossier.

Stap 5 Stel H5BP Build Script in

We zouden kunnen gebruiken wat we tot nu toe hebben gedaan en beginnen met het coderen van ons thema, maar waarom nu stoppen als we nog steeds vuile sjablonen en afbeeldingen hebben? Om dit aan te pakken heb ik het mieren-build-script aangepast dat vroeger gebundeld was met de HTML5 Boilerplate. Deze is afhankelijk van mier dus zorg ervoor dat je het hebt geïnstalleerd.

Deze is echt lang en ik wil jullie niet vervelen met het hele configuratiebestand hier, maar samengevat elke keer dat je klaar bent om je thema in de echte wereld te implementeren, hoeven we alleen maar naar onze bouwen map in onze terminal en uitvoeren mierenbouw, dit zal:

1. Optimaliseer onze PNG en JPEG afbeeldingen.
2. Optimaliseer onze sjabloonbestanden (index.php, single.php, enz.).
3. Verwijder alle onnodige mappen en bestanden (src, sass, enz.).

Dus uiteindelijk zullen we eindigen met een nieuwe map in onze thema-basismap genaamd
publiceren dat ziet er zo uit:

Alle themabestanden klaar voor implementatie.

Laatste gedachten

Dus daar heb je het, dat is eigenlijk mijn thema-ontwikkelingsworkflow. Hoewel het er erg lang uitziet, hoef je het maar één keer in te stellen en de basisthemabestanden op te halen elke keer dat je ze nodig hebt, dus uiteindelijk moet je gewoon:

1. WordPress ophalen
2. Haal de basisthemabestanden op
3. Rennen knorren of gegrom horloge in uw terminal

Ik weet zeker dat er manieren zijn om het te verbeteren. Laat het me weten in de reacties hieronder als jullie iets interessants vinden om dit nog beter te maken.

Bijwerken: We hebben een paar kleine verbeteringen aangebracht aan de bovenstaande codefragmenten. Ook is er nu een downloadkoppeling naar de GitHub-repository voor deze zelfstudie, en daar kun je de volledige build-bestanden vinden..