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

WordPress-Themes mit Bootstrap

Seitenleiste einfügen

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine Seitenleiste lässt sich in ein WordPress-Theme einfügen. Hierfür muss eine PHP-Datei erstellt und die Leiste innerhalb des Themes registriert werden.
05:27

Transkript

Viele Blogs haben Seitenleisten hier am Rand und genauso eine Seitenleiste möchte ich jetzt gemeinsam mit Ihnen für dieses Theme bauen. Dreimal dürfen Sie raten, wie die entsprechende Datei heißt, die diese Seitenleiste definiert. 1, 2, 3 - und, haben Sie's erraten? Seitenleiste heißt auf Englisch ja sidebar und das ist auch der Name für unsere Seitenleiste. Die sidebar.php ist eine ganz normale Datei innerhalb meines Themes und da habe ich hier schon eine unordered list gemacht, ich habe dem ganzen einen Klassennamen gegeben, class gleich sidebar, damit ich dann hier meine style.css z. B. den list-style-type auf none setzen kann. Diese Datei ist sehr überschaubar. Da gibt es nur einen php-Befehl und der heißt dynamic_sidebar und momentan übergebe ich dem Ganzen kein Argument. Wenn ich das ganze hier speichere und mir draußen mal anschaue oder es neu lade, dann passiert zunächst einmal noch nichts. Die Seitenleiste scheint zwar zu existieren, aber sie wird noch nirgendswo eingebunden. Und das mache ich jetzt hier in der single.php, also ich möchte diese Seitenleiste auf der Einzelseite eines Beitrages anzeigen und hier habe ich ja eine row definiert in meiner muster.html-Datei und hier habe ich dann 2 Bereiche und da schreibe ich jetzt einfach hier einen neuen Bereich dazu. Der soll 4 Spalten lang sein. Ich mach' dieses Dings auch wieder zu. Und jetzt auch hier dürfen Sie dreimal raten, wie dieser Befehl heißt, mit dem ich die sidebar hole. Ähnlich wie get_header und get_footer, heißt hier der Befehl get_sidebar und wenn ich das Ganze jetzt abspeichere, dann hat sich immernoch nichts geändert. Die Seitenleiste ist erstellt. Ich habe sie auch in meinem Theme integriert, aber ich muss natürlich erst noch etwas in meine Seitenleiste integrieren und das mache ich hier mal im Back-End von meinem WordPress. Gehe ich mit wp_admin hinein. Design und hier habe ich normalerweise ein Bereich der heißt Widgets. Und diese Widgets kann ich ja in verschiedene Seitenleisten einbauen. Diesen Bereich gibt es hier noch gar nicht, das heißt ich muss ihn erst in der functions.php definieren. Ich gehe mal hier in meine functions.php, räume hier ein bisschen auf und hier kommt ein neuer Befehl und der heißt register_sidebar. Und dieser sidebar, der gebe ich 2 Parameter mit, zum einen einen Namen: Seitenleiste, wie Sie sehen, hier ein großes S, das ist also der Bereich, den später der Redakteur oder die Redakteurin sehen wird und eine eindeutige ID und die habe ich hier mit kleinen Buchstaben geschrieben. Jetzt speichere ich das Ganze ab. Und gehe nochmal in's Back-End. Lade das hier neu. Und wenn ich jetzt auf Design gehe, dann habe ich hier den Bereich Widgets und hier sehen Sie diese Seitenleiste mit dem großen S und jetzt kann ich hier bspw. einen Kalender einfügen, Metainformationen. Meta schreibe ich mal dazu. Oder bspw. auch beliebigen Text und da schreibe ich das ganz berühmte Hallo Welt, was jeder Programmierer in jeder Programmiersprache immer als erstes macht. Ich hab' das ganze gespeichert und jetzt schaue ich mir das auch draußen im Front-End an. Gehe auf eine einzelne Ansicht und ich sehe sie immer noch nicht. Also ich muss noch etwas machen. Also gehen wir nochmal zurück nach sidebar.php und dieser Befehl dynamic_sidebar, der bekommt noch einen Parameter mit und zwar welche sidebar möchte ich denn haben. Ich kann ja verschiedene haben, also manche Themes benutzen z. B. Seitenleisten auch, um unten im footer verschiedene Informationen bereit zu stellen. Wenn ich mehrere von diesen Seitenleisten habe, dann muss ich sie mit Namen ansprechen. Hier habe ich ein kleines s, dieses kleine s stammt genau von dieser ID hier und jetzt machen wir nochmal den letzten Test und hoffen, dass jetzt alles funktioniert und da haben wir auch. Jetzt habe ich hier die Seitenleiste mit Hallo und Hallo Welt. Wenn Sie diese Seitenleiste individuell gestallten möchten, dann gehen Sie am besten in den DOM-Inspector Ihres Browsers und schauen sich das Ganze mal an, also dieses Text Widget bspw. das wird hier automatisch mit li ID ist gleich text-2 und dann bekommt's eine Klasse widget, widget_text, widgettitle, textwidget usw. Das sind Klassennamen, die von diesen speziellen widget, das hier von WordPress mitgeliefert wird, auch vorgegeben sind und mit diesen Klassennamen kann ich jetzt natürlich arbeiten in meiner style-sheet-Datei und bspw. hier die styles für Überschriften usw. anpassen. Um eine Seitenleiste zu integrieren, brauchen Sie erstens diese sidebar.php. Da gibt es den Befehl dynamic_sidebar. Da geben Sie eine spezielle ID an. Sie müssen in den einzelnen Ansichten, die Sie haben wollen, also bspw. single.php, category.php usw. diese sidebar mit get_sidebar einbinden und in der functions, da müssen Sie natürlich diese sidebar auch einmalig registriert haben. Erst dann können Sie in Ihrem WordPress Back-End solche Seitenleisten auch zusammenstellen.

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!