
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 🙂