Kommentare 25

Eine neue Webseite entsteht (Teil 10): WordPress Footer-Widgets nutzen

Im CoffeeLove-Theme werde ich keine Sidebar, wie in WordPress-Themes normalerweise üblich, benötigen. Um dennoch in den Genuss der praktischen Widget-Funktion zu kommen, möchte ich wenigstens den dreispaltigen Footer-Bereich des Themes mit Widgets umsetzen. Dafür nutze ich die im Starkers-Theme standardmäßig zur Verfügung stehenden Footer-Widget Elemente. So kann der Footer später bequem im WordPress-Adminbereich angepasst werden.

Live-Demo des Themes

Um dem Tutorial besser folgen zu können, kannst du dir hier eine Live-Demo des CoffeeLove-Themes anschauen, und dir die in diesem Teil des Tutorials besprochenen Theme-Dateien (sidebar-footer.php, footer.php, functions.php, style.css) downloaden.

1. Der Footer-Bereich der CoffeeLove-Webseite

Auf der CoffeeLove-Webseite habe ich einen dreispaltigen Footerbereich im Layout angelegt. Hier möchte ich einen Kontaktbereich, die Öffnungszeiten des Cafés mit einen Link zu GoogleMaps, sowie Kunden-Meinungen unterbringen.

WordPress Tutorial Footer Widgets
Die drei Footer-Bereiche des CoffeeLove-Themes.

2. Die Footer-Widgets im Theme einrichten

Im Starkers-Theme hast du bereits vier leere Footer-Widgets zur Verfügung. Diese findest du genau wie die Sidebar-Widgets unter Design / Widgets im WordPress-Adminbereich.

WordPress Tutorial Footer Widgets

Da ich für das CoffeeLove-Theme nur drei Footer-Widgets benötige, kann ich das vierte Widget löschen. Dazu öffne ich die functions.php Datei meines Themes. Hier ist der Code für die Footer-Widgets vorbereitet. Ich suche nach dem Bereich »Register widgetized areas« in der functions.php Datei (ca. Zeile 360) und lösche den Code des vierten Footer-Widgets.

// Area 6, located in the footer. Empty by default.
register_sidebar( array(
	'name' => __( 'Fourth Footer Widget Area', 'twentyten' ),
	'id' => 'fourth-footer-widget-area',
	'description' => __( 'The fourth footer widget area', 'twentyten' ),
	'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
	'after_widget' => '</li>',
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );

Möchtest du in deinem eigenen Footer mehr als vier Elemente in Widgets anlegen, kannst du den gleichen Code natürlich auch nutzen, um unterhalb des vierten Footer-Widgets noch ein fünftes Widget anzulegen (usw.).

WordPress Tutorial Footer Widgets
Der Code für die 3 Footer-Widgets des CoffeeLove-Themes in der functions.php Datei.

3. Die sidebar-footer.php Datei vorbereiten

Alle benötigten Footer-Widgets sind also in der functions.php Datei vorbereitet. Als nächstes öffnest du die sidebar-footer.php Datei, um hier den Code für deine Footer-Elemente anzulegen.

WordPress Tutorial Footer Widgets
Die sidebar-footer.php des CoffeeLove-Themes mit den 3 Footer-Elementen.

Als erstes wird im Code der sidebar-footer.php Datei geprüft, ob die Widgets (first-, second- third-footer-widget-area) vorhanden sind. Ist dies der Fall, wird der Code für die Footer-Widgets aufgerufen.

Alle Footer-Widgets sind in den DIV mit der ID »footer-widget-area« eingeschlossen. Dann folgt jeweils der Code für die einzelnen Widgets (rosa, geld und hellblau markiert).

Mit einer if-Kondition wird abgefragt, ob die Widgets derzeit aktiv genutzt wird. Wenn dies der Fall ist, wird das Footer-Widget in einem DIV mit der ID »first« (bzw. second, third…) und der Klasse »widget-area« aufgerufen. Dann folgt der Widget-Inhalt als unordered List (ul). Ein Widget wird mit der WordPress-Funktion »dynamic_sidebar« aufgerufen:

<?php dynamic_sidebar( 'name-widget-area' ); ?>

Mehr Infos zur Funktion »dynamic_sidebar« findest du im WordPress Codex.

4. Die Footer-Widgets in der footer.php Datei aufrufen

Hast du die sidebar-footer.php eingerichtet, musst du jetzt noch in deiner footer.php Datei bestimmen, an welcher Stelle die Widgets im Footer eingefügt werden sollen. Dazu fügst du einfach folgenden Code-Schnipsel an der gewünschten Stelle in deine footer.php Datei ein.

<?php get_sidebar( 'footer' ); ?>

Die CoffeeLove footer.php Datei sieht also inzwischen so aus:

WordPress Tutorial Footer Widgets
Das »get_sidebar footer« Element ist in einen DIV mit der ID »footer« eingeschlossen.

Den DIV »footer-wrap« nutze ich übrigens, um den durchgezogenen Footer-Hintergrund im CSS als Background einzufügen. Im weiteren Element »footer-bottom« habe ich noch das Copyright, sowie den obligatorischen WordPress-Slogan »Proudly powered by WordPress« (diesmal sogar mit Herz) platziert.

Ein praktischer Trick, um das Copyright Datum automatisch zu aktualisieren ist folgender Code-Schnipsel:

<p>&copy; 2009 - <?php echo date("Y"); echo " "; echo bloginfo('name'); ?>.</p>

2009 steht dabei für die Entstehung deines Blogs. Das aktuelle Jahr, sowie der Name deiner Webseite werden dann automatisch eingefügt.

5. Widgets füllen und mit CSS stylen

Deine Theme-Dateien sind jetzt fertig vorbereitet. Du kannst also damit beginnen, deine Widget-Elemente im WordPress-Adminbereich mit deinen Inhalten zu füllen. Dazu kannst du meist ganz einfache Text-Widgets nutzen.

WordPress Tutorial Footer Widgets
Das zweite Footer-Widget bei CoffeeLove enthält die Öffnungszeiten und einen GoogleMaps-Link.

Jetzt hast du es schon fast geschafft. Als letzten Schritt musst du deine Footer-Elemente nur mit CSS stylen. Die style.css Datei des CoffeeLove-Themes, inkl. aller Footer-Styles kannst du dir hier direkt im Browser anschauen.

Hast du alle CSS-Styles für deinen Footer angelegt, bist du mit der Theme-Gestaltung deines Footers fertig :-)

Weitere Tipps zum Thema Widgets

Falls du dein Theme nicht ganz neu aufbaust, sondern ein bestehendes Theme mit Hilfe von Widgets optimieren möchtest, ist die Beschreibung zur Einrichtung von Widget-Bereichen mit praktischen Beschreibungstexten auf dem Blog von Frank Bültge sehr hilfreich.

Im nächsten Teil des Tutorials werde ich den Bilder-Slider mit Hilfe des JavaScript-Plugins »Nivo-Slider« umsetzen. Ich hoffe dir hat auch dieser Teil des Tutorials wieder gefallen, und du konntest einige Tipps und Tricks für die Umsetzung deiner eigenen Webseite in WordPress mitnehmen. Über deine Anregungen, Tipps und Fragen zum Tutorial freue ich mich schon sehr!

Weitere Teile der Tutorial-Serie

25 Kommentare

  1. Liebe Ellen,

    ich glaube Deine Artikelserie ist die beste deutschsprachige Anleitung zur Theme-Erstellung die es gibt.

    Für mich leider ein bisschen spät, vor einem halben Jahr habe ich mich zu diesem Thema fast ins Verderben gegoogelt *g*

    Auch wenn ich inzwischen das Meiste davon kenne (durch mühevolles Zusammentragen) ist es trotzdem ein super Nachschlagewerk und vor allem: Alles an einer Stelle. Und ein paar Sachen habe ich auch noch gelernt… bzw. bessere oder einfachere Wege zum Ziel ;-) Oder Anregungen, wie man es auch machen kann….

    Also ganz vielen Dank dafür und ganze Mühe… Du musst doch sicher einige Stunden an jedem Artikel sitzen oder?
    Viele Grüße aus dem Norden,
    Daniela

    • Hallo Daniela,

      vielen herzlichen Dank für deinen Kommentar und das tolle Feedback. Das freut mich wirklich sehr :-)

      Mir macht die Serie wirklich riesigen Spaß, trotz des doch recht hohen Zeitaufwandes…und es werden irgendwie immer mehr Teile ;-) Aber ich denke so ausführlich beschrieben hilft ein solches Tutorial am besten, den Gesamt-Prozess einer Webseiten-Entwicklung nachvollziehen zu können. Klar, jeder Designer / Entwickler geht da ein bisschen anders vor, aber durch gegenseitige Tipps / Verbesserungsvorschläge etc. lernt man ja auch voneinander weiter :-)

      Ich bin selbst immer wieder viel am googlen, recherchieren, ausprobieren…und gerade bei meinen ersten Versuchen in WordPress hätte ich glaube ich so einen “Gesamtüberblick” auch ganz gut gebrauchen können ;-)

      Ich freue mich auf jeden Fall sehr, dass die Tutorial-Serie so gut ankommt, und freue mich auch schon auf den nächsten Teil :-)

      Viele Grüße,
      Ellen

    • Hallo Jürgen,

      vielen Dank für dein Feedback :-) Ja, ich finde WordPress wirklich super, und man kann die verschiedensten Webseiten damit aufbauen. Vielleicht kommst du ja bald einmal dazu, es auszuprobieren. Würde mich sehr freuen, wenn dir das Tutorial dann dabei weiterhelfen kann :-)

      Viele Grüße,
      Ellen

  2. Pingback: Hilfreiche Tipps und Plugins zur Footer-Gestaltung in WordPress | Elmastudio

  3. hallo ellen,

    seit kurzen ist unser weblog online und es steht viel arbeit an diesen mit leben bzw. artikeln zu füllen. leider komme ich bezüglich eines theme nicht so richtig vorwärts um nicht zu sagen ich trete auf der stelle. aktuell benutze ich das standart theme “kubrik” bis jetzt konnte ich weder bei kostenpflichtigen, geschweige denn bei kostenlosen themes etwas finden was mich anspricht. jetzt bin ich fast soweit mir darüber gedanken zu machen ob ich selber hand an das thema anlegen soll. wie gut müssen meine kenntnisse sein damit ich das hinbekomme? viele grüße von mallorca.

  4. Hallo Ellen, muss ich immer eine Footer.php einrichten? Oder kann ich auch den Code einfach komplett über die Functions in meinem Thesis nutzen? Herzlichen Dank für die tolle Arbeit und beste Grüße aus Mainz, Martin

  5. Marco

    Hallo Ellen,

    Dank deines Artikels habe ich ich nun einen dreispaltigen, widget-fähigen Footer in mein Theme einbauen können. Allerdings habe ich das Problem, dass dieser linksbündig angezeigt wird, während der Rest der Homepage zentriert dargestellt wird. Kannst du mir einen Tipp geben, wie ich auch den Footer zentriert dargestellt bekomme?
    Vielen lieben Dank!
    Marco

  6. Hallo Ellen!

    Danke danke danke für dieses absolut tolle Tutorial. Ohne deine Erklärungen wäre ich nieee so weit gekommen. Ich bin zwar gerade am basteln mit dem Footer (der will nicht so wie ich) aber auch nur weil ich wieder etwas anders haben wollte als du es erklärt hast. :-)
    Nochmals danke für die viele Mühe!

    Lg

  7. Pingback: Eine Webseite entsteht (Teil 1): Inspiration und Materialsammlung | Elmastudio

  8. Pingback: Eine neue Webseite entsteht (Teil 7): Die Datei-Struktur des WordPress-Themes | Elmastudio

  9. Pingback: Eine neue Webseite entsteht (Teil 9): Eine individuelle Startseite in WordPress | Elmastudio

  10. Pingback: Eine neue Webseite entsteht (Teil 12): Der WordPress-Blog | Elmastudio

  11. Hi,
    zu allererst einmal einen großen Dank für die tolle Serie, in den letzten Tagen war ich oft hier ;) Doch jetzt habe ich ein Problem, wird der content länger als die sidebar, so rutscht der footer rechts unter die sidebar. Ich suche schon seit ewigkeiten nach der lösung, komme jedoch nicht drauf.
    Hast du spontant eine idee?

    Vielen Dank
    Pete

  12. Liebe Ellen,

    zunächst ein großes Kompliment udn Riesendankeschön für die wunderbaren deutschen WP-Anleitungen. Ich bin auf der Suche nach einer Möglichkeit die Fußzeile unter dem Footer-Bereich zu ändern. Nach welcher Anleitung muss ich suchen bzw. kann ich sie überhaupt ändern?
    Liebe Grüße Sonja

  13. Liebe Ellen,
    ich versuche mich mal so kurz wie möglich zu fassen: Ich könnte dir die Füße küssen!
    Ich hab die ganze Woche versucht, ein Theme nach meinen Wünschen umzubauen und dank deiner Serie nimmt das ganze nun endlich langsam Form an. Und das Beste ist: Ich glaube, ich verstehe sogar die Zusammenhänge ;)
    Ich könnte dich sooo drücken!
    Liebe Grüße aus Kiel,
    Mia

  14. hallo ellen
    deine tutorials sind super und haben mir (anfänger) beim bau der webseite für meine frau sehr geholfen. was mich stört ist, dass der counter im footerbereich immer links über dem blogtitel angezeigt wird. wie bekomme ich den counter auf die rechte footer-seite.
    wordpress 3.5.2 – twentyten
    liebe grüße und schon mal vielen dank

    klaus

  15. Stefan Kähler

    Hi Ellen,

    super Tutorial, hat mir sehr weitergeholfen. Ich hätte nur einen kleinen Verbesserungsvorschlag:

    Die meisten Programmierer sind faulen Leute und eine Copy&Paste Funktion deiner Code-Schnipsel wäre super hilfreich.

Schreibe eine Antwort