Die Inspiration für dieses Tutorial stammt von einem Tweet, den ich erhalten habe mit Feedback für das bald erscheinende RS12-Theme.
Obwohl das widgetisierte Footer-Element es letztendlich nicht in die Veröffentlichung des RS12-Themes geschafft hat, habe ich beschlossen, dieses Tutorial zu schreiben, um zu zeigen, wie genau man einen widgetisierten Footer in seinem Theme hinzufügt. In dieser Anleitung lernst du:
- Den HTML- und CSS-Code, der für die Erstellung des widgetisierten Footers benötigt wird
- Wie man gängige WordPress-Template-Tags als Platzhalter hinzufügt
- Wie man den Footer widgetisiert und Widgets darin platziert
Es wird viel Code in diesem Beitrag geben, also lies weiter, wenn du bereit bist...
Ich werde das Green Rays WordPress-Theme als Beispiel in diesem Tutorial verwenden. Im Moment enthält der Footer nur eine Standard-„Copyright“-Nachricht und Credits.
Das HTML
Der erste Schritt ist das Hinzufügen des HTML-Markups. Nehmen wir an, wir werden drei verschiedene Abschnitte im widgetisierten Footer mit Listen der neuesten Beiträge, monatlichen und täglichen Archivbeiträge haben. Wir werden diesen HTML-Code über die aktuelle „Copyright“-Zeile einfügen.
<div class="footer-item"><br>
<h3>Neueste Beiträge</h3><br>
<ul><br>
<li><a href='#' title='Vorgestellter Beitrag'>Vorgestellter Beitrag</a></li><br>
<li><a href='#' title='Blockzitate'>Blockzitate</a></li><br>
<li><a href='#' title='So funktioniert der „more“-Tag'>So funktioniert der „more“-Tag</a></li><br>
<li><a href='#' title='Bestellen oder Nicht bestellen'>Bestellen oder Nicht bestellen</a></li><br>
</ul><br>
</div><br>
<div class="footer-item"><br>
<h3>Monatliche Archive</h3><br>
<ul><br>
<li><a href='#' title='März 2008'>März 2008</a></li><br>
<li><a href='#' title='Februar 2008'>Februar 2008</a></li><br>
<li><a href='#' title='Januar 2008'>Januar 2008</a></li><br>
<li><a href='#' title='Dezember 2007'>Dezember 2007</a></li><br>
</ul><br>
</div><br>
<div class="footer-item"><br>
<h3>Tägliche Archive</h3><br>
<ul><br>
<li><a href='#' title='7. März 2008'>7. März 2008</a></li><br>
<li><a href='#' title='9. Februar 2008'>9. Februar 2008</a></li><br>
<li><a href='#' title='4. Januar 2008'>4. Januar 2008</a></li><br>
<li><a href='#' title='22. Dezember 2007'>22. Dezember 2007</a></li><br>
</ul><br>
</div><br>
<div class="clear"></div>
Im Grunde platziert dieser Code jedes „Widget“ in einem Div. Innerhalb jedes Widgets befindet sich eine Überschrift und eine unsortierte Liste mit Links. Ja, ich weiß, die Links führen nirgendwohin. Wir werden dies später durch WordPress-Template-Tags ersetzen. Hier ist, was wir bisher haben:
Das CSS
Wie du sehen kannst, sieht das ohne CSS-Styling nicht gut aus. Füge den folgenden Code zu deiner Stylesheet-Datei hinzu.
.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}
Was dieser Code tut, ist, jeden Footer-Bereich nach links zu verschieben, was im Grunde bedeutet, dass sie nebeneinander liegen können. Die Breite ist auf 33% eingestellt, was genügend Platz für drei Footer-Bereiche in einer einzigen Zeile bietet. Außerdem wird jedem Footer-Bereich ein wenig Abstand nach unten hinzugefügt. Das zweite Stück ist nur das Auffüllen der Listen um 15 Pixel nach links.
Jetzt können Sie sehen, wie HTML und CSS zusammenkommen. Hier ist, was Sie bisher haben sollten:
WordPress-Code
Im Moment haben wir eine Reihe von leeren HTML-Links ohne tatsächlichen WordPress-Code. Ersetzen wir die Listen unter „Recent Posts“, „Monthly Archives“ und „Daily Archives“ durch die entsprechenden WordPress-Template-Tags. Ersetzen Sie, was Sie derzeit haben, durch Folgendes:
Die Parameter sollten ziemlich selbsterklärend sein, aber wenn Sie sich bei einem von ihnen nicht sicher sind, versuchen Sie, wp_get_archives im WordPress Template Tag Lookup Tool nachzuschlagen. Denken Sie daran, ich verwende nur die wp_get_archives()-Template-Tags als Platzhalter. Wir werden diese später durch andere WordPress-Widgets ersetzen, nachdem wir den Footer mit Widgets versehen haben.
Widgetisieren Sie es
Für diesen Teil des Tutorials werde ich Teile aus meinem vorherigen Tutorial zum Widgetisieren von Themes entlehnen.
Der erste Schritt ist die Registrierung der „Sidebars“. Ersetzen Sie dazu einfach den aktuellen Inhalt der Datei functions.php durch Folgendes:
'Sidebar',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
if ( function_exists( 'register_sidebar' ) )
register_sidebar(array(
'name' => 'Footer',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
?>
Jetzt gehen wir zu sidebar.php und ersetzen den aktuellen dynamischen Sidebar-Bedingungstag durch diesen:
Durch diesen:
Nun gehen wir in unsere footer.php-Datei und umschließen die Footer-Elemente mit ihrem eigenen, entsprechenden Sidebar-Conditional-Tag. Fügen Sie direkt vor dem ersten „sidebar-item“-Div Folgendes hinzu.
Direkt nach dem letzten schließenden „footer-item“-Div (und über dem „clear“-Div, das wir zuvor hinzugefügt haben) fügen wir Folgendes hinzu:
Okay, jetzt sollten unsere Sidebar und der Footer mit Widgets bestückt sein. Testen wir es aus, indem wir ein paar Widgets im Footer hinzufügen. Ich füge ein Blogroll-Widget, ein Widget für die letzten Kommentare und ein Text-Widget hinzu. So sollte es aussehen:
Fazit
Nun, das sind die Grundlagen, um Ihrem Theme einen Widget-fähigen Footer hinzuzufügen. Möglicherweise möchten Sie separate Styling-Regeln für andere Arten von Widgets hinzufügen, wie z. B. den Kalender oder die Suchleiste. Dies wird wahrscheinlich nicht mit jedem Theme funktionieren, wie z. B. dem RS12-Theme, da es einen nicht erweiterbaren Footer hatte.
Wenn jemand zufällig das aktualisierte Green Rays-Theme möchte, kann er es hier herunterladen. Auf diese Weise können Sie genau sehen, wo ich den Code hinzugefügt habe. Sie können es auch mit dem Original-Theme vergleichen.
Ich hoffe, das Tutorial hat Ihnen gefallen. Werden Sie Ihrer Theme einen Widget-fähigen Footer hinzufügen? Gibt es etwas im Code, das ich oben verwendet habe, das Sie anders machen würden? Fragen, Kommentare, Vorschläge und Kritik sind alle willkommen, also äußern Sie sich gerne in den Kommentaren.
Leland,
Hier ist der Pastebin-Link für meine functions.php-Datei. Ich habe sie ohne deine Änderung gepostet. Deine Hilfe wird geschätzt.
http://pastebin.com/m40073591
„Ich versuche auch, meinen Footer mit deinem Schritt zu widgetisieren, aber wenn ich den Code zu functions.php hinzufüge, erhalte ich immer die gleiche Fehlermeldung:
Parse error: syntax error, unexpected ‘}‘ in /home/………..redacted………/functions.php on line 230
Ich bin sicher, das bedeutet, dass ich nur ein ‚}‘ falsch platziert habe, aber es scheint nicht zu funktionieren, wenn ich es entferne. Hilfe?“
Ich habe die gleichen Probleme. Könnten Sie mir Ratschläge geben?
Danke,
Dave
Hast du das jemals herausgefunden? Ich habe auch das gleiche Problem, aber es trat auf, als ich meinen sidebar.php-Code geändert habe.
Wie hast du es behoben?
Ich verwende 2 Sidebars, also habe ich 2 sidebar.php-Dateien. Ich habe versucht, den Code in seinen ursprünglichen Zustand zurückzuversetzen, aber ohne Erfolg. Ich schätze, ich muss meine Backup-PHP-Datei hochladen, aber das wird das Problem nicht lösen, es wird mir nur erlauben, weiter an meiner Website zu arbeiten.
Wenn es Ratschläge gibt, würde ich sie zu schätzen wissen.
Danke
Zufällig darauf gestoßen – tolles Tutorial in Bezug auf Inhalt und Schreibstil – gut gemacht.
Dieses Tutorial rockt meine Welt! Ich habe noch nie eine so gründliche Erklärung gesehen, wie man das macht. Ich bin dabei, einen neuen Look für meinen Blog zu erstellen und wow… das ist genau das, was ich brauchte. Vielen Dank!!
[…] Ein widgetisierbarer Footer zu deinem WordPress-Theme hinzufügen | Theme Lab (Stichwörter: wordpress tutorial footer CSS) […]
@Lance: Es würde vom Theme abhängen, aber es wäre irgendwo innerhalb des „footer“-Divs (wie auch immer es genannt werden mag).
Es sieht so aus, als hätte der Footer auf deiner Website eine feste Höhe, daher müsstest du das wahrscheinlich beheben, bevor du diesen Code verwendest.
Hallo – Danke für dieses Tutorial, aber ich bin verwirrt. Wo platziere ich den HTML-Code, den du am Anfang hast?
Ich habe die CSS- und Footer-Dateien und weiß, dass ich den Code dort einfügen kann. Aber wohin gehört der eigentliche HTML-Code?
[…] Box, benutzerdefinierte Archiv- und Suchvorlagen, eine Optionsseite und vier widget-fähige Bereiche (einschließlich eines widget-fähigen Footers). Diese Funktionen werden behandelt […]
@Terri: Kein Problem! Schöner widget-fähiger Footer übrigens. 🙂
Jaaaa! Danke!
@Hannah: Ja, das bedeutet es. Obwohl es für mich irgendwie schwer ist, das Problem zu diagnostizieren, wenn ich den genauen Code nicht sehen kann. Könntest du vielleicht den Code deiner aktuellen functions.php-Datei auf eine Art Pastebin kopieren? Etwas wie http://pastebin.com – danke!
Tolles Tutorial! Ich versuche, meinen Footer mit deinem Schritt widget-fähig zu machen, aber wenn ich den Code zu functions.php hinzufüge, erhalte ich immer die Fehlermeldung:
Parse error: syntax error, unexpected ‘}‘ in /home/………..redacted………/functions.php on line 230
Ich bin sicher, das bedeutet, dass nur ein „}“ falsch platziert ist, aber es scheint nicht zu funktionieren, wenn ich es entferne. Hilfe?
[…] habe ein schönes Tutorial gefunden, wie man Widgets zum Footer eines Themes hinzufügt. Widgets sind nicht nur für die Seitenleiste […]
@ezg: Ah… nun, ich bin froh, dass es für dich funktioniert hat.
@Jeffro: Danke, schätze das Stumble, und freue mich, dass dir das Tutorial gefallen hat.
Ich warte schon lange auf einen Beitrag wie diesen. Ich habe es selbst herausgefunden, aber es ist immer schön, eine Referenz zu haben, auf die man zurückgreifen kann. Ich habe dieses Schmuckstück bei StumbleUpon eingereicht 🙂
[…] Füge einen widget-fähigen Footer zu deinem WordPress-Theme hinzu | Theme Lab (Schlagwörter: wordpress) […]
[…] Domain ), das neue Theme hochgeladen und mit meinen Anpassungen begonnen. Das Wichtigste, was ich getan habe, war, einen stattlichen widget-fähigen Footer hinzuzufügen. Du kannst dasselbe tun, indem du dem verlinkten Tutorial von Leland bei Theme Lab folgst. Hauptsächlich wollte ich […]
[…] Fügen Sie Ihrem WordPress-Theme einen widgetisierten Footer hinzu – wer sagt, dass Widgets nur für Seitenleisten sind? Ich habe sie an vielen anderen Stellen gesehen, einschließlich Footern, und genau das lernen Sie in diesem Tutorial. [Link] […]
[…] http://www.themelab.com/2009/04/25/add-a-widgetized-footer-to-your-wordpress-theme/ […]
Du hast es nicht gesehen, weil ich es jetzt nicht benutze. Aber als ich es eingeschaltet habe, sah es wirklich toll aus. Später, wenn ich darüber nachdenke, welche Widgets ich verwenden soll, werde ich es einschalten.
@ezg: Nett! Ich frage mich nur, auf welchem Blog hast du es verwendet? Ich habe die URL überprüft, die du zum Kommentieren hier verwendet hast, aber den widgetisierten Footer nicht gesehen.
Ich habe dein Tutorial in meinem Blog verwendet. Es sieht wirklich cool aus.
Danke für deine Lektion. :)
@sriganesh: Klingt gut, lass mich wissen, wie es bei dir funktioniert.
Danke. Ich benutze jetzt Elegant Theme, das ich in einem Wettbewerb gewonnen habe. Sieh dir meinen Theme-Footer an.. vielen Dank. Ich habe ein kleines Problem: Ich habe meine Flickr-Fotos hinzugefügt, aber sie sind unregelmäßig angeordnet. Wie bei anderen professionellen Websites mit Rahmen kann ich sie nicht ausrichten. Kannst du mir dabei helfen? Drei Monate lang habe ich es selbst versucht und Codes hinzugefügt, aber nichts hat funktioniert.
[…] HTML oder für ein Content-Management-System (CMS)? Je nach deinen Fähigkeiten Add A Widgetized Footer to Your WordPress Theme – themelab.com 04/25/2009 Die Inspiration für dieses Tutorial kommt von einem Tweet, den ich erhalten habe mit […]
Schönes Tutorial, ich werde es ausprobieren, da ich so etwas brauche. Besuche meine Seite. Ich möchte dasselbe haben, wie hier erwähnt.
Versteh mich nicht falsch, ich liebe das Tutorial und alles... aber um ehrlich zu sein, ich habe das Gefühl, du hast uns irgendwie über den Tisch gezogen... als ob wir wissen wollen, wie DU deinen Header gemacht hast, weißt du? Das ist kein persönlicher Angriff, aber ich fühle mich ein wenig betrogen, einen mickrigen, langweiligen Text-Footer bekommen zu haben...
Wenn du uns bitte sagen könntest, wie du DEINEN gemacht hast, wäre das großartig. Und nicht nur "lege dein Bild dahinter..." Ich meine, wie du es WIRKLICH gemacht hast. Danke....
Ich habe alles getan, was du gesagt hast, und ich weiß nicht, wie ich die Widgets "ziehen" soll...? Ich sehe nirgends, wohin ich sie ziehen soll....
Das machst du in deinem WordPress-Admin-Panel auf der Widget-Seite. Mit "ziehen" meine ich nur, die Widgets in die verschiedenen widgetisierten Bereiche zu legen.
Es tut mir leid, dass Sie sich „ausgebrannt“ fühlen, aber ich wollte ein Tutorial schreiben, das für fast jede Art von Thema gilt.
Zu Ihrer Information: Ich verwende in diesem Website-Footer und -Header keine WordPress-Widgets, sie sind fest codiert.
Ich bin mir nicht sicher, wie viel detaillierter er hätte sein können. Wenn Sie ein Webdesigner sind und eine Vorstellung davon haben, was WordPress ist, dann wissen Sie, wie Sie den Rest erledigen. Sein Tutorial war perfekt.