| Weitere Artikel aus dem Webentwickler Blog |
| Teilen |  |
 |
 |
Durch die Funktion der Widgets können wir im Backend unseres Blogs festlegen, welche Bereiche in der Seitenleiste dargestellt werden sollen. Wir können also das Aussehen des Blogs in der Folge jederzeit anpassen, ohne den Quellcode verändern zu müssen.
Wir müssen uns zuerst über die Struktur, besser über die Verschachtelung, der einzelnen Tags klar werden. Zusätzlich müssen wir wissen, wie Wordpress die Widgets darstellt, also welche Tags verwendet werden.
Schauen wir uns dazu folgende Abbildung an. Wir sehen deutlich, wie ein äußerer div-Tag jene für das Suchformular und die Seitenleisten einschließt.
Beginnen wir mit dem äußeren Tag und verwenden wir dafür die Klasse sidebars:
...
/* Formate fuer die Seitenleiste */
div.sidebars {
width: 350px;
margin-right: 73px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
...
Nun können wir den Stil für beide Seitenleisten definieren. Da sie gleich aussehen sollen und auch den gleichen Abstand haben sollen, können wir mit einer einzelnen Klasse arbeiten.
...
div.sidebar {
width: 150px;
float: left;
margin-left: 25px;
}
...
Nun kümmern wir uns um die Darstellung der Widgets in den Seitenleisten. Wordpress integriert die Widgets in einer unsortierten Liste, also einen ul-Tag pro Seitenleiste. Wobei jedes Widget aus einem Listenelement, einem li-Tag, einem h2-Tag für die Überschrift und einem ul-Tag mit weiteren Listenelementen für den Inhalt besteht. Dies klingt jetzt komplizierter, als es ist. Werfen wir einfach einen Blick auf die folgende Abbildung, dann wird es verständlicher.
Wir müssen daher die passenden Tags wie weiter unten dargestellt formatieren. Zusätzlich nehmen wir gleichzeitig die Anpassung der Stile für Tabellen und Absätze vor. Denn manche Widgets, wie jenes für den Kalender, verwenden diese Tags für die Darstellung. Auch die a-Tags vergessen wir nicht, damit alle Hyperlinks gleich formatiert sind. Damit diese Stile aber nicht auf die gesamte Webseite, sondern nur auf die Seitenleiste angewendet werden, müssen wir die passenden Klassen angeben. Diese sehen wir auch in der obigen schematischen Darstellung.
Ganzen Artikel lesen...
Clemens Gull
Lernen Sie die ganze Vielfalt vom Franzis Buch- und Softwareverlag kennen
