Das Blogdesign für Kunden hat mich endlich dazu gebracht, meine WordPress-Templates auf den neuesten Stand zu bringen. Das hieß vor allem, Widgets zu ermöglichen, denn die sind überaus praktisch für Kunden, die ihre Sidebars frei einrichten wollen. Bei der Arbeit habe ich gleich einen Weg gesucht, um Widgets an mehreren Stellen des Layouts platzieren zu können. So sollte das Widget für „Seiten“ in einer Spalte im Footer stehen und die Tag-Cloud direkt daneben.
Um dies zu erreichen, ist es nötig, die Datei funktions.php etwas zu erweitern. Dort stehen ganz oben folgende Zeilen:
Diese Zeilen habe ich um folgende erweitert, bitte auf die gelbe Markierung achten.
Nun wird an die Stelle im Template (sidebar.php oder footer.php z.B.), in der Widgets eingefügt werden sollen, der blau markierte Code für die Sidebar 2 eingesetzt. Bitte darauf achten, dass in !dynamic_sidebar('sidebar2') die entsprechende Sidebar angegeben wird:
Falls nun keine Überschrift erwünscht ist, kann in diesem Code noch folgende CSS-Anweisung hineingeschreiben werden (blau markiert):
Bleibt die Frage, wie nun die neuen Sidebars mit den Widgets individuell gestaltet werden können. Dazu einfach in den Quellcode einer im Browser geöffnet WordPress-Site schauen und die entsprechenden CSS-Klassen in Erfahrung bringen (die werden von der Software automatisch eingefügt). Will man das Widget für Links anpassen, so passt man schlicht die Klasse .widget_links mit eigenen Werten an:
#sidebar .widget_links li {
font-size: 11px;
padding: 8px 30px 0 1px;
}
Bleibt es bei einem Widget in einer Extra-Sidebar, reicht die Formatierung von a und ul und li. So habe ich im Footer des Singleblogs das Widget für „Seiten“ folgendermassen mit Schaltflächen formatiert:
#sidebar2 a {
text-align: center;
display: block;
padding: 8px 0 5px 0px;
width: 273px;
height: 28px;
color: #e8c59e;
border-bottom: 0;
text-decoration: none;
background: url(images/footer-button.gif) no-repeat 0 0;
}
#sidebar2 a:hover {
color: #f93;
border-bottom: 0;
text-decoration: none;
background: url(images/footer-button-aktiv.gif) no-repeat 0 0;
}
#sidebar2 ul {
list-style: none;
margin: 20px 10px 50px 0px;
}
#sidebar2 li {
letter-spacing: 1px;
line-height: 21px;
margin-bottom: -1px;
}
Links zum Thema WordPress-Widgets
- WordPress FAQ – Oft gestellte Fragen: Was sind Widgets?
- Dr. Web: Was sind Widgets und wofür setzt man sie ein?
- Datenschmutz: Ein Widget in mehreren WordPress Sidebars verwenden
- WordPress Forum: Using sidebar widgets in multiple sidebars
© Ralph Segert 2009 |
Permalink |
Kommentar |
Link teilen:
Twitter |