Die Inspiration für dieses Tutorial stammt von einem Tweet, den ich mit Feedback zum bald erscheinenden RS12-Theme erhalten habe.
Obwohl es die Widget-Fußzeile letztendlich nicht in die RS12-Theme-Version geschafft hat, habe ich beschlossen, dieses Tutorial zu schreiben, um den Leuten genau zu zeigen, wie sie ihrem Theme eine Widget-Fußzeile hinzufügen können. In diesem Leitfaden erfahren Sie:
- Der HTML- und CSS-Code, der zum Erstellen der Widget-Fußzeile erforderlich ist.
- So fügen Sie häufig verwendete WordPress-Vorlagen-Tags als Platzhalter hinzu
- So versehen Sie die Fußzeile mit Widgets und platzieren darin Widgets
Dieser Beitrag wird eine Menge Code enthalten. Wenn Sie also Lust dazu haben, lesen Sie weiter …
In diesem Tutorial verwende ich das WordPress-Theme „Green Rays“ als Beispiel. Im Moment enthält die Fußzeile lediglich eine standardmäßige „Copyright“-Meldung und Credits.
Der HTML
Der erste Schritt besteht darin, das HTML-Markup hinzuzufügen. Nehmen wir an, wir haben drei verschiedene Abschnitte in der Fußzeile mit Widgets, die die neuesten Beiträge, die Monatsarchive und die Tagesarchive auflisten. Wir werden diesen HTML-Code oberhalb der aktuellen „Copyright“-Zeile platzieren.
Grundsätzlich platziert dieser Code jedes Widget in einem Div. In jedem Widget gibt es eine Kopfzeile und eine ungeordnete Liste mit Links. Ja, ich weiß, dass die Links nirgendwohin führen. Wir werden dies später durch WordPress-Vorlagen-Tags ersetzen. Das haben wir bisher:
Das CSS
Wie Sie sehen, sieht das ohne CSS-Stil nicht so gut aus. Fügen Sie den folgenden Code zu Ihrem Stylesheet hinzu.
.footer-item {
linker Schwimmer;
Breite: 33 %;
gepolsterter Hintergrund: 10px;
}
.footer-item ul {
Polsterung links: 15px;
}
Dieser Code verschiebt jedes Fußzeilenelement nach links, was im Grunde bedeutet, dass sie nebeneinander liegen können. Die Breite ist auf 33 % eingestellt, was ausreichend Platz für drei Fußzeilenelemente in einer einzigen Zeile bietet. Unter jedem Fußzeilenelement wird außerdem etwas Polsterung hinzugefügt. Der zweite Teil besteht darin, die Listen einfach 15 Pixel nach links zu füllen.
Jetzt können Sie sehen, dass HTML und CSS beginnen, zusammenzuwachsen. Das sollten Sie bisher haben:
WordPress-Code
Im Moment haben wir eine Menge leerer HTML-Links ohne echten WordPress-Code. Ersetzen wir die Listen in „Neueste Beiträge“, „Monatsarchiv“ und „Tagesarchiv“ durch die entsprechenden WordPress-Vorlagen-Tags. Ersetzen Sie das, was Sie derzeit haben, durch Folgendes:
Die Parameter sollten ziemlich klar sein, aber wenn Sie sich bei einem davon nicht sicher sind, versuchen Sie, im WordPress-Vorlagen-Tag-Suchtool nach „wp_get_archives“ zu suchen. Denken Sie daran, dass ich nur die wp_get_archives()-Vorlagen-Tags als Platzhalter verwende. Wir werden sie später mit anderen WordPress-Widgets ändern, nachdem wir die Fußzeile hinzugefügt haben.
Widgetisieren Sie es
Für diesen Abschnitt des Tutorials leihe ich mir Teile aus meinem vorherigen Tutorial zu Widget-Themen aus.
Der erste Schritt besteht darin, die „Sidebars“ zu registrieren. Ersetzen Sie dazu einfach den aktuellen Inhalt der Datei „functions.php“ durch Folgendes:
if (function_exists (‘register_sidebar’))
register_sidebar (Array (
‘name’ => ‘Seitenleiste’,
‘before_widget’ => ‘
‘,
‘after_widget’ => ‘
‘,
‘before_title’ => ‘
‘,
‘after_title’ => ‘
‘,
));
if (function_exists (‘register_sidebar’))
register_sidebar (Array (
‘name’ => ‘Fußzeile’,
‘before_widget’ => ‘
‘,
‘after_widget’ => ‘
‘,
‘before_title’ => ‘
‘,
‘after_title’ => ‘
‘,
));
?>
Jetzt gehen wir zu sidebar.php und ersetzen das aktuelle dynamische bedingte Tag der Seitenleiste durch dieses:
Mit diesem:
Jetzt gehen wir in unsere Datei „footer.php“ und packen die Fußzeilenelemente in ihre jeweiligen bedingten Seitenleisten-Tags ein. Fügen Sie direkt vor dem ersten „Sidebar-Element“-Div Folgendes hinzu.
Unmittelbar nach dem abschließenden „footer-item“-Div (und über dem „clear“-Div, das wir zuvor hinzugefügt haben) fügen wir Folgendes hinzu:
Ok, jetzt sollte die Fußzeile der Seitenleiste ein Widget haben. Versuchen wir es, indem wir einige Widgets in der Fußzeile hinzufügen. Ich füge ein Blogroll-Widget, ein Widget für aktuelle Kommentare und ein Text-Widget hinzu. So sollte es aussehen:
Abschluss
Nun, das sind die Grundlagen für das Hinzufügen einer Widget-Fußzeile zu Ihrem Theme. Möglicherweise möchten Sie separate Stilregeln für andere Widget-Typen hinzufügen, z. B. für Kalender oder Suchfelder. Dies wird wahrscheinlich nicht mit allen Themes funktionieren, wie zum Beispiel dem RS12-Theme, da es eine nicht erweiterbare Fußzeile hatte.
Wenn jemand zufällig das aktualisierte Green Rays-Theme haben 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 Originalthema vergleichen.
Ich hoffe, Ihnen hat das Tutorial gefallen. Werden Sie Ihrem Theme eine Widget-Fußzeile hinzufügen? Gibt es etwas in dem Code, den ich oben verwendet habe, das ich anders machen würde? Fragen, Kommentare, Vorschläge und Kritik sind willkommen. Melden Sie sich also gerne in den Kommentaren.
