Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

WordPress-Themes mit Bootstrap

Menü für Bootstrap vorbereiten

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Ein WordPress-Menü muss bei der Arbeit mit Bootstrap vorbereitet werden. Hierfür stehen im Internet vorgefertigte PHP-Klassen zum Download zur Verfügung.
06:45

Transkript

Ja, unser Menü funktioniert ja schonmal, das ist ja die Hauptsache, aber es schaut noch ein bissel grauslig aus und wir werden jetzt in diesem Video dafür sorgen, dass dieses Menü hier unten so schön ausschaut wie das hier oben. Der Befehl dafür, den wir verwendet haben, der lautet ja wp_nav_menu und wenn wir danach mal suchen, und dann finden wir hier gleich einen Eintrag codex.wordpress.org/Function_ Reference/wp__nav_menu. Wenn wir da draufgehen, dann sehen wir, können wir diesem nav_menu auch unterschiedliche Argumente mitgeben. Also, wir können bspw. angeben, wo den die theme_location sich befindet, wir können sagen, welche menu_class das ganze haben soll, also welche css_class das Menü umschließen soll, wir können hier noch einen walker angeben. Dieser walker, der wird später für uns spannend werden. Wenn ich hier unten hingehe, dann sehe ich, dieser walker, das ist ein Objekt, das ich verwenden kann und mit diesem Objekt kann ich direkt jede einzelne Zeile Code innerhalb eines Menüs verändern. In vielen Fällen brauchen wir das nicht, aber manchmal ist es ganz hilfreich. Jetzt gehe ich mal zurück in meinen Editor. Ich bin hier in der header.php. Hier habe ich ja dieses wp_nav_menu und jetzt kann ich hier verschiedene Inhalte angeben. Ich kann sagen theme_location primary. Das ist genau der Bereich, dem ich hier auch in diesem register nav_menu vergeben habe. Dann kann ich sagen, ich möchte das ganze nicht von einem container umschließen lassen. Ich kann sagen, dass das Menü umschlossen werden soll von einer css Klasse, die heißt in dem Fall nav und navbar-nav, das ist etwas, was aus Ihrer muster.html-Datei kommt. Wenn Sie das ganze mit Bootstrap machen, wie ich hier in diesem Beispiel, dann ist dieses nav und navbar schon vorgegeben. Und als letztes gebe ich hier eben noch einen walker an. Walker, das ist eben dieses eine einzelne Objekt, das aus einer Standard WordPress Navigation eine Bootstrap-fähige WordPress-Navigation macht. Diesen walker brauchen Sie nicht, wenn Sie nicht mit Bootstrap arbeiten. Wenn Sie mit Bootstrap arbeiten, dann geben Sie bitte diesen walker hier an und dann müssen wir uns auch das entsprechende Objekt nochmal aus dem Internet laden. Dazu gehe ich zu github.com/twittem. Das ist ein Nutzer, der eben so einen Bootstrap navwalker gebaut hat. Wenn ich jetzt hier draufgehe wp_bootstrap_navwalker.php, da drauf klicke ich und dann ist wichtig, ich schau mir das ganze in der RAW-Ansicht an. Und jetzt nehme ich das ganze in die Zwischenablage und füge jetzt dieses Objekt in meine functions.php ein. Und dann muss ich darauf achten, dass ich hier die php-Zeichen richtig auf, bzw. zumache. Das hier brauche ich nicht und Sie sehen, hier wird eine neue Klasse angegeben und diese Klasse ist eine Erweiterung von Walker_Nav_Menu. Das ist eine vorgefertigte Klasse von WordPress und diesen Namen wp_bootstrap_navwalker, den habe ich hier auch direkt vergeben. Wie gesagt, das brauchen Sie nur, wenn Sie mit Bootstrap arbeiten. Schauen wir uns mal das Ergebnis an. Wie weit wir schon gekommen sind. Noch gar nicht besonders weit. Hier haben wir noch das Menü, das hier angezeigt wird, es schaut noch nicht so aus, wie wir das auch tatsächlich für uns brauchen. Warum? Es reicht natürlich nicht, wenn ich diese defaults hier definiere, ich muss diese defaults natürlich auch meinem wp_nav_menu übergeben. Wenn ich jetzt das ganze mir nochmal anschaue, dann ist das Menü ganz weg. Das liegt glaube ich daran, dass wir noch keinen Ort für das Menü angegeben haben. Also gehen wir mal nach wp_admin hinein. Dann gehen wir auf Design Menüs und da müssen Sie darauf achten, Sie haben ja hier diesen Reiter Positionen verwalten. Dass dieses erste Menü, das ist der Begriff, den wir genau in unserer functions hier verwendet haben. Dass dieses erste Menü auch tatsächlich mit einem Menü verknüpft wird, denn sonst wird hier natürlich nichts angezeigt. Jetzt schaut es schon so halbwegs gut aus. Wir haben jetzt hier schon mal das einzelne Menü. Wenn wir uns den Quelltext mal etwas genauer anschauen, mit STRG+U komme ich da ja gleich hin, dann sehen Sie hier habe ich meinen ul. Das ist dieses Menü, das von diesem wp_nav_menu stammt und eigentlich sollte das ja hier oben angezeigt werden. Also, gehen wir zurück in die header.php. Hier habe ich mein Menü, das ist mein Muster-Menü mit diesen normalen Inhalten und, wenn ich das jetzt hier rausnehme und dieses wp_nav_menu einfach hier oben einfüge, das ganze abspeichere, und jetzt nochmal die Probe auf's Exempel mache, Trommelwirbel. Halbwegs bin ich hier vorangekommen. Ich habe hier die Startseite, aber ich habe noch das alte Menü, das hier noch, ich habe hier nicht alles wirklich herausgenommen, also achten Sie darauf, dass Sie tatsächlich hier das gesamte ul wirklich herausnehmen. Und wenn ich das ganze jetzt hier noch ein bisschen schöner mache, und wenn ich jetzt das ganze nochmal, Trommelwirbel, jetzt funktioniert's, aber das heißt ich habe hier die Startseite, Wanderausrüstung, also ich bin hier jetzt tatsächlich auf einer anderen Seite, die sieht zwar noch gleich aus, weil mein Menü noch nicht damit umgehen kann, aber ich habe hier ein Menü wo ich hier auf verschiedene Bereiche meiner Webseite zugreifen kann. Was ich jetzt noch als letztes mal ausprobieren möchte ist, was passiert wenn ich eigentlich ein Dropdown-Menü habe? Das heißt, ich gehe zurück nach Design Menüs und baue mir jetzt hier ein Dropdown-Menü, ich mache hier einfach einen Link zu einem Kreuz und hier sage ich z. B. Ausrüstung. Ausrüstung. Jawohl, ist richtig geschrieben. Dann entsteht hier unten ein neuer Menüpunkt und da möchte ich jetzt die Ausrüstung für's Klettern als Untermenüpunkt haben, und die Wanderausrüstung soll auch ein Untermenüpunkt werden. Ich speichere das ganze ab. Und hoffe das es, wenn's gut läuft, auf Anhieb funktioniert hat. Hier haben wir jetzt die Ausrüstung und hier auch das automatische Untermenü. Das, wie gesagt, mit diesem Untermenü, funktioniert deswegen so gut, weil ich mich hier schon an Bootstrap ranhänge und weil ich in meiner functions.php eine eigene walker extention geschrieben habe für das Menü, das aus einem WordPress-Menü ein Bootstrap-Menü macht, und um dieses Menü einzufügen, brauche ich nur wp_nav_menu und dem übergebe ich dann verschiedene Inhalte, wie ich mein Menü gestalten möchte.

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)
Sehr hilfreich
Manuel H.
Für Benutzer, die bereits fundierte Kenntnisse mit HTML, CSS sowie erste Erfahrungen mit PHP haben, führt dieses Training ohne Umwege zum persönlichen Wordpress-Theme mit Bootstrap. Danke, dieses Training hat mir den Einstieg stark erleichtert! :)
 

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!