Share
Come sviluppatori dovremmo sempre cercare modi per accelerare e automatizzare il nostro flusso di lavoro il più possibile, ma questo non è sempre un processo facile. Dobbiamo ricordare di compilare, minimizzare, concatenare e, nel complesso, rendere i nostri file più efficienti per garantire tempi di caricamento più veloci ai nostri utenti finali mantenendo una struttura di file organizzata che ci consente di applicare facilmente le modifiche. Fortunatamente ci sono strumenti che ci aiutano in questo processo e vorrei condividere come li ho impostati per migliorare il mio sviluppo del tema WordPress.
Sappiamo tutti che dovremmo ottimizzare i nostri file CSS e JavaScript prima di implementare il nostro sito WordPress. Bombardando i nostri fogli di stile con @importare dichiarazioni o includere più file utilizzando > i tag non sono il modo più efficiente, dal momento che aumenterà il numero di richieste che il browser deve effettuare durante il caricamento dei nostri siti. Cambiare questo manualmente potrebbe essere un compito scoraggiante, aggiungo il fatto che dovremmo anche ottimizzare le nostre immagini e pagine HTML - ci stiamo lavorando molto.
Fortunatamente alcune persone davvero intelligenti hanno creato ottimi strumenti che possono aiutarci a rendere il nostro flusso di lavoro il più semplice possibile:
Mi piacerebbe concentrarsi su come implementare queste tecnologie per lo sviluppo del tema WordPress. Non intendo dare un'analisi approfondita di questi strumenti poiché ci sono già alcuni articoli nella rete Tuts + che fanno un ottimo lavoro spiegando come installarli e configurarli, come ad esempio:
Senza ulteriori indugi, svilupperò un piccolo tema di prova che descriverà i passi che ho compiuto per incorporare questi strumenti insieme.
Utilizzeremo il pacchetto Nettuts + Fetch per scaricare l'ultima versione di WordPress, ovviamente se utilizzi un IDE diverso da Sublime Text 2 dovrai utilizzare un metodo diverso.
Per il nostro tema di prova creeremo la seguente struttura di file:
Diamo una rapida occhiata a ciascuna cartella e file e vediamo a cosa servono:
functions.php - Puoi includere qualsiasi funzione di cui hai bisogno in questo file, comincio a caricare jQuery nel mio wp_head azione (le buone pratiche dicono di caricare jQuery e altri script prima del tag body di chiusura, ma i plugin amano caricare gli script personalizzati in wp_head e se si affidano a jQuery non funzioneranno), anche io carico i miei script nel wp_footer azione (non abbiamo ancora creato questo file).
Accentsconagua
function jvs_theme_setup () // Enqueue jQuery wp_enqueue_script ('jquery'); // Accoda script di temi personalizzati nel 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 - Niente di particolarmente speciale qui solo un file che mi piace iniziare con tutti i miei progetti, si noti che il foglio di stile principale viene chiamato dopo wp_head questo ci permette di ignorare gli stili personalizzati aggiunti dai plugin senza utilizzare brutto !importante dichiarazioni.
><?php wp_title(' | '); ?> >
Potresti aver notato che né il style.css né script.min.js i file esistono ancora, non preoccuparti, ci penseremo noi.
Per prima cosa dobbiamo impostare il nostro config.rb file dato che questo dirà alla bussola dove sono i nostri fogli di stile e come vogliamo compilarli, lo memorizzeremo dentro src cartella:
# Directory tematiche: http_path = "" css_dir = "..." sass_dir = "... / sass" images_dir = "... / img" javascripts_dir = "... / js" # Qui puoi selezionare lo stile di output preferito (può essere sovrascritto tramite il comando line): output_style =: compact # Per abilitare i percorsi relativi alle risorse tramite le funzioni di aiuto della bussola. relative_assets = true # Per disabilitare i commenti di debug che mostrano la posizione originale dei selettori. # line_comments = false
Niente di speciale qui, questo significa solo che Compass cercherà il nostro .SCSS file all'interno del insolenza cartella e inserisci i fogli di stile compilati nella cartella radice del nostro tema, se vuoi sapere di più su come impostare il file di configurazione fai riferimento alla documentazione ufficiale.
Rivediamo il nostro insolenza cartella di nuovo e vedere cosa possiamo fare ora.
Ora possiamo separare gli stili correlati nei loro file all'interno di una sottocartella chiamata parziali e avere un singolo style.scss file dove possiamo inserire gli stili principali che dovrebbero apparire come questo:
// Libreria di bussole @import "bussola"; // Variabili globali @import "partials / base.scss"; // Normalizza elementi @import "partials / normalize.scss"; / * == | == Stili primari ========================================= ============ Autore: ==================================== ====================================== * / // Gli stili principali vanno qui / * == ================================================== =================== * / // Stili CSS specifici per WP @import "partials / wp.scss"; // Classi helper non semantiche @import "partials / helpers.scss";
Nota come abbiamo aggiunto come prefisso i file parziali con un carattere di sottolineatura, questo indica alla bussola di ignorarli poiché vogliamo semplicemente compilare il foglio di stile principale. Ora se navighiamo al nostro src cartella nel nostro terminale ed esegui compila bussola creerà un nuovo style.css file all'interno del nostro insolenza cartella con tutti i nostri partial concatenati in un singolo foglio di stile. Tuttavia, ci mancano le righe di intestazione del commento richieste per i temi WordPress, giusto?
Avrai bisogno di avere Grunt installato che allo stesso tempo richiede Node.js ma suppongo che tu ce l'abbia già. Per impostazione predefinita, Grunt supporta solo funzionalità per i file JavaScript, ma per fortuna ci sono estensioni di terze parti come grunt-css e grunt-compass che possono occuparsi del resto dei file di cui abbiamo bisogno.
Quindi passiamo al nostro src cartella nel nostro terminale ed esegui i seguenti comandi:
npm installa grunt-css npm installa grunt-compass
Questo installerà localmente entrambe le estensioni in modo che possiamo importarle / caricarle con Grunt.
Ora organizziamo il nostro js cartella:
Ho creato una sottocartella chiamata libs dove possiamo inserire qualsiasi script di terze parti di cui abbiamo bisogno, ho anche creato un script.js file in cui codificheremo le nostre funzioni personalizzate che vengono eseguite solitamente quando il DOM è pronto.
Ora per configurare le opzioni di configurazione di Grunt dovremo creare un nuovo file chiamato grunt.js, quindi facciamo uno nel nostro src cartella con il seguente contenuto:
/ * global module: false * / module.exports = function (grunt) // Configurazione del progetto. grunt.initConfig (meta: versione: '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") %> '+' La tua azienda; MIT con licenza * / ', wpblock:' / *! \ n '+' Nome tema: Tema di prova \ n '+' URI del tema: http://www.yoursite.com \ n '+' Descrizione: Tema del test \ n '+' Autore: Nome \ n '+' URI autore: http://www.yoursite.com \ n '+' Versione: 1.0 \ n '+' * / ', lint: file: [' grunt.js ',' ... /js/script.js '], concat: dist: src: ['',' ... /js/libs/*.js ',' ... /js/script.js '], destinazione:' ... /js/script.min.js ', min: dist: src: [ '',''], dest:'', cssmin: dist: src: ['',' ... /sass/style.css '], destinazione:' ... /style.css ', guarda: file: ['',' ... /sass/*.scss '], attività:' 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 ); // Attività predefinita. grunt.registerTask ('default', 'lint concat min compass cssmin'); // Compass tasks grunt.loadNpmTasks ('grunt-compass'); // CSS tasks grunt.loadNpmTasks ('grunt-css'); ; Wow! È molto più complesso del nostro file Compass, ma farò del mio meglio per cercare di spiegarlo, rileggo ancora la documentazione ufficiale di grunt per saperne di più.
Quello che fa il file di configurazione è di dire a Grunt di fare quanto segue, in ordine, ogni
volta che eseguiamo il grugnito comando dal nostro terminale all'interno del nostro src cartella:
Ancora meglio, possiamo correre orologio da grugnito nel nostro terminale e guarderà per i cambiamenti
nei nostri file JavaScript e Sass ed esegui automaticamente le attività. Dolce eh?
A proposito, Grunt non solo riduce i file javascript rimuovendo spazi bianchi e nuove linee, ma ottimizza i tuoi script rinominando variabili come var myLongVariable = true; a var a = true; più altri tipi di magia per renderli ancora più piccoli! Devo ammettere che ero un po 'scettico riguardo questa funzione, ma in realtà è davvero intelligente per assicurarmi che non infranga il tuo codice (finora non ha rotto il mio).
grugnito-bussola non può minimizzare (almeno senza rimuovere commenti) e grugnito-css non posso leggere .SCSS file, ecco perché abbiamo dovuto compilare i file Sass prima in un singolo .css file.
Potremmo usare ciò che abbiamo finora e iniziare a codificare il nostro tema, ma perché fermarsi ora quando abbiamo ancora modelli e immagini sporchi? Per gestirlo ho modificato lo script ant form che veniva fornito in bundle con l'HTML5 Boilerplate. Questo dipende da formica quindi assicurati di averlo installato.
Questo è davvero lungo e non voglio annoiarvi ragazzi che mostrano l'intero file di configurazione di configurazione qui, ma in sintesi ogni volta che siete pronti per distribuire il vostro tema nel mondo reale, dobbiamo solo navigare verso il nostro costruire cartella nel nostro terminale ed esegui formica, questo sarà:
Quindi alla fine ci ritroveremo con una nuova cartella nella nostra cartella base di temi chiamata
pubblicare sembrerà questo:
Tutti i file di temi pronti per l'implementazione.
Quindi, ecco, questo è fondamentalmente il mio flusso di lavoro per lo sviluppo del tema. Tieni presente che anche se sembra davvero lungo, devi solo impostarlo una volta e recuperare i file del tema base ogni volta che ne hai bisogno, quindi alla fine dovrai solo:
grugnito o orologio da grugnito nel tuo terminaleSono sicuro che ci sono modi per migliorarlo, quindi fatemi sapere nei commenti qui sotto se voi ragazzi trovate qualcosa di interessante per renderlo ancora migliore.
Aggiornare: Abbiamo apportato un paio di correzioni minori ai frammenti di codice sopra riportati. Inoltre, ora c'è un link per il download del repository GitHub per questo tutorial, e puoi trovare i file di compilazione completi ecc..
