Mit WordBoot kinderleicht Bootstrap in WordPress integrieren.
Aus diesem Gedanken heraus ist die Idee hinter WordBoot entstanden. Denn ich selbst Arbeite in der Frontend und Backend Gestaltung liebend gern mit dem HTML/CSS/JS Framework Bootstrap.
Ich selbst habe auch schon mit einige WordPress Themes, die mit Bootstrap umgesetzt wurden, test weise gearbeitet aber keines dieser Themes konnte meinen Erwartungen erfüllen.

Meine Erwartungen an einen Bootstrap WordPress Theme

Im Zuge der Test mit den verschiedenen WordPress Themes die als Framework Bootstrap einsetzen, bin ich immer auf das gleiche Problem gestoßen, das für mich eigentlich ein K.O. Kriterium war.
Alle Bootstrap WordPress Themes sind stark an den von WordPress vorgegebenen CSS-Selektoren angepasst, anstatt die in Bootstrap verwendeten CSS-Selektoren zu nutzen.
Als Beispiel nehme ich mal daher mal die simplen CSS-Selektoren für das Ausrichten von Bildern.

CSS-Selektoren WordPress

/* Ausrichtung Links **/
.float-right { ... }
/* Ausrichtung Zentriert **/
.mx-auto text-center d-block { ... }
/* Ausrichtung Rechts **/
.float-right { ... }

CSS-Selektoren Bootstrap

/* Ausrichtung Links **/
.float-left { ... }
/* Ausrichtung Zentriert **/
.mx-auto { ... } .d-block { ... }
/* Ausrichtung Rechts **/
.float-right { ... }

Generell könnte man jetzt sagen, es stört ja nicht, das WordPress seine eigenen CSS-Selektoren mitbringt. Zumal die Selektoren Nennung von WordPress ja durchaus sinn ergibt.
Dem stimm ich soweit auch zu. ABER, die Bootstrap Themes die ich bisher getestet habe, haben mittels LESS/SASS die Eigenschaften der Bootstrap Selektoren 1 zu 1 in die WordPress Selektoren übernommen.

Und hier liegt meiner Meinung nach der Fehler!
Denn somit sind die CSS Selektoren mind. 2 mal vergeben, wenn auch unter verschiedenen Namen, trotzdem 2 mal und das führt meiner Meinung nach zu unnötigen und aufgeblähten CSS Code.

Die bootstrap.css wird in allen getesteten Theme immer mit geladen und enthält alle mitgelieferten CSS-Selektoren von Bootstrap. Gleichzeitig wird aber auch in der style.css des Themes die von WordPress benutzen Selektoren, mit den aus Bootstrap kopierten CSS-Eigenschaften ebenfalls geladen, wodurch ein und die selbe Anpassung 2 mal vorhanden ist.

Jetzt handelt es sich bei den oben genannten Beispiel nur um CSS-Selektoren zur Ausrichtung von Bildern, aber beschäftigt man sich intensiver mit der Theme Gestaltung, fallen noch unzählige weitere CSS-Selektoren auf, die WordPress und Bootstrap unter verschiedenen Namen gleich führen und von den Entwicklern dann aus Bootstrap in den WordPress CSS-Selektoren übernommen werden.

Hier können die Geister nun stark auseinander gehen, aber meiner Auffassung nach ist es nicht Sinn und Zweck eines Frameworks (und dabei spiel es keine Rolle ob wir Bootstrap, YAML oder Pure.css nutzen), alles doppelt zu vergeben.
Denn in diesem fall kann ich auch gleich vollständig auf das Laden eines Framework verzichten und alles in die style.css packen.

Sollte man Bootstrap dann überhaupt einsetzen?
Diese frage stellt man sich natürlich jetzt und anhand der vielen Anpassungen sollte die Antwort ganz klar sein: Bootstrap macht keinen Sinn unter WordPress.
Warum also einen weiteres WordPress Theme auf Basis von Bootstrap entwickeln?

Bewusst, das WordPress für fast jeden zweck eigene CSS-Selektoren verwendet und Bootstrap diese CSS-Selektoren ebenfalls unter einen anderen Namen nutzt, habe ich mir viele Gedanken gemacht wie man Bootstrap in WordPress integrieren kann ohne dabei die Selektoren doppelt vergeben zu müssen.
Die Antwort ist eigentlich, sofern man sich mit WordPress auskennt recht einfach zu beantworten. Man passt WordPress mittels den mitgelieferten Hooks an.

WordBoot wurde also von Anfang an so entwickelt, das es die CSS-Selektoren Namen von WordPress mit denen von Bootstrap überschreibt, bzw. ergänzt. Dies wird mithilfe der WordPress Action- und Filterhooks erreicht.
Hierdurch werden in WordBoot keine CSS-Selektoren doppelt vergeben, was dazu führt das kein unnötiger CSS-Code Produziert wird.

WordBoot nutzt somit ausschließlich die CSS-Selektoren von Bootstrap. Durch das Anpassen der CSS-Selektoren mittels der WordPress Hooks nutzt der Theme aber einen weiteren essentiellen Vorteil. Er benötigt keine bzw. kaum eigene Funktionen um Bootstrap Elemente auszugeben.

Der Theme setzt mittels den in WordPress gelieferten Hooks die CSS-Selektoren von Bootstrap an den Hausinternen Selektoren an. In den wenigsten fällen musste ich Funktionen von WordPress speziell für Bootstrap kopieren und mit den CSS-Selektoren von Bootstrap anpassen, in den fällen wo ich es tun musste, habe ich die Funktionsnamen von WordPress aber beigehallten und durch den Prefix wb_ erweitert.
Durch den Einsatz der Hooks für die Anpassungen der CSS-Selektoren bietet sich aber ein weiterer vorteil. Man kann WordBoot im vollen Funktionsumfang auf eine bestehende WordPress Installation testen, ohne Inhalte Manuell anpassen zu müssen und nach der Deaktivierung des Themes ist alles wie vorher und keine Spur von Bootstrap.

Umfang von WordBoot

Genug Vorgeschichte zur Entstehung von WordBoot, kommen wir nun zu den Fakten.
In der Aktuellen 1.0.0-ALPHA Version kommt der Theme recht schlank und einfach daher, getreu dem Motto a simply WordPress Bootstrap Theme.

Wie bereits erwähnt, war es von Anfang an mein Ziel, Boostrap in WordPress zu Integrieren um das volle Potenzial von Boostrap auch in WordPress nutzen zu können. Das habe ich durch Anpassen der CSS-Selektoren auch erreicht. Mit dem Theme WordBoot könnt ihr also beliebige Bootstrap Designs für WordPress nutzen ohne Inhalte und Funktionen selbst anpassen zu müssen. WordBoot kommt Standard mässig nur im Bootstrap Default Design.

Das Theme soll über Child-Themes seine individuellen Designs erhalten, WordBoot selbst dient also legentlich als Einstieg. fKuenzel.de Basiert z.B. bereits auf WordBoot nutzt aber ein Child-Theme um sein Aktuelles aussehen zu erhalten (Nebenbei bemerkt ist auch hier noch nicht alles fertig).
Sobald WordBoot das ALPHA Stadium verlässt, wird es zum Theme auch ein Leeres Child-Theme geben
damit Ihr euch selbst individuelle Designs erstellen könnt. Sobald WordBoot 1.0.0 fertig ist, werde ich dann nach und nach Designs als Child-Themes für WordBoot erstellen und Veröffentlichen.

Der Funktionsumfang von WordBoot ist auch recht einfach und kommt daher eher leicht rüber. Trotz der vielen möglichkeiten die WordPress mit der Theme Customizer API bietet, verzichte ich fast ausschließlich auf diese.
So gibt es im Standard nur folgende Bereiche für das Customizing in WordBoot: Layout Optionen, Auszugs Optionen, Kommentar Optionen.
In diesen 3 Bereichen könnt ihr nachstehende Einstellungen tätigen.

Layout Optionen
Allgemeines Layout
Wieviele Spalten soll dein Layout haben?
(Auswahl: 1-Spaltig, 2-Spaltig Linke Sidebar, 2-Spaltig Rechte Sidebar, 3 Spaltig Linke- und Rechte Sidebar)
Default Wert: „1 Spaltig“
Artikel Layout
Wieviele Spalten soll dein Layout in der Artikel Ansicht haben?
(Auswahl: Default, 1-Spaltig, 2-Spaltig Linke Sidebar, 2-Spaltig Rechte Sidebar, 3 Spaltig Linke- und Rechte Sidebar)
Default Wert: „Default“
Seiten Layout
Wie viele Spalten soll dein Layout in der Seiten Ansicht haben?
(Auswahl: Default, 1-Spaltig, 2-Spaltig Linke Sidebar, 2-Spaltig Rechte Sidebar, 3 Spaltig Linke- und Rechte Sidebar)
Default Wert: „Default

Auszugs Optionen
Zeige Textauszug auf Artikel Seite?
Soll der Textauszug auf der Artikel-Detail Seite zusätzlich Angezeigt werden?
(Auswahl: Ja, Nein)
Default Wert: Ja
Textauszug auf Blog und Archiv Seiten?
Vollständige Artikel oder Text-Auszüge auf Blog und Archiv-Seiten anzeigen?
(Auswahl: Vollständige Artikel, Artikel-Auszug)
Default Wert: „Vollständiger Artikel“
Auszugslänge?
Wie viele Wörter sollen beim Text-Auszug angezeigt werden?
Default Wert: „135“
Button text Weiterlesen?
Welcher Text soll beim Auszugs Weiterlesen Button angezeigt werden?
Default Wert: „mehr Lesen“

Kommentar Optionen
Zeige Kommentare auf Seiten an?
Soll die Kommentar Funktion und Kommentare auf Seiten Angezeigt werden?
(Auswahl: Ja, Nein)
Default Wert: „Nein“
Sollen Kommentar Informationen auf Seiten Angezeigt werden?
Zeige Kommentar Meldungen (wie z.B. „Kommentare geschlossen“) auf Seiten an? (Diese Option funktioniert nur wenn Kommentare auf Seiten angezeigt werden)
(Auswahl: Ja, Nein)
DefaultWert: „Ja“

Die Customizer Funktionen in WordBoot befinden sich natürlich wie der gesamte Theme noch in Entwicklung, der hier dargestellte Stand ist der derzeitige IST zustand. Es könnte sein, das vielleicht noch ein paar sehr wenige Anpassungsmöglichkeiten hinzukommen.

Neben den Theme Customizer Funktionen, besitzt der Theme Standardmäßig 3 Widget Bereiche. Diese sind wie bei den meistens Themes in beiden Sidebars und im Fußbereich des Themes angelegt.

Ebenfalls besitzt der Theme Aktuell 2 Customizer Navigationen. Beide befinden sich im Kopfbereich und sind aufgeteilt in „Social Media Nav“ und „Top-Menu Nav„. Die Customizer Navigation ist z.B. einer der wenigen Funktionen innerhalb von WordBoot die mit einer eigenen Funktion daher kommen.

Die HTML-Struktur von wp_nav_menu() ist nicht kompatibel mit der von Bootstrap vorgegebenen HTML-Struktur, so das hier durch eine eigene NavWalker Klasse nachgebessert wurde. Ein Dank geht hierbei an Edward McIntyre, dessen Bootstrap Nav Walker Klasse in einer leicht modifizierten Variante in WordBoot zum Einsatz kommt.

WordBoot passt ebenfalls die von WordPress gegebenen Bild CSS-Selektoren an, bzw. ergänzt die Bilder mit den von Bootstrap vergebenen Klassen Automatisch. Da Bootstrap jedoch bei der Ausrichtung von Bildern keinen Abstand zum Text berücksichtigt, wird hier in der style.css nachgeholfen. Hier existieren die beiden Klassen img.pull-left{ ... } und img.pull-right { ... } um, je nach Ausrichtung mind. .75rem Abstand nach Links/Rechts und Unten zu gewähren.
Ebenfalls wird der Caption-Shortcode durch WordBoot gefiltert und es kommen die Caption und Figure Selektoren von Bootstrap zum einsatz.

Der Gallerie-Shortcode in WordPress wird derzeit von WordPress komplett ersetzt. Beim Testen der Funktion im zusammenhang mit der Offiziellen WordPress Theme Unit Test Datei und dem WordPress Plugin Jetpack ist mir jedoch ein Problem aufgefallen.
Bei Aktivierten Jetpack Plugin und der Galerie Einstellung tiled galleries greift das Plugin nicht, da es für diese Funktion den Orginalen Gallerie-Shortcode erwartet. Aus diesem Grunde werde ich nochmal vollständig die Gallerie Funktion in WordBoot überarbeiten müssen und mir ggf. eine andere Lösung einfallen lassen müssen um derartige komplikationen zu vermeiden.
Im gleichen Atemzug werde ich auch die Caption-Shortcode Lösung nochmal überarbeiten/anpassen.

Natürlich kann es generell in zukunft passieren, das WordBoot mit einigen Plugins inkompatible ist, aber gerne bin ich bemüht, alle möglichen Komplikationen mit WordPress Plugins zu vermeiden.
Sobald der Theme also aus der Alpha und Beta Phase entlassen wird, gibt es eine möglichkeit mich über solche Probleme zu informieren.

Die Artikel Navigation die man oftmals unterhalb eines Artikels findet, so wie die Archiv-Pagination für Blog und Archiv Seiten, werden derzeit durch jeweils eigene WordBoot Funktionen ersetzt. Da ich jedoch noch nicht zufrieden mit dieser Art Lösung bin, wird sich hier sicherlich auch noch einiges ändern.

Eingebette Videos (von z.B. YouTube) werden an die Responsive embeds HTML-Struktur aus Bootstrap angepasst. Dies bedeutet das die HTML-Attribute frameborder="", height="" und width="" aus der Embed Funktion von WordPress entfernt werden.
Hierfür ist der in WordBoot hinterlegte Filter wb_oembed_replacer zuständig.

Es gibt noch Zahlreiche weitere Anpassungen um möglichst viele/alle Fronted CSS-Selektoren von WordPress an Bootstrap anzupassen, alle hier nun aufzuführen, würde den Rahmen des Artikels sehr weit sprengen, zumal dieser Artikel mit etwas über 16.000 Zeichen (inkl. benutzten HTML) einer meiner längsten Artikel ist, die ich je veröffentlicht habe.

Abschließend ist eigentlich nur noch zu sagen, das WordBoot mit zahlreichen Anpassungen es möglich machen wird, Bootstrap vollständig in WordPress zu Integrieren, ohne dabei die flexibilität von WordPress zu verlieren oder manuelle Content Anpassungen durchführen zu müssen.