Share
Als Entwickler sollten wir immer nach Möglichkeiten suchen, unseren Workflow so schnell wie möglich zu beschleunigen und zu automatisieren. Dies ist jedoch nicht immer ein einfacher Prozess. Wir müssen daran denken, unsere Dateien zu kompilieren, zu minimieren, zu verketten und insgesamt effizienter zu gestalten, um schnellere Ladezeiten für unsere Endbenutzer zu gewährleisten, während eine organisierte Dateistruktur beibehalten wird, die es uns ermöglicht, Änderungen einfach anzuwenden. Glücklicherweise gibt es Tools, die uns bei diesem Prozess helfen, und ich möchte Ihnen mitteilen, wie ich sie eingerichtet habe, um die Entwicklung meines WordPress-Themes zu verbessern.
Wir alle wissen, dass wir unsere CSS- und JavaScript-Dateien vor der Bereitstellung unserer WordPress-Site optimieren sollten. Bombardieren Sie unsere Stylesheets mit @einführen Anweisungen oder das Verwenden mehrerer Dateien mit > Tags sind nicht der effizienteste Weg, da dadurch die Anzahl der Anforderungen erhöht wird, die der Browser beim Laden unserer Websites aufgibt. Dies manuell zu ändern, könnte eine entmutigende Aufgabe sein. Hinzu kommt, dass wir auch unsere Bilder und HTML-Seiten optimieren sollten - wir haben viel Arbeit.
Glücklicherweise haben einige wirklich kluge Leute großartige Tools entwickelt, die uns dabei helfen können, unseren Workflow so einfach wie möglich zu gestalten:
Ich möchte mich darauf konzentrieren, wie diese Technologien für die WordPress-Theme-Entwicklung implementiert werden. Ich möchte diese Tools nicht eingehend analysieren, da es bereits einige Artikel im Tuts + -Netzwerk gibt, die sehr gut erklären, wie sie installiert und konfiguriert werden. Dazu gehören:
Ich werde ohne weiteres ein kleines Testthema entwickeln, in dem die Schritte beschrieben werden, die ich unternehme, um diese Tools zusammenzuführen.
Wir werden das Nettuts + Fetch-Bundle verwenden, um die neueste Version von WordPress herunterzuladen. Wenn Sie jedoch eine andere IDE als Sublime Text 2 verwenden, müssen Sie eine andere Methode verwenden.
Für unser Testdesign erstellen wir die folgende Dateistruktur:
Werfen wir einen kurzen Blick auf jeden Ordner und jede Datei und sehen Sie, wozu sie dienen:
Functions.php - Sie können jede Funktion, die Sie benötigen, in diese Datei aufnehmen. Ich beginne mit dem Laden von jQuery in meiner wp_head action (Best Practices sagen aus, dass jQuery und andere Skripts vor dem schließenden body-Tag geladen werden, Plugins dagegen laden benutzerdefinierte Skripts ein wp_head und wenn sie sich auf jQuery verlassen, funktionieren sie nicht), ich lade auch meine Skripte in die wp_footer Aktion (wir haben diese Datei noch nicht erstellt).
Accentsconagua
function jvs_theme_setup () // Enqueue jQuery wp_enqueue_script ('jquery'); // Benutzerdefinierte Themenskripts in die Fußzeile einreihen 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 - Nichts Besonderes hier, nur eine Datei, mit der ich in allen meinen Projekten anfangen möchte. Beachten Sie, dass das Haupt-Stylesheet danach aufgerufen wird wp_head Auf diese Weise können wir benutzerdefinierte Stile, die durch Plugins hinzugefügt wurden, ohne böse überschreiben !wichtig Erklärungen.
><?php wp_title(' | '); ?> >
Sie haben vielleicht bemerkt, dass weder die style.css Noch script.min.js Es gibt noch Dateien, keine Sorge, wir kümmern uns darum.
Zuerst müssen wir unsere einrichten config.rb file, da compass darüber informiert wird, wo sich unsere Stylesheets befinden und wie wir sie kompilieren möchten, speichern wir sie in der src Mappe:
# Themenverzeichnisse: http_path = "" css_dir = "…" sass_dir = "… / sass" images_dir = "… / img" javascripts_dir = "… / js" # Sie können hier Ihren bevorzugten Ausgabestil auswählen (kann mit dem Befehl überschrieben werden line): output_style =: compact # Um relative Pfade zu Assets über Kompasshilfsfunktionen zu ermöglichen. relative_assets = true # Deaktiviert Debugging-Kommentare, die den ursprünglichen Speicherort Ihrer Selektoren anzeigen. # line_comments = false
Nichts Besonderes hier, das bedeutet nur, dass Compass nach unserem suchen wird .scss Dateien in der sass Ordner und legen Sie die kompilierten Stylesheets in den Stammordner unseres Themes. Wenn Sie mehr darüber wissen möchten, wie Sie die Konfigurationsdatei einrichten, lesen Sie die offizielle Dokumentation.
Lass uns unsere nochmal besuchen sass Ordner erneut und sehen, was wir jetzt tun können.
Jetzt können wir verwandte Stile in ihre eigenen Dateien innerhalb eines Unterordners unterteilen partials und habe eine einzige style.scss Datei wo können wir die wichtigsten Stile setzen, die so aussehen sollten:
// Kompassbibliothek @import "Kompass"; // globale Variablen @import "partials / base.scss"; // Elemente normalisieren @import "partials / normalize.scss"; / * == | == Primäre Stile ========================================== ============= Autor: ===================================== ====================================== * / // Hauptstile finden Sie hier / * == ================================================== ==================== * / // WP-spezifische CSS-Stile @import "partials / wp.scss"; // Nicht-semantische Hilfsklassen @import "partials / helpers.scss";
Beachten Sie, wie den Teildateien ein Unterstrich vorangestellt wurde. Dies weist Kompass an, sie zu ignorieren, da wir nur das Haupt-Stylesheet kompilieren möchten. Nun, wenn wir zu unserem navigieren src Ordner in unserem Terminal und starten Kompass kompilieren es wird ein neues schaffen style.css Datei in unserem sass Ordner mit all unseren Partials in einem einzigen Stylesheet. Wir fehlen jedoch die erforderlichen Kommentar-Kopfzeilen für WordPress-Themes, richtig?
Sie müssen Grunt installiert haben, was gleichzeitig Node.js erfordert, aber ich gehe davon aus, dass Sie es bereits haben. Standardmäßig unterstützt Grunt nur Funktionen für JavaScript-Dateien, aber glücklicherweise gibt es Erweiterungen von Drittanbietern wie Grunt-css und Grunt-Compass, die sich um den Rest der benötigten Dateien kümmern können.
Also lass uns zu unserem navigieren src Ordner in unserem Terminal und führen Sie die folgenden Befehle aus:
npm install grunt-css npm install grunt-compass installieren
Dadurch werden beide Erweiterungen lokal installiert, sodass wir sie mit Grunt importieren / laden können.
Nun lass uns unsere organisieren js Mappe:
Ich habe einen Unterordner mit dem Namen erstellt Libs Wo wir Skripte von Drittanbietern platzieren können, die wir benötigen, habe ich auch ein erstellt script.js Datei, in der wir unsere benutzerdefinierten Funktionen codieren, die normalerweise ausgeführt werden, wenn das DOM bereit ist.
Um die Konfigurationsoptionen von Grunt einzurichten, müssen wir eine neue Datei mit dem Namen erstellen grunt.js, also machen wir eins in unserem src Ordner mit folgendem Inhalt:
/ * global module: false * / module.exports = Funktion (grunzen) // Projektkonfiguration. grunt.initConfig (meta: version: '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") %> '+' Ihre Firma; Lizenziertes MIT * / ', wpblock:' / *! \ n '+' Themenname: Testdesign \ n '+' Theme URI: http://www.yoursite.com \ n '+' Beschreibung: Testthema \ n '+' Autor: Ihr Name \ n '+' Author URI: http://www.yoursite.com \ n '+' Version: 1.0 \ n '+' * / ', Fusseln: 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 ', watch: files: ['','… /Sass/*.scss '], Aufgaben:' default ', jshint: Optionen: 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: , Kompass: dist: forcecompile: true ); // Standardaufgabe. grunt.registerTask ('default', 'lint concat min compass cssmin'); // Kompassaufgaben grunt.loadNpmTasks ('grunt-compass'); // CSS-Aufgaben grunt.loadNpmTasks ('grunt-css'); ; Beeindruckend! Das ist viel komplexer als unsere Compass-Datei, aber ich werde mein Bestes geben, um es zu erklären. Lesen Sie nochmals die offizielle Dokumentation von Grunt, um mehr darüber zu erfahren.
In der Konfigurationsdatei wird Grunt angewiesen, nacheinander alle folgenden Schritte auszuführen
Mal laufen wir die grunzen Befehl von unserem Terminal in unserem src Mappe:
Noch besser, wir können rennen grunzen beobachten in unserem Terminal und es wird auf Änderungen achten
in unseren JavaScript- und Sass-Dateien und führen Sie die Aufgaben automatisch aus. Süß, huh?
Übrigens, Grunt minimiert nicht nur Javascript-Dateien, indem Leerzeichen und neue Zeilen entfernt werden, es optimiert Ihre Skripts, indem Sie Variablen wie umbenennen var myLongVariable = true; zu var a = wahr; plus andere Arten von Magie, um sie noch kleiner zu machen! Ich muss zugeben, ich war etwas skeptisch in Bezug auf diese Funktion, aber es ist wirklich klug, um sicherzustellen, dass Ihr Code nicht beschädigt wird..
Grunzkompass kann nicht minimieren (zumindest ohne Kommentare zu entfernen) und grunt-css kann nicht lesen .scss Dateien, deshalb mussten wir Sass-Dateien zuerst in eine einzige kompilieren .css Datei.
Wir könnten das, was wir bisher haben, verwenden und anfangen, unser Thema zu kodieren, aber warum sollten wir jetzt aufhören, wenn wir noch schmutzige Vorlagen und Bilder haben? Um dies zu handhaben, habe ich das Ant-Buildskript modifiziert, das in der HTML5-Boilerplate enthalten war. Das hängt davon ab Ameise Stellen Sie also sicher, dass Sie es installiert haben.
Dies ist wirklich lang und ich möchte nicht langweilen, dass Sie die gesamte Konfigurationsdatei hier anzeigen, aber jedes Mal, wenn Sie bereit sind, Ihr Design in der realen Welt bereitzustellen, müssen wir nur zu unserer navigieren bauen Ordner in unserem Terminal und starten Ameise bauen, dieser Wille:
Am Ende haben wir also einen neuen Ordner in unserem Theme-Basisordner
veröffentlichen das sieht so aus:
Alle Designdateien sind bereit für die Bereitstellung.
Da haben Sie es also, das ist im Grunde mein Workflow für die Themenentwicklung. Denken Sie daran, dass Sie, obwohl es wirklich sehr lang aussieht, es nur einmal einrichten und die Basis-Designdateien jedes Mal abrufen müssen, wenn Sie sie benötigen.
grunzen oder grunzen beobachten in Ihrem TerminalIch bin mir sicher, dass es Möglichkeiten gibt, es zu verbessern. Lassen Sie mich in den Kommentaren wissen, ob Sie etwas Interessantes finden, um das noch besser zu machen.
Aktualisieren: Wir haben ein paar kleinere Korrekturen an den obigen Code-Snippets vorgenommen. Außerdem gibt es jetzt einen Download-Link zum GitHub-Repository für dieses Tutorial. Dort finden Sie die vollständigen Build-Dateien usw..
