Share
Som utviklere bør vi alltid lete etter måter å øke hastigheten på og automatisere arbeidsflyten så mye som mulig, men dette er ikke alltid en enkel prosess. Vi må huske å kompilere, minimere, sammenkoble og generelt gjøre våre filer mer effektive for å sikre raskere belastningstider til sluttbrukerne våre, samtidig som vi beholder en organisert filstruktur som gjør at vi kan bruke endringer enkelt. Heldigvis finnes det verktøy som hjelper oss med denne prosessen, og jeg vil gjerne dele hvordan jeg har satt dem opp for å forbedre WordPress-temautviklingen min.
Vi vet alle at vi bør optimalisere våre CSS- og JavaScript-filer før du distribuerer vårt WordPress-nettsted. Bombardere våre stilark med @importere uttalelser eller inkludert flere filer ved bruk av > Etiketter er ikke den mest effektive måten, siden det øker antall forespørsler nettleseren må gjøre når du laster inn nettstedene våre. Å bytte dette manuelt kan være en skremmende oppgave, legge til at vi også skal optimalisere våre bilder og HTML-sider - vi har mye arbeid.
Heldigvis har noen virkelig smarte folk skapt gode verktøy som kan hjelpe oss med å gjøre arbeidsflyten så rett frem som mulig:
Jeg vil gjerne fokusere på hvordan å implementere disse teknologiene for WordPress-temautvikling. Jeg mener ikke å gi en grundig analyse av disse verktøyene, siden det er noen artikler som allerede finnes i Tuts + Network, som gjør en flott jobb som forklarer hvordan du installerer og konfigurerer dem, for eksempel:
Uten videre ado skal jeg utvikle et lite testtema som beskriver de trinnene jeg tar for å innlemme disse verktøyene sammen.
Vi bruker Nettuts + Fetch-pakken for å laste ned den nyeste versjonen av WordPress, selvfølgelig hvis du bruker en IDE annet enn Sublime Text 2, må du bruke en annen metode.
For vårt testtema lager vi følgende filstruktur:
La oss ta en rask titt på hver mappe og fil og se hva de er for:
functions.php - Du kan inkludere hvilken som helst funksjon du trenger i denne filen, jeg begynner å laste jQuery i min wp_head handling (beste praksis sier å laste inn jQuery og andre skript før den avsluttende kroppsmerket, men plugins liker å laste tilpassede skript i wp_head og hvis de stole på jQuery, vil de ikke fungere), også jeg legger inn skriptene mine i wp_footer handling (vi har ikke opprettet denne filen ennå).
Accentsconagua
funksjon jvs_theme_setup () // Enqueue jQuery wp_enqueue_script ('jquery'); // Enqueue tilpassede tema skript i 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 - Ikke noe ekstra spesielt her, bare en fil jeg liker å begynne med i alle mine prosjekter, merk at hovedskjemaet kalles etter wp_head Dette tillater oss å tilsidesette tilpassede stiler lagt til av plugins uten å bruke ekkel !viktig erklæringer.
><?php wp_title(' | '); ?> >
Du har kanskje lagt merke til at verken style.css eller script.min.js filer eksisterer ennå, ikke bry deg om at vi skal ta vare på det.
Først må vi sette opp vår config.rb fil siden dette vil fortelle kompass hvor våre stilark er og hvordan vi vil kompilere dem, lagrer vi det inne i src mappe:
# Tema kataloger: http_path = "" css_dir = "..." sass_dir = "... / sass" images_dir = "... / img" javascripts_dir = "... / js" # Du kan velge din foretrukne utgangsstil her (kan overstyres via kommandoen linje): output_style =: compact # For å aktivere relative stier til eiendeler via kompasshjelpfunksjoner. relative_assets = true # For å deaktivere feilsøkings kommentarer som viser den opprinnelige plasseringen til seleksjonene dine. # line_comments = false
Ingenting fancy her, dette betyr bare at Compass vil se etter vår .SCSS filer inne i sass mappe og sette kompilert stilark i innsatsens rotasjonsmappe, hvis du vil vite mer om hvordan du konfigurerer konfigurasjonsfilen, henvises bare til den offisielle dokumentasjonen.
La oss se på vår sass mappe igjen og se hva vi kan gjøre nå.
Nå kan vi skille relaterte stiler i egne filer i en undermappe som heter partials og ha en singel style.scss fil hvor kan vi sette de viktigste stilene som skal se slik ut:
// Kompass bibliotek @ import "kompass"; // Globale variabler @ import "partials / base.scss"; // Normaliser elementene @import "partials / normalize.scss"; / * == | == Primær stiler ========================================= ============ Forfatter: ====================================== ====================================== * / // Hovedstiler gå her / * == ================================================== =================== * / // WP-spesifikke CSS-stiler @ import "partials / wp.scss"; // Ikke-semantiske hjelperklasser @import "partials / helpers.scss";
Legg merke til hvordan vi prefikserte delfilene med et understrek, dette forteller kompass å ignorere dem siden vi bare ønsker å kompilere hovedformatarket. Nå hvis vi navigerer til vår src mappe i vår terminal og kjøre kompass kompilere det vil skape en ny style.css filen inne i vår sass mappe med alle våre partier sammenkalt i et enkelt stilark. Imidlertid mangler vi de nødvendige kommentarhovedlinjene for WordPress-temaer, til høyre?
Du må ha Grunt installert som samtidig krever Node.js, men jeg antar at du allerede har den. Som standard støtter Grunt bare funksjonalitet for JavaScript-filer, men heldigvis finnes det tredjepartsutvidelser som grunt-css og grunt-kompass som kan ta vare på resten av filene vi trenger.
Så la oss navigere til vår src mappe i vår terminal og kjør følgende kommandoer:
npm installere grunt-css npm installere grunt-kompass
Dette vil installere begge utvidelsene lokalt, slik at vi kan importere / laste dem med Grunt.
La oss nå organisere vår js mappe:
Jeg opprettet en undermappe som heter libs der vi kan plassere et tredjeparts skript som vi trenger, skapte jeg også en script.js fil der vi kodes våre tilpassede funksjoner som blir utført vanligvis når DOM er klar.
Nå for å konfigurere Grunts konfigurasjonsalternativer må vi opprette en ny fil som heter grunt.js, så la oss lage en i vår src mappe med følgende innhold:
/ * global modul: false * / module.exports = funksjon (grunt) // Prosjektkonfigurasjon. grunt.initConfig (meta: versjon: '0.1.0', banner: '/ *! PROJECT_NAME - v<%= meta.version %> - '+'<%= grunt.template.today("yyyy-mm-dd") %>\ n '+' * http://www.yoursite.com/\n '+' * Opphavsrett (c) <%= grunt.template.today("yyyy") %> '+' Ditt firma; Lisensiert MIT * / ', wpblock:' / *! \ n '+' Tema navn: Test Theme \ n '+' Tema URI: http://www.yoursite.com \ n '+' Beskrivelse: Testtema \ n '+' Forfatter: Ditt navn \ n '+' Forfatter URI: http://www.yoursite.com \ n '+' Versjon: 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 ', se: files: ['',' ... /sass/*.scss '], oppgaver:' default ', jshint: alternativer: curly: true, eqeqeq: true, immed: sant, latedef: true, newcap: true, noarg: true, sub: true, undef: true, boss: true, eqnull: true, jquery: true, devel: sann, nettleser: true, globals: , uglify: , kompass: dist: forcecompile: true ); // Standard oppgave. grunt.registerTask ('standard', 'lint concat min kompass cssmin'); // Kompassoppgaver grunt.loadNpmTasks ('grunt-compass'); // CSS-oppgaver grunt.loadNpmTasks ('grunt-css'); ; Wow! Det er mye mer komplekst enn vår Compass-fil, men jeg vil gjøre mitt beste for å prøve å forklare det, les også Grunts offisielle dokumentasjon for å vite mer om det.
Hva config filen gjør er å fortelle Grunt å gjøre følgende, i rekkefølge, hver
tid vi kjører grynte kommandoen fra vår terminal inne i vår src mappe:
Enda bedre, vi kan løpe grunt ur i vår terminal og det vil se etter endringer
i våre JavaScript og Sass-filer og kjør oppgavene automatisk. Søt hei?
Forresten, Grunt ikke bare minifiserer javascript-filer ved å fjerne hvite plass og nye linjer, det optimaliserer skriptene dine ved å omdøpe variabler som var myLongVariable = true; til var a = sant; pluss andre typer magi for å gjøre dem enda mindre! Jeg må innrømme at jeg var litt skeptisk til denne funksjonen, men det er faktisk veldig smart å sørge for at det ikke vil ødelegge koden din (så langt har det ikke brutt meg).
grynt-kompass kan ikke redusere (i det minste uten å fjerne kommentarer) og grynt-css kan ikke lese .SCSS filer, det var derfor vi trengte å kompilere Sass-filer først til en enkelt .css fil.
Vi kunne bruke det vi har så langt og begynne å kode vårt tema, men hvorfor stoppe nå når vi fortsatt har skitne maler og bilder? For å håndtere dette har jeg modifisert antbyggingsskriptet som pleide å komme sammen med HTML5 Boilerplate. Denne avhenger av maur så sørg for at du har den installert.
Denne er veldig lang, og jeg vil ikke bore dere som viser hele konfigurasjonsfilen her, men i sammendraget hver gang du er klar til å distribuere temaet i den virkelige verden, trenger vi bare å navigere til vår bygge mappe i vår terminal og kjøre maur bygge, dette vil:
Så til slutt vil vi ende opp med en ny mappe i vår temabaserte mappe som heter
publisere det ser slik ut:
Alle temafiler klar for distribusjon.
Så der har du det, det er egentlig min utviklings arbeidsflyt. Husk at selv om det ser veldig lang ut, må du bare sette det opp en gang og hente grunntemaene hver gang du trenger dem så til slutt må du bare:
grynte eller grunt ur i terminalen dinJeg er sikker på at det finnes måter å forbedre det på, så gi meg beskjed i kommentarene nedenfor hvis dere finner noe interessant for å gjøre dette enda bedre.
Oppdater: Vi har gjort et par mindre korrigeringer til kodestykket ovenfor. Også, det er nå en nedlastingskobling til GitHub-depotet for denne opplæringen, og du kan finne de fullstendige filene etc. der.
