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.
Ich erhalte einen Fehler, wenn ich ein benutzerdefiniertes Widget in meinem Theme hinzufüge. Dies ist der Code, den ich in functions.php hinzugefügt habe.
function widget()
{
register_sidebar(array(
‘name’ => __(‘Primary Sidebar’, ‘wpb’),
‘id’ => ‘primary_sidebar’
‘description’ => ”,
‘class’ => ”,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
}
add_action(‘widgets_init’, ‘widget’);
Welche Fehlermeldung erhalten Sie?
Großartige Arbeit an Ihrem Tutorial!
Eine Frage:
Warum mussten Sie Code in die Datei sidebar.php einfügen, wenn der Zweck des Tutorials darin besteht, drei Widget-fähige Bereiche in den Footer einzufügen?
Hallo Mark, gute Frage.
Dieses Tutorial geht davon aus, dass Sie bereits einen Widget-fähigen Bereich in Ihrer Sidebar haben. Wenn ich auf die Datei
sidebar.phpverweise, ändere ich im Grunde diesen Widget-fähigen Bereich, um ihm einen eindeutigen Namen (in diesem Fall „Sidebar“) zu geben, um ihn von dem neuen Widget-fähigen Footer-Bereich, den wir gerade erstellen, zu unterscheiden.Es gibt weitere Informationen zur Codierung mehrerer Widget-Bereiche in meinem WordPress Theme Widgetizing Tutorial.
Wow, das hat tatsächlich funktioniert! (Kein Kommentar zu Ihrem Code, nur ein Kommentar zu meinen Programmierfähigkeiten). Danke!
Mein erster Versuch mit Widgetisierung, und das hat absolut perfekt funktioniert. Danke! :)
Sie sagten:
„Der erste Schritt ist, das HTML-Markup hinzuzufügen.“ und „Wir werden diesen HTML-Code über die aktuelle „Copyright“-Zeile setzen.“
OK…. zu WAS hinzufügen? Wo platziere ich das HTML-Markup? Was füge ich hinzu? Wie finde ich die Datei mit der „Copyright“-Zeile?
Versuchen Sie, in Ihrer
footer.php-Datei nachzusehen.Könnten Sie mir eine kurze Zusammenfassung des neuen Standard-Theme-Footers 2012 geben? Ich möchte dieses Tutorial verwenden, aber der Footer 2012 ist unheimlich lang oder „hoch“. Ich möchte 5 Text-Widgets hinzufügen, und er hat eine flüssige Vorlage. Ich benutze die Vollbild-Vorlage, daher möchte ich, dass sie zentriert ist. Sie können auch eine Tüte Chips dazu werfen, wenn Sie möchten 😛
Das Tutorial ist wunderbar, aber ich würde gerne wissen, wie ich den Hintergrund einfärben kann, wo die Widgets stehen, oder wie ich ein Bild darunter einfügen kann. Wenn Sie auf diesen Kommentar antworten oder mir eine E-Mail senden könnten, wäre das großartig.
Nochmals, tolles Tutorial, es hat perfekt für das Blog meines Themes funktioniert und jetzt möchte ich es nur noch ein wenig bemalen, wenn Sie verstehen, was ich meine.
Mit freundlichen Grüßen und ich warte auf eine Antwort von Ihnen! 🙂
Ich glaube, Sie suchen nach der CSS-Eigenschaft `background` – http://www.w3schools.com/css/css_background.asp
Wow, ich wusste wirklich nicht, dass Sie das einfacher und simpler hätten machen können. Ausgezeichnetes Tutorial für einen Prozess, der viel schwieriger hätte sein können… 10 Minuten und ich bin mit brandneuen Footer-Widgets am Laufen. Danke!
Vielen Dank, dass Sie sich die Zeit genommen haben, dies zu tun! Toller Beitrag. Das Theme, mit dem ich arbeite, wurde stark angepasst, daher sollte mir dies helfen, den Footer hinzuzufügen, den ich schon seit einiger Zeit suche!
Danke für das großartige Tutorial. Ich habe eine Frage. Das Hinzufügen von Widgets ist kein Problem, aber irgendwie will er dem gesamten Footer keinen Hintergrund geben. Der Teil, wo die Widgets sind, bleibt bei mir weiß. Gibt es eine Möglichkeit, das zu beheben?
http://blog.whenlovefalls.com/
Hmm… anscheinend habe ich vergessen zu erwähnen, dass Sie
.clear { clear: both; }in Ihre Stylesheet einfügen.Das sollte das Problem beheben.
Ist es kein Problem, einfach den Inhalt der functions.php-Datei zu ersetzen? Ist das nicht eine der Dateien, die ich nicht anfassen soll?
Außerdem – welcher Funktionsaufruf wäre nötig, um eine Liste von Seiten in jedem Bereich der Website zu erhalten? Ich möchte eine Art „Site-Map“-Footer, wenn Sie verstehen, was ich meine (eine horizontale Liste von Links der obersten Ebene, jeder mit seinen Unterseiten darunter aufgelistet).
Sie können sie anfassen, wenn Sie möchten, aber ich würde vorher ein Backup machen, da Fehler Probleme für den Rest Ihrer Website verursachen können.
Sie suchen wahrscheinlich nach der Funktion wp_list_pages oder dem „Seiten“-Widget.
Dieser Beitrag hat mir geholfen. Ich habe so viele andere Beiträge ausprobiert, ich wollte schon aufgeben, und dann habe ich deinen gefunden. Er funktioniert wie am Schnürchen. Als Personal Trainer in San Diego muss ich Informationen sofort zur Hand haben. Nochmals vielen Dank für die Hilfe. 2001 Iron
Entschuldigung, habe versehentlich den Senden-Button gedrückt. Okay, danke für den genialen Beitrag. Stört es dich, wenn ich einen Link dazu setze? Danke
2001 Ironman Bodybuilding-Champion, Hank Butler
Es freut mich, dass dir der Beitrag gefallen hat, Hank. Du kannst gerne darauf verlinken.
Kann ich diese Fußzeile durch die Fußzeile eines beliebigen WordPress-Themes ersetzen?
So ziemlich. Es gibt einige Fußzeilendesigns, die nicht sehr flexibel sind, und es funktioniert möglicherweise nicht bei diesen.
Hallo Leland,
Wie kann ich es ändern, damit der Hintergrund der gesamten Fußzeile eine andere Farbe hat als der Rest der Seite? Ich habe versucht, background-color im footer-item-Bereich des Stylesheets zu verwenden, aber es ändert nur den Hintergrund der Bereiche, die von Widgets belegt sind, z. B. wenn das Widget nur die Hälfte des Widget-Bereichs einnimmt, nimmt der Hintergrund auch nur die Hälfte des Bereichs ein.
Du müsstest wahrscheinlich eine weitere div um alle footer-item divs legen und die background-color darauf setzen. Stelle sicher, dass die footer-item divs auch geleert sind.
Danke Leland
Ich habe noch etwas herumgespielt und es geschafft. Ich musste mein Tag am Anfang der Datei platzieren und den background-color-Stil darin platzieren.
Danke für den Beitrag. Ich habe so viele Ideen von anderen Leuten ausprobiert, wie man das macht, und die meiste Zeit damit verbracht, zu reparieren, was sie vermasselt hatten. Das funktioniert wie am Schnürchen und jetzt habe ich es auf all meinen Websites. Danke
Hank, schön zu hören, dass es bei dir funktioniert hat!
Vielen Dank für dieses schöne Tutorial, Leland! :)
Glaubst du, du könntest mir zeigen, wie ich Trennlinien zwischen jedem Block (div) von Links oder Widgets einfügen kann, wie in der Fußzeile dieser Seite?
@Saeed: Du müsstest nur dein CSS ändern.
Du könntest etwas tun wie:
.footer-item { border-right:1px solid #000; }
Oder du könntest immer einen Hintergrund für jedes Fußzeilenelement anwenden.
@Leland: Bin auf diesen Beitrag gestoßen, versuche etwas Ähnliches zu machen und suchte nach Rat. Angenommen, der Benutzer möchte mehr als 3 Widgets hinzufügen (zum Beispiel) und die Breite des Footer-Containers kann nur 3 aufnehmen. Ich möchte, dass die nächsten 3 Widgets direkt darunter fallen. Wo ich stecken bleibe, ist, dass die 4. (und folgenden) Widgets nicht richtig vertikal ausgerichtet sind... weil die oberen 3 Widgets keine feste Höhe haben. Aber ich möchte nicht, dass die Widgets eine bestimmte Höhe haben, ich möchte, dass sie dynamisch ist.
Das Einzige, woran ich denken kann, ist, eine Funktion zu haben, die Widgets für den Footer in durch 3 teilbaren Gruppen abruft und sie in einen Div-Container einpackt. Kannst du mir dabei helfen? Wenn nicht, hast du andere Vorschläge, wie ich das angehen kann?
Danke,
Jeff
Jeff, ich würde drei separate Widget-Bereiche erstellen, einen für jede Spalte. Auf diese Weise könntest du so viele Widgets wie du möchtest in jede Spalte einfügen und sie wären richtig ausgerichtet.
Tolle Idee! Danke
Hallo
Ich scheine den Widgetizing-Teil des Tutorials nicht durchzukommen. Und jetzt ist meine Website von Fehlern geplagt. Ich habe die Schritte genau befolgt, wie du sie erklärt hast.
Kannst du zurückschreiben, damit wir durchgehen können, was schief gelaufen ist?
Danke für dieses Tutorial. Ich freue mich darauf, dies für meine Website zum Laufen zu bringen. Es ist eine gute Idee.
Schönes Tutorial. Ich stecke auch beim Widgetizing fest. Ich habe mehrere Sidebars auf meiner Website, also habe ich zwei sidebar.php-Dateien. Ich habe versucht, die Sidebar-HTML zu meiner „sidebar1.php“-Datei hinzuzufügen, aber jetzt erhalte ich einen Fehler, ähnlich dem, was andere gepostet haben.
Was mache ich falsch?
Wirklich toller Artikel, endlich hat es für mich funktioniert, jetzt ist es auf meiner Website implementiert. Es hat mir geholfen, das vorhandene Theme so zu gestalten, wie ich es mag, anstatt nach einem passenden Theme zu suchen. Nochmals vielen Dank dafür.
Hallo, könnte ich das mit dem Thesis Theme verwenden? Ich habe es gekauft und versuche, alle seine Funktionen wie Thesis OpenHook zu lernen. Lass es mich wissen.
Danke, Tam
[...] In: Wordpress plugins 29 Jul 2009 Gehe zur Quelle [...]
[...] Ein widgetisierbarer Footer zu deinem WordPress-Theme hinzufügen Ein Tutorial, das dir zeigt, wie du deinen eigenen widgetisierbaren Footer verschlüsselst, einschließlich des benötigten HTML-, CSS- und WordPress-Codes. [...]
…Fügen Sie einen widgetfähigen Footer zu Ihrem WordPress-Theme hinzu Ein Tutorial, das Ihnen zeigt, wie Sie Ihren eigenen widgetfähigen Footer programmieren, einschließlich des benötigten HTML-, CSS- und WordPress-Codes. …
…Fügen Sie einen widgetfähigen Footer zu Ihrem WordPress-Theme hinzu Ein Tutorial, das Ihnen zeigt, wie Sie Ihren eigenen widgetfähigen Footer programmieren, einschließlich des benötigten HTML-, CSS- und WordPress-Codes. …
Leland:
Danke für deinen Kommentar zu meinem Beitrag. Mein einziges Problem mit diesem Tutorial ist, dass ich nicht weiß, wohin die anfängliche „HTML“-Markup gehört. Ist sie in der functions.php?
…einen widgetfähigen Footer auf einem minimalistischen Wordpress-Theme? Ich habe hier bereits das Tutorial und hier einige Fehlerbehebungen ausprobiert. Ich werde vielleicht dieses hier ausprobieren …