Ratatatam

28.09.09

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:

widget01

Diese Zeilen habe ich um folgende erweitert, bitte auf die gelbe Markierung achten.
widget02

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:

widget03

Falls nun keine Überschrift erwünscht ist, kann in diesem Code noch folgende CSS-Anweisung hineingeschreiben werden (blau markiert):

widget04

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

   

Kommentare geschlossen.

Keine Trackpacks/Pingbacks mehr möglich.



Ansichten:  ragini · Frank · aurora · Ping

Android Anleitung App Design Blogosphäre Bochum Buch CMS CMS Made Simple DJR Electropop ExpressionEngine Film Fotografie Fotolust Freiberufler Fussball GooglePlus Grafikdesign Icondesign Ingwer iPod Touch IT-Sicherheit Layout Leben Medien Musik Netz Politik Produkt Redesign responsive Webdesign Rezepte Ruhrgebiet Software Sprache Technik Teufel UX UX-Design Verpackungsdesign Videoanleitung Webdesign Webradio Wissen Wordpress

© 2016 Ralph Segert . Impressum