Widgetized Footer mit Headway 2.0

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:

Headway 2.0 Widgetized Footer

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.

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

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‘ => ‚

‚,’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

Headway Footer

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 ‚

‚;
}
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! 🙂

 

Ausführliche Anleitungen und Hilfen zu Headway, gibt es im
Headway 3 Online-Video-Kurs!

 

Gordon Kuckluck

Initiator von GeldSchritte.de, Online-Marketer mit Leib und Seele, vor allem den Bereichen Landingpages, Conversionoptimierung und E-Mail-Marketing verschrieben, stets an der Schnittstelle von Offline- zu Online-Business.
About The Author

Gordon Kuckluck

Initiator von GeldSchritte.de, Online-Marketer mit Leib und Seele, vor allem den Bereichen Landingpages, Conversionoptimierung und E-Mail-Marketing verschrieben, stets an der Schnittstelle von Offline- zu Online-Business.

11 Comments

  • Thomas Williams

    27. September 2011

    Hallo Gordon,

    habe Easy Hook geöffnet und Code implementiert. Danach habe ich den Code der custom_functions.php hinzu gefügt. Folge: Weder mein Dashboard noch noch mein Blog sind jetzt erreichbar. Editieren ist auch nicht möglich. Was tun?

    • Gordon Kuckluck

      27. September 2011

      Da bleibt dann nur der Weg über FTP. Also die Dateien, die Du editiert hast mittels FTP öffnen beziehungsweise herunterladen, den implementierten Code löschen und wieder die Dateien hochladen beziehungsweise speichern.

      Grundsätzlich bei so etwas immer Sicherungsdateien VORHER herunterladen, damit im Notfall alles wieder hergestellt werden kann! Gewisse Gefahren bleiben halt immer, wenn man am Code „herumspielt“.

      • Thomas Williams

        27. September 2011

        Als Fehlermeldung erhalte ich:

        Parse error: syntax error, unexpected T_STRING, expecting ‚)‘ in /mnt/webg/a1/35/52883635/htdocs/wp-content/themes/headway-2013/custom/custom_functions.php on line 32

        Es war wohl ein Fehler am Code herumzuspielen. Jetzt frage ich mich, wie ich meinen Blog wieder instand setze ohne über große Programmierungs-Kenntnisse zu verfügen.
        Zum Thema FTP. Heißt das, ich soll das headway Theme noch einmal via FTP hoch laden, oder wie ist dein Ratschlag zu verstehen?

        • Gordon Kuckluck

          27. September 2011

          Nein, nicht neu hochladen.

          Mittels FTP öffnest Du genau die Datei, die in der Fehlermeldung erwähnt wird (die custom_functions.php im Ordner wp-content/themes/headway-2013/custom) und schaust in die dort erwähnte Zeile 32. Dort wird der Code sitzen, den Du eben eingefügt hast. Den löschst Du dann wieder und speicherst die Datei.

          • Thomas Williams

            27. September 2011

            Super, hat funktioniert. Wollte noch einmal erwähnen, dass ich selten jemanden getroffen habe, der so gut erklären kann wie du. Vielen Dank für deine Hilfe und schnelle Unterstützung!!!

            • Gordon Kuckluck

              27. September 2011

              Danke 🙂

              Trotzdem total blöd, dass es nicht funktioniert hat…. 🙁

              Mein Tipp:
              Warte bis Headway 3.0 da ist. Da sollte das WESENTLICH einfacher sein mit dem Widgetized Footer!
              Falls Du nicht warten willst, speichere die Dateien, die Du editieren willst VORHER via FTP auf Deinem PC ab (also die custom_functions.php zum Beispiel). Stelle dann sicher, dass Du wirklich alles exakt kopierst von dem Code (kein Komma oder Semikolon vergessen?) und versuche es noch einmal.

              Aber wie gesagt, ich würde warten auf Headway 3.0 😉

              • Thomas Williams

                27. September 2011

                Mach‘ ich, ich bleibe weiter dran, außerdem kenne ich da jemanden, der mir Schritt für Schritt zeigen wird, wie’s funzt. Da mache ich mir keine Sorgen! Bis bald;)

  • Bernd

    8. Oktober 2011

    Hallo Leute,
    ACHTUNG: Dieser Footer geht bei Updates von Headway zum Teil verloren!
    Es bleibt zwar der Eintrag des Easy Hook, doch alle Source-Anpassungen werden überschrieben.
    Daher ist vor dem Einspielen eine Datensicherung der Scripte und der Datenbank unbedingt erforderlich.
    Außerdem sollte man sich die geänderten Quellcode-Dateien irgendwie mit anderem Namen sichern, um zu wissen, wo man Änderungen gemacht hat! Also z.B. vor
    Anpassung des custom.css diesen nach custom_mit_Hook.css zusätzlich sichern.

    Nach dem Einspielen des Updates muss man diese geänderten Dateien mit den neuen Originalen abmischen, d.h. die eigenen Änderungen in die neue Version einmischen.

  • Katrin Weber

    10. November 2011

    Na toll – ich dachte, endlich gestalterische Freiheit gewonnen zu haben – und jetzt habe ich das gleiche Problem wie die anderen Kommentatoren – Fehlermeldung schon beim Speichern der custom_functions.php.

    Niemand erklärt aber auch, genau in welcher Zeile ich den Codeschnipsel einfügen soll … am Anfang, am Ende oder mittendrin? Welche dieser Zeilen ist bloß ein Kommentar und welche echter Code? Fragen über Fragen …

    Schade – aber ich teste weiter …

    Schönen Gruß
    Katrin

    • Gordon Kuckluck

      10. November 2011

      Ich glaube Probleme entstehen durch das Kopieren… vielleicht auch bereits durch mein Einfügen des Codes in WordPress hier…

      Bin schon am Überlegen, ob ich den Artikel rausnehme. Irgendwie haben scheinbar alle mehr Probleme damit, als dass es hilft…

      Den Code fügst du in der custom_functions.php ganz am Ende ein. Und der Easy Hook ist für gewöhnlich eh leer. Der Code für die custom.css auch ganz am Ende.