Laden…

So bindest du Bootstrap 4.3 in dein WordPress Theme ein

Du möchtest ein WordPress Theme auf Bootstrap Basis basteln? – Ich zeige dir, wie du Bootstrap 4.3 in deinem Theme integrieren kannst.

1. Bootstrap downloaden

  • Lade dir zunächst Bootstrap runter.
  • Entpacke das Verzeichnis und lege die bootstrap.min.js in dem js-Verzeichnis und die bootstrap.min.css in dem css-Verzeichnis deines Themes ab.
  • Du solltest nun folgende Ordner-Struktur haben:

Einige werden sich an dieser Stelle vielleicht wundern, dass ich im css-Verzeichnis eine zweite style.css Datei angelegt habe…. Ich habe mir angewöhnt meine eigenen Styles immer in dieser Datei zu schreiben. So habe ich alle Stylesheets an einem Ort bzw. in einem Ordner und das Ganze wirkt für mich etwas strukturierter. Die eigentliche style.css im Root-Verzeichniss des Themes nutze ich ausschließlich um die nötigen Theme-Angaben wie Name, Autor, Beschreibung usw. vorzunehmen.

2. functions.php anpassen

Schau dir die funcstions.php Zeile für Zeile an.

Wichtig ist, dass sowohl dein eigenes CSS und dein eigenes JS nach Bootstrap geladen werden. Die Reihenfolge der wp_enqueue-Funktionsblöcke spielt dabei keine Rolle. Jedes Script und jedes Stylesheet bekommt einen festgelegten Namen. Wenn man diesen Namen in das Array eines anderen wp_enqueue-Block schreibt, wird das betroffene Script/Stylesheet automatisch danach geladen.

Über den Wert true sorge ich außerdem dafür, dass sämtliches JavaScript erst im Footer geladen wird. So findet das Laden der Skripte erst ganz zum Schluss statt, während sämtlicher HTML und CSS Code bereits vom Browser verarbeitet wurden und für deinen Webseiten-Besucher sichtbar ist.

Ich freue mich immer über Kommentare und Anmerkungen. Wenn dir dieser Beitrag gefallen hat, teile ihn doch einfach auf Facebook, Xing, LinkedIn, oder wo auch immer 😉 Bis dahin – Happy Coding!

 

Schreibe einen Kommentar