WordPress-Themes mit Bootstrap

Musterdatei erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Eine Muster-HTML-Datei kann mit Hilfe von Bootstrap erstellt werden. Diese dient der Definition des Aussehens eines WordPress-Themes und wird anschließend um vielfältige WordPress-Funktionalität erweitert.
06:22

Transkript

Wenn Sie schon in der glücklichen Lage sind, ein vorgefertigtes Layout für ein neues WordPress-Blog zu haben, dann können Sie wahrscheinlich dieses Video überspringen. Ansonsten werden wir jetzt uns hier erstmal eine muster.html-Datei erstellen und zwar mit Hilfe von Bootstrap, das heißt wir werden erstmal eine blanke html-Datei haben, die das Aussehen unseres WordPress Themes definiert und wir werden dann später nach und nach diese html-Datei mit WordPress-Funktionalität anreichern. Ich bin jetzt hier auf der Seite getbootstrap.com. Dieses "get" vorne ist wichtig, wenn Sie das nicht schreiben, dann landen Sie woanders. Unter getbootstrap.com kann ich mir zunächst einmal Bootstrap herunterladen, mit dem großen Button am Anfang. Dann habe ich hier die Möglichkeit, Bootstrap, den Source Code oder Sass herunterzuladen. Ich nehme einfach die Standard-Variante, Download Bootstrap. Das ist dann eine ZIP-Datei, die ich dann hier später entpacken kann. Das ist lediglich das CSS und JavaScript, das wir für Bootstrap brauchen. Was wir auch noch brauchen, das ist eine vorgefertigte Template-Datei und wenn ich jetzt hier auf Getting started klicke, und mal runterscrolle, dann habe ich hier verschiedene Möglichkeiten. Hier sehen Sie, ich kann hier bspw. so eine Datei schon herunterladen. Da gibt es schon ein vorgefertigtes Navigationsmenü, es gibt hier verschiedene Buttons, Thumbnails usw. Und da kann ich schon außer ein paar Beispielen auswählen und ich entscheide mich jetzt hier für dieses Carousel Beispiel. Wenn ich da mal draufklicke, dann sehen Sie kann ich hier auch durchsliden. Wenn ich hier runtergehen, dann habe ich hier runde Bilder, ich hab einzelne Buttons und hier nochmal sogenannte featurettes, also große Bilder mit großen Überschriften, die ich mir hier anzeigen lassen kann. Genau das möchte ich auch haben. Ich möchte dieses Layout später in meinem WordPress-Theme verwenden und daraus baue ich mir jetzt eine muster.html-Datei. Ganz einfach, ich gehe jetzt hier mal in den Quelltext hinein und nehme jetzt diesen gesamten Quelltext mit STRG+A und STRG+C in die Zwischenablage und gehe jetzt in meinen Editor und innerhalb meines Themes/Berge-Verzeichnisses, da mache ich jetzt eine neue Datei auf. WordPress\wp-content\themes\Berge. Und hier schreibe ich jetzt mal ein muster.html hinein. Und speichere das ganze einfach mal ab. Hier habe ich in dieser Datei verschiedene Pfade zu meinem Bootstrap hin, die muss ich jetzt natürlich anpassen. Ich werde mein Bootstrap-Verzeichnis hier auch in dieses Verzeichnis hineinlegen. Ich habe ja unter Downloads dieses Bootstrap heruntergeladen, und wenn ich jetzt hier reingehe, dann sehen Sie ich habe hier css, fonts und JavaScript, und genau das hier nehme ich jetzt mal auch in die Zwischenablage und speichere es nach wp-content\themes, in meinem Fall Berge und da speichere ich es, das ganze einfach mal ab, weil das hier direkt aus einem ZIP-Ordner kommt, muss ich das noch mehrmals bestätigen, und jetzt habe ich hier diese verschiedenen Unterordner mit den css-Dateien von Bootstrap mit verschiedenen Font-Dateien und mit JavaScript-Dateien. Damit es hier ein bisschen schöner ausschaut, benenne ich den Ornder mal um in bootstrap und jetzt muss ich auch die Pfade hier in meiner muster.html anpassen, bis zu diesem dist. Das muss weg. Bootstrap/js und das mache ich jetzt sowohl im footer meiner Datei, als auch hier ganz oben im header. Wenn wir jetzt hier mal genauer nachschauen, da wird nach css/bootstrap.min verlinkt und hier haben wir noch das carousel, das müssen wir uns nochmal organisieren. Ich speichere das ganze ab und schaue mir das ganze jetzt mal hier an. Das sieht schon so halbwegs gut aus, aber die Slides funktionieren noch nicht so ganz, diese Bilder sind noch nicht so richtig. Also, wir werfen mal ein Blick in den DOM-Inspector und wenn wir jetzt hier auf Network gehen und die Seite nochmal neu laden, dann sehen wir, wird hier etwas noch nicht richtig eingebunden, carousel.css fehlt noch und docs.min.js, das haben wir auch noch nicht. Das holen wir uns mal von dem Originalbeispiel, das wir gerade hatten. Also gehen wir mal in den DOM-Inspector und laden die Seite neu und dann haben wir hier dieses carousel.css, und wenn ich jetzt sage "Open link in new tab", dann kann ich mir auch hier diesen gesamten Quelltext holen und wenn ich jetzt hier diese Dateien neu anlege und sage, ich möchte ein neues File haben, muss ich schauen, dass ich es ins richtige Verzeichnis speichere und auch hier das ganze richtig benenne, mit der richtigen Anzahl an r, s und ls. Habe ich hier. Ich gehe auf Finish und speichere das ganze ab. Schauen wir uns an, was jetzt noch fehlt, es schaut hier oben schon mal ganz gut aus, aber ich habe hier immer noch dieses docs.min.js, das fehlt auch noch. Also hole ich mir das auch nochmal vom Original. Wenn ich jetzt hier in den Quelltext gehe, eine andere Möglichkeit da hinzugelangen, dann haben wir hier unten ja dieses docs.min.js. Link in einem neuen Tab öffnen. STRG+A und STRG+C. Dann habe ich es in meiner Zwischenablage und dann sage ich, ich möchte eine neue Datei aufmachen und die heißt docs.min.js und die speichere ich jetzt in meinem Fall nach bootstrap/js, ich bin da völlig frei wo ich das ganze hinspeichere. Und hier kommt der Text hinein und jetzt muss ich natürlich noch dafür sorgen, dass hier der entsprechende Link hier auch richtig gesetzt ist, bootstrap/js/docs.min.js. Ich hoffe, dass ich alles richtig gemacht habe. Und wenn ich mir das ganze hier jetzt nochmal genauer anschaue, dann habe ich hier unten keine Fehlermeldung mehr und ich habe mir eine fertige muster.html-Datei, mit Hilfe von Bootstrap gebaut. Wie gesagt, wenn Sie schon eine muster.html haben, dann müssen Sie das natürlich nicht nachbauen, für alle anderen gilt jetzt: Wir haben hier eine voll-funktionstüchtige html-Seite, die wir jetzt nach und nach mit WordPress-Funktionalität belegen werden.

WordPress-Themes mit Bootstrap

Verwirklichen Sie Ihre eigenen Designvorstellungen bei Ihrem Webauftritt und sehen Sie, wie Sie WordPress-Seiten über Plug-ins und Themes wie z.B. Bootstrap erweitern können.

2 Std. 33 min (39 Videos)
Leider nicht mehr aktuel!
Anonym
Der neue Bootstrap Quellcode ist ein wenig geändernt worden! doc.js ist nicht mehr zu finden.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!