Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

WordPress-Themes mit Bootstrap

Grundgerüst aus Musterdatei erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Pfade der Muster-HTML-Datei zu den Bildern sowie Style Sheets müssen angepasst werden, damit die Datei als WordPress-Theme verwendet werden kann. Hierfür verfügt WordPress über eine spezielle Funktion.
05:05

Transkript

In diesem Video geht es darum, dass wir eine html-Musterdatei verwenden und daraus unser WordPress-Theme entwickeln. Ich habe hier so eine muster.html. Ich habe hier oben ein einfaches Menü, sogar mit einer Dropdown-Funktion. Ich habe hier so ein Karussel, also etwas, was da durchslidet, mit unterschiedlichen Überschriften und immer mit einem Blindtext und wenn ich runterscrolle, dann habe ich hier 3 runde Bilder, eine Überschrift, einen Blindtext und darunter jeweils einen Button der weiterverlinkt und hier habe ich noch sogenannte featurettes, das sind also sehr große Bilder, 500x500 Pixel, mit entsprechendem Text und ganz unten wird es mit einer Fußleiste abgeschloßen. Und aus dieser muster.html möchte ich jetzt ein WordPress-Theme gestalten. Zunächst einmal gehe ich auf die File-Ebene. Ich bin jetzt hier in wp-content\themes\Berge. Berge ist ja der Titel meines Themes und bisher habe ich nur die beiden Dateien, styles.css und index.php. Es sind aber noch 3 neue Bereiche hinzugekommen, einerseits das muster.html, das habe ich Ihnen gerade gezeigt. Dann gibt es noch eine carousel.css und im Ordner bootstrap, da sind verschiedene css-Vorlagen enthalten. Ich habe nochmal fonts, die auch hier drin sind, und ich habe nochmal js-Dateien, die hier mit bootstrap daherkommen. Schauen wir uns mal die muster.html im Quelltext genau an. Das ist eine ganz normale html-Datei, wir haben noch keinerlei php-Code darin, verschiedene Meta-Angaben und hier wird z. B. das bootstrap.min.css eingebunden und ganz am Ende, wenn ich jetzt also nach unten scrolle, dann werden hier nochmal die verschiedenen JavaScript Dateien eingebunden, einfach über bootstrap/js usw. Was wir jetzt machen müssen ist, wir müssen diese muster.html, ich kopiere sie einfach mal mit STRG+C und STRG+V und dann benenne ich sie einfach in index.php um, also nehme ich das index.php vorher weg und schreibe jetzt nur ganz normal index.php hin, hmtl kommt weg, er meckert hier noch, dass die Dateiendung sich verändert, jawohl. Und jetzt schauen wir uns die Datei auch nochmal in unserem Editor genauer an. Da haben wir sie. Wenn ich jetzt diese Datei aufrufe im Browser, einfach unter, in meinem Fall, 127.0.0.1. Wenn Sie Ihr WordPress unter /WordPress abgelegt haben, dann müssen Sie natürlich hier eine andere Adresse eingeben und jetzt lädt automatisch WordPress diese index.php. Wir haben jetzt hier schon diese Beispiel-Headline, die andere Beispiel-Headline usw. Aber offensichtlich hat es mit dem Pfaden noch nicht so ganz hingehauen und die müssen wir jetzt nämlich genauer anpassen. Wenn ich mir jetzt das ganze mal im DOM-Inspector anschaue, dann sehen Sie eben, dass die carousel.css nicht gefunden worden ist und viele andere auch nicht. Gehen wir mal in den Editor und wir sehen, dass diese Datei, die ich hier gerade geöffnet habe, dass sie ja normalerweise unter wp-content/themes/Berge liegt, dass die aber natürlich direkt vom root-Verzeichnis aufgerufen wird. Das heißt, wir müssen hier einen richtigen Pfad angeben und in dem Fall schreibe ich jetzt hier einfach php-Code hinein, den mache ich auf und wieder zu und jetzt lernen wir schon unseren ersten WordPress-Befehl und der heißt bloginfo, und dann gebe ich einfach an, welche Information ich haben will, das ist in dem Falle template_url. Hinten dran mache ich noch einen Schrägstrich und dann wird hier später, wenn es von WordPress aufgerufen wird, automatisch der korrekte Pfad zu meinem eigenen Theme eingesetzt. Das muss ich hier machen und das mache ich bei carousel und ganz am Ende dieser Datei muss ich das auch noch zweimal machen. Und wichtig hier muss ich immer noch einen Schrägstrich dazusetzen, damit es hier richtig angesetzt wird. Ok, ich speichere das ganze ab und lade diese Seite nochmal neu. Und jetzt schaut's schon besser aus. Zum einen wird hier auch richtig durchgescrollt und wenn ich jetzt hier runtergehe, dann habe ich's auch so wie in meiner muster.html-Datei. Wenn es bei Ihnen noch nicht so aus schaut wie Sie das erwarten, dann gehen Sie einfach mal in den DOM-Inspector und dann auf die Console und dann werden Sie hier schon automatisch sehen, welche Ressourcen nicht geladen worden sind, oder Sie schauen eben hier unter Network ob es irgendwo ein 404 Fehler gab. Die Aufgabe die Sie haben, ist, aus einer muster.html eine index.php zu machen und die entsprechenden Pfade dann hier mit diesem WordPress-Befehl bloginfo('template_url') anzupassen.

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)
Derzeit sind keine Feedbacks vorhanden...
 

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!