WordPress-Themes mit SASS und Bootstrap

CSS-Dateien werden heute nicht mehr manuell erstellt. Vielmehr werden SASS-Dateien geschrieben. Durch die „Geschachtelte Regeln“ (Nested Rules), Variablen, Mixins und vielem mehr die Arbeit beim Entwickeln erheblich erleichtern.

WordPress-Themes: SASS einrichten

WordPress-Themes mit SASS auszustatten, ist also eine erhebliche Arbeitserleichterung. Man muss sich nicht mehr durch eine lange CSS-Datei wühlen. Diese wird vom Präprozessor aus vielen kleinen SASS- oder SCSS-Skripten. Neben der Standard-SASS-Syntax verfügt Sass über die neuere, und heute weiter verbreitete SCSS-Syntax (Sassy CSS).

Bei SASS ist die Einrückung des Quelltextes ausschlaggebend für die Verschachtelung. Bei SCSS sind wie bei CSS die Klammern ausschlaggebend. Außerdem werden zum Abschließen der Zeilen wieder Semikolons benötigt. Wie SASS auf dem PC installiert wird, haben wir bereits beschrieben. Also muss es nur noch in WordPress integriert werden.

In der Terminal wechselt man in das Verzeichnis „wp-content/themes/“. Dort wird ein SASS-Projekt erstellt.

compass create mytheme --sass-dir "sass" --css-dir "" --javascripts-dir "javascript" --images-dir "images"

Wichtig ist hier, dass die CSS-Dateien im Theme-Ordner liegen und die SASS-Dateien oder SCSS-Dateien in einem Unterordnern. Außerdem sagen wir dem Projekt auch gleich, wo die JavaScripte und Bilder liegen werden. Diese Konfigurationen werden in der Datei „config.rb“ gespeichert.

Diese muss um den Pfad zum Fonts-Ordner erweitert werden.

fonts_dir = "fonts"

Die von SASS erstellten Dateien benötigen wir nicht und können sie löschen. Das wären im Theme-Ordner: „print.css“, „screen.css“ und „ie.css“. Im SASS-Ordner sind dies entsprechend: „print.scss“, „screen.scss“ und „ie.scss“.

Wir brauchen jedoch die Ordner: „images“, „javascript“ und „fonts“ im Theme-Ordner und legen diese an. Im Ordner sass erstellen wir jetzt unsere erste SCSS-Datei: „style.scss“. Diese muss den gleichen Namen haben, wie die Theme-CSS-Datei, die WordPress benötigt, damit diese künftig aus der SCSS-Datei erstellt wird.

Der Inhalt ist vorerst nur unser Kommentar, den das Theme benötigt:

/*
Theme Name: MyTheme
Theme URI: http://www.url.de/themes/mytheme
Author: Ihr gute Name
Author URI: http://url.de/
Description: 
Version: 08-15 Beta
License:
License URI:
Tags: twig, scss
Text Domain: mytheme
*/

Im Terminal kann jetzt im Theme-Ordner Compass gesatrtet werden mit dem Befehl: „compass watch“ oder „compass compile“. Der zweite Befehl compiliert die CSS-Datei einmalig. Der erste Befehle überwacht den Theme-Ordner und baut bei jeder Änderung die CSS-Datei neu.

WordPress-Themes: Bootstrap 4

Wir möchten gleich mit Bootstrap 4 in diesem Projekt arbeiten. Bootstrap 4 unterstützt jedoch nur die Browser IE 9+ und iOS 7+. Schaut man jedoch bei Browser-Statistiken nach, dann sieht man schnell, dass diese Browser maximal 4% der Besucher einer Website einsetzen. Wer so etwas benutzt, der fährt auch mit platten Reifen ohne Profil auf der Straße und ist selbst schuld. Falls doch jemand diese Browser unterstützen möchte, wird die Version  Bootstrap 3 in der SASS-Variante benötigt.

Bootstrap 4 befindet sich noch in der Entwicklung und ist derzeit im Alpha-Zustand. Es sollte nicht auf einem produktiven System eingesetzt werden. Der Vorteil ist, dass Bootstrap seit dieser Version ebenfalls mit SCSS arbeitet. Bis zu dieser Version wurde LESS eingesetzt. Alle weiteren Unterschiede zwischen Bootstrap 3 und Bootstrap 4 finden sich auf der Website von Bootstrap 4.

WordPress-Themes: Bootstrap 4 implementieren

Bootstrap 4 muss natürlich herunter geladen und entpackt werden. Dann geht die eigentliche Handarbeit los. Im Verzeichnis „sass“ im Theme-Ordner wird ein Ordner „bootstrap“ benötigt. In diesen Ordner werden die Dateien aus der entpackten Zip-Datei aus dem Ordner „scss“, die einen Unterstrich am Anfang haben und der Ordner „mixins“ samt Inhalt verschoben.

Die Datei „bootstrap.scss“ wird umbenannt in „_bootstrap.scss“ und in den sass-Ordner (nicht den bootstrap-Ordner) verschoben. In dieser Datei sind ALLE Komponenten enthalten. Warum der Unterstrich? Diese Dateien werden vom CSS-Präprozessor SASS nicht automatisch compiliert und so wird verhindert, dass wir einen Berg unnötiger CSS-Dateien erzeugen.

Zum Aktivieren der Flexbox fügen wir am Anfang die Zeile hinzu:

$enable-flex: true;

Außerdem muss das Verzeichnis „/bootstrap/“ zu jedem Import hinzugefügt werden, dass sieht dann so aus:

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";

// Core CSS
@import "bootstrap/reboot";
@import "bootstrap/type";
@import "bootstrap/images";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/animation";
@import "bootstrap/dropdown";
@import "bootstrap/button-group";
@import "bootstrap/input-group";
@import "bootstrap/custom-forms";
@import "bootstrap/nav";
@import "bootstrap/navbar";
@import "bootstrap/card";
@import "bootstrap/breadcrumb";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/jumbotron";
@import "bootstrap/alert";
@import "bootstrap/progress";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/responsive-embed";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modal";
@import "bootstrap/tooltip";
@import "bootstrap/popover";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/utilities-background";
@import "bootstrap/utilities-spacing";
@import "bootstrap/utilities-responsive";

In unser Theme-Style-Datei „style.scss“ importieren wir jetzt Compass & Bootstrap:

/* Compass importieren */
@import "compass";
@import "compass/reset";

/* Bootstrap importieren */
@import "bootstrap";

Aufmerksame Leser werden es gemerkt haben, bei den Imports stehen schon die CSS-Styles für einige JavaScript-Komponenten von Bootstrap drin. Diese fügen wir natürlich auch noch hinzu.

Im Verzeichnis JavaScript wird wieder ein Ordner „bootstrap“ angelegt. Im entpackten ZIP-Ordner liegt bereits im Verzeichnis „dist/js“ die Datei „bootstrap.min.js“. Diese wird in das eben erstellte Verzeichnis „bootstrap“ verschoben.

Last but not least – muss Bootstrap noch in unser Template eingebunden werden. Das erledigen zwei Meta-Tags.

        <link rel="stylesheet" href="{{site.theme.link}}/style.css?{{ time }}" type="text/css" media="screen" />
        <script src="{{site.theme.link}}/javascript/bootstrap/bootstrap.min.js" type="text/javascript"></script>

Das war’s an dieser Stelle. SCSS, Compass und Bootstrap stehen jetzt mit allen Funktionen zur Verfügung.