Wie versprochen möchte ich heute zeigen, wie man schnell und einfach einen ganz individuell gestaltbaren Widgetized Footer mit dem Headway 2.0 WordPress Theme erstellen kann.

Vorab vielleicht kurz zum “Widgetized Footer”:
Ein Widgetized Footer ist ein Footer, wie Sie ihn hier auf GeldSchritte unten sehen können. Es ist also ein Footer, in den Sie im WordPress Admin-Panel Widgets “hineinziehen” können, wobei diese Widgets dann für gewöhnlich vom Design her anders aussehen sollten, als die Widgets in der Sidebar rechts.

Widgetized Footer mit Headway 2.0 herstellen

Bei Headway 2.0 gibt es gleich mehrere Möglichkeiten einen Widgetized Footer zu realisieren:

1. Den Theme Code direkt editieren.
   Das wird aber nur bewirken, dass der eigenhändig erstellte Code beim nächsten Update von Headway wieder verschwunden sein wird (er müsste jedes Mal wieder neu erstellt werden). Außerdem ist es mittlerweile so, dass man den eigentlichen Code des Headway Themes nicht mehr bearbeiten kann – offensichtlich haben einige früher derartige Veränderungen vorgenommen, dass sie das gesamte Theme “zerschossen” haben. Das hat Headway nun verhindert, indem man nicht mehr so leicht an den eigentlichen Quellcode herankommt.
2. Im Visuellen Editor eine “Widget Ready Sidebar” hinzufügen.
   Headway bietet die Möglichkeit nicht nur eine Widget Ready Sidebar hinzuzufügen (unter “Leafs and Columns”), sondern diese auch noch horizontal zu drehen (auf den Stift zum Bearbeiten klicken und unter “Look & Feel” die “Flip this sidebar horizontally” auswählen). Das Problem dabei ist jedoch, dass die Widgets vom Design her genau so aussehen, wie die Widgets in der Sidebar. Das sieht meistens nicht wirklich gut aus… man müsste schon ziemlich stark einsteigen um hier mittels eigenem CSS-Code entsprechende Änderungen vorzunehmen.
3. Easy Hooks, custom_functions.php und custom.css.
   Der dritte Weg ist der Weg, den ich gegangen bin. Er wirkt auf den ersten Blick kompliziert – ist er aber nicht. Dieser Weg bietet mehrere Vorteile, u.a.
   1. Wenn Sie die Easy Hooks verwenden, dann werden die Änderungen automatisch auf ALLEN Seiten und Unterseiten angezeigt – Sie brauchen sich keine Sorgen darüber machen, jetzt noch mühsam per Hand die Änderungen auf jeder Seite einzeln einzustellen.
   2. Sie können mittels CSS ganz einfach das Aussehen des so erstellten Footers dem Aussehen des eigentlich Footers (ganz unten wo Copyright steht) anpassen. Dann sieht’s eher wie “aus einem Guss” aus 😉
   3. Sie können diesen Bereich sehr einfach ansprechen und jederzeit wieder ändern und anpassen.

Schauen wir uns das Ganze mal genauer an.

Schritt für Schritt zum eigenen Widgetized Footer

Der Effekt, den ich erzielen wollte, war ein Footer mit drei Spalten, wobei ich in die einzelnen Spalten entweder Text oder Widgets einfügen wollte. Der Footer sollte dabei die Gesamtbreite des Blogs haben und die drei Spalten sollten ihn gleichmäßig ausfüllen. Die Widgets kann ich ganz leicht per WordPress Admin-Bereich gestalten, verändern oder tauschen und muss dazu nicht jedes Mal in den Visuellen Editor.

So sollte der fertige Footer also aussehen:

Und so sieht er auch aus – scrollen Sie einfach mal ganz nach unten 😉

Exkurs: WordPress und Widgets

Schauen wir uns ganz kurz einmal genauer an, wie WordPress Widgets behandelt.

Widgets können nur zu speziell definierten widgetfähigen Bereichen hinzugefügt werden, wie z.B. standardmäßig der Sidebar. Dabei werden Widgets im WordPress Admin-Bereich hinzugefügt, verändert oder gelöscht.

Um also Widgets nutzen zu können, müssen wir zunächst den widgetfähigen Bereich wählen – oder selbst bestimmen!  Headway macht beispielsweise nichts anderes, wenn wir etwa die oben bereits erwähnte “Widget Ready Sidebar” hinzufügen. Das Problem ist nur, dass dies eine vertikale oder horizontale Sidebar erstellt, die niemals komplett in den eigentlichen (Copyright-)Footer-Bereich integriert werden könnte.

Haben wir erst einmal unseren widgetfähigen Bereich definiert, dann können wir ganz einfach im WordPress Admin-Bereich Widgets hinzufügen. Und genau das wollen wir ja.

Widgetfähigen Footer-Bereich definieren

Um einen widgetfähigen Bereich als einen Teil des Footers zu definieren, müssen wir folgendes tun:

Zunächst müssen wir den Bereich bestimmen, an dem wir Widgets hinzufügen möchten. Dafür nutzen wir einen Easy Hook, den uns Headway zur Verfügung stellt und fügen den entsprechenden Code bei “Footer Open” hinzu.

Fügen Sie also diesen Code dem Easy Hook “Footer Open” hinzu:

if (!function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer-Widgets’)) echo ‘

Sie können einen Haufen Widgets hier reinpacken!

‘;
?>

Dieser Code kreiert also einen div-Bereich, das “Footer-Widgets” heißt. Wenn die “dynamic_sidebar”-Funktion nicht existiert oder der Widget-Bereich ohne Widgets ist, dann erscheint ein Text. Dann fügt der Code noch ein weiteres div hinzu, dass die Überschneidung mit dem eigentlichen Footer verhindert. Und schließlich werden die beiden divs natürlich wieder geschlossen 😉

Dann müssen wir diesen Bereich sozusagen registrieren – also WordPress “Bescheid sagen”, dass dies ein Bereich ist, wo wir gerne Widgets hinzufügen möchten.Dazu fügen Sie folgenden Code der custom_functions.php Datei hinzu (zu finden im WordPress Admin-Bereich unter “Design” –> “Editor”):

if (function_exists(‘register_sidebar’))register_sidebar(array(‘name’ => ‘Footer-Widgets’,’before_widget’ => ‘

‘,’after_widget’ => ‘

‘,’before_title’ => ‘

‘,’after_title’ => ‘

‘,));

Dieser Code überprüft zunächst das Vorhandensein der Sidebar und fügt dann unseren widgetfähigen Footer-Bereich hinzu. Er setzt außerdem einige standardmäßige div-Tags vor und hinter das Widget bzw. den Widget-Titel.

Wir haben nun also einen widgetfähigen Footer angelegt und auch WordPress “informiert”, dass dieser Bereich existiert.

Gehen wir jetzt in unserem WordPress Admin-Bereich auf “Design” –> “Widgets”, dann sehen wir den neu erstellten Bereich “Footer-Widgets”. Wir können jetzt ganz normal Widgets in diesen Bereich ziehen.

Was aber noch fehlt, ist ein anständiges Aussehen unseres Footers…

Widgetized Footer verschönern

Fügen Sie folgenden Code der Datei custom.css hinzu (zu finden unter “Design” –> “Editor”):

/* footer widgets */
body.custom div#footer-widgets {width:100%;}
body.custom div#footer-widgets div.footer-item {float:left; width:30%; margin:15px;}
body.custom div#footer-widgets h2 {font-weight:bold;font-size:14px;line-height:20px;border-bottom: 1px solid #8c9c71;
margin-bottom:4px;padding-bottom:4px;}
body.custom div#footer-widgets ul {padding:0px; margin:10px 0 0px;}
body.custom div#footer-widgets ul li {list-style-type:none; margin: 0 0 2px; padding: 0 0 2px;}
body.custom div#footer-widgets ul li a {text-decoration:none;}
body.custom div#footer-widgets ul li a:hover {text-decoration:underline;}
body.custom div#footer {padding-bottom:25px;margin: 0 auto;}
body.custom #footer ul {}
/* end footer widgets */

Mit diesem Code können Sie das Aussehen Ihres Widgetized Footers den eigenen Wünschen und Bedürfnissen entsprechend gestalten. Hierbei sollten Sie natürlich ein paar CSS-Kenntnisse mitbringen…

Der vorliegende Code stammt direkt von meinem Widgetized-Footer und hat demnach die von mir definierte Überschriftgröße und Farbe. Die Schriftgröße des Inhalts und die Hintergrundfarbe des Footers legen Sie übrigens über die Footer-Einstellungen in Ihrem Visuellen Editor fest (unter “Styles & Design” –> und dann aus dem Dropdown-Menü “Footer” auswählen).

Falls Sie von der technischen Seite nicht alles verstanden haben sollte – das ist nicht schlimm. Kopieren Sie einfach die Codes an die benannten Stellen und Sie erhalten einen Widgetized Footer, auch ohne die Technik dahinter verstanden zu haben 😉

Gern helfe ich notfalls auch, was den CSS-Code in der custom.css Datei angeht, um das von Ihnen gewünschte Design zu erreichen.

Ach ja, eine letzte Sache noch:
Wenn Sie gerne einen eigentlichen (Copyright-)Footer (also unterhalb der Footer-Widgets) haben möchten, der in etwa so aussehen soll

also mehrere Links und Hinweise in einer Zeile enthält, dann müssen Sie zunächst im Visuellen Editor den Admin-Link, den “Back To Top”-Link und den Headway-Link abschalten (alles im Visuellen Editor unter “Footer” im linken Menü). Dann fügen Sie der custom_functions.php Datei folgenden Code hinzu:

function change_copyright(){
return ‘

Powered by WordPress and Headway – Copyright © ‘.date(‘Y’).’ ‘.get_bloginfo(‘name’).’ | Contact Us | Privacy Policy | Terms & Conditions | Sitemap

‘;
}
add_filter(‘headway_copyright’, ‘change_copyright’);

Dieser Code erzeugt natürlich EXAKT den Footer, der oben im Screenshot zu sehen ist. Wollen Sie andere Punkte darin haben, müssen Sie ihn natürlich anpassen.

Ich wünsche viel Spaß mit Headway und Ihrem neuen Widgetized Footer 🙂
Ihr Gordon Kuckluck

Diese Anleitung basiert übrigens auf einem englischsprachigen Artikel von Paul Coughlin von Headwaytips.com, der mir freundlicherweise erlaubt hat, sie auch für den deutschsprachigen Raum zur Verfügung zu stellen. Vielen Dank Paul! 🙂