WordPress Theme Entwicklung mit Sage 9 Teil 1

Sage ist Projekt von roots.io. Es ist ein WordPress Starter Theme mit modernen Entwicklungsmethoden.

Features:

• Sass für Stylesheets
• Modernes JavaScript
• Webpack für Assets Compiling, Bild Optimierung, Zusammenführen und minimieren von Dateien.
• Browsersync für synchronisiertes Browser Testen
• Blade als Template Engine
• Controller für Datenübertragung an Blade
• Diverse CSS Frameworks (optional) z.B.: 
  Bootstrap 4, 
  Bulma, 
  Foundation, 
  Tachyons, 
  Tailwind

Voraussetzungen

Bevor man mit der Installation und der lokalen Entwicklung loslegt sind die folgenden Komponente notwendig:

• XAMPP / WAMPP oder Lightning
• WordPress >= 4.7
• PHP >= 7.1.3 (with php-mbstring erlaubt)
• Composer
• Node.js >= 8.0.0
• Yarn

Erste Schritte

Nach dem alles von oben aufgesetzt worden ist muss man in das /wp-content/themes Folder navigieren und den folgenden Befehl von der Kommandozeile ausführen, wobei „your-theme-name“ mit dem gewünschten Namen ersetzt werden muss:

# @ app/themes/ or wp-content/themes/
$ composer create-project roots/sage your-theme-name

Man kann auch die letzte Entwicklungsversion installieren, in dem Fall sieht der Befehl so aus:

$ composer create-project roots/sage your-theme-name dev-master

Beim Installation wird u.a nach den Themen Namen, Live und Dev URI, Version etc. gefragt. Man kann dann von den oben aufgelisteten CSS Frameworks beliebig wählen. Sollte hier noch nicht festgelegt sein welches Framework benutzt wird, man kann diese auch später installieren.

Die Installation von Sage 9 sieht ungefähr so aus:

Nach dem alle PHP Komponenten installiert worden sind, muss man in das Template Folder navigieren und den folgenden Befehl ausführen um alle JS Packages zu installieren:

$ yarn && yarn build

So sieht die Ordnerbaum nach der Installation aus:

Happy Coding 🙂