Link-Liste

Die Links, die bei jeder WP-Installation automatisch mit eingerichtet werden, habe ich im Admin-Menü unter Links -> Links verwalten gelöscht und unter -> Link hinzufügen Links zu Seiten, auf die ich in diesem Blog verweise, hinzugefügt.
Damit nicht mehr “Blogroll” sondern “Links” darüber steht, ändere ich diese Bezeichnung in der sidebar.php.

Die einzelnen Links (und auch alles andere, das in der sidebar steht) sind als unsortierte Liste definiert. Standardmäßig ist vor jedem Listenpunkt dieser Liste ein Punkt. Damit dieser Punkt nicht erscheint, füge ich in der style.css ein:

Sidebar-Design

Die einzelnen Punkte in der Sidebar sind sehr weit eingerückt:

Damit sie linksbündig unter den Überschriften stehen und nur die Unterkategorien etwas nach rechts gerückt sind, ergänze ich die style.css so:

Breite des Blogs ändern

In der index.php ist das, was hier als meine Beiträge sichtbar ist, in einen div-Container mit der ID “post” eingebettet. Um dessen Breite zu ändern, definiere ich in der style.css “#post” mit einer Breite von 550 Pixeln. Danach stehen die Beiträge links, die Sidebar natürlich nach wie vor rechts, dazwischen ist (bei meiner Bildschirmauflösung) eine Lücke.

Um alles etwas schmaler und mittig zu gestalten, packe ich den ganzen Code innerhalb der body-Tags in einen weiteren div-Container. Der body-Tag beginnt in der header.php, dort steht nun:

Er endet in der footer.php; der Übersichtlichkeit halber habe ich dazugeschrieben, welcher div-Tag hier beendet wird:

In der style.css definiere ich dann die Breite von “#mantel” mit 750 Pixeln. Damit der Inhalt mittig ist, setze ich noch ein “margin: auto” dazu.

Das sieht schon etwas besser aus:

Anschließend gebe ich der Sidebar in der style.css noch eine Breite von 150 Pixeln.

Kategorien – welche werden angezeigt?

Ich habe einige Kategorien eingerichtet und denen die einzelnen Beiträge zugeordnet. Sie tauchen aber in der Sidebar nicht unter “Kategorien” auf.

Hierfür ist der Template Tag “wp_list_cats” in der sidebar.php verantwortlich. Bislang stand bei mir dahinter: (‘sort_column=name&optioncount=1&feed=rss’).
Das bedeutet:

• sort_column=name: Die Kategorien werden nach Name, also alphabetisch sortiert – das ist ok und kann so bleiben
• optioncount=1: Die Anzahl der Beiträge in einer Kategorie wird hinter der Kategoriebezeichnung angegeben, optioncount=0 heißt, die Anzahl wird nicht angegeben – ich ändere es erst mal auf “0″
• feed=rss: RSS-Feed für die Kategorie – den möchte ich hier nicht haben und lösche diesen Wert

Neu hinzu kommt:

• hide_empty=0: Auch Kategorien ohne Eintrag werden aufgeführt (sinnvoll z.B. für Oberkategorien, die keine eigenen Einträge, sondern nur Unterkategorien haben)

Eingehende Erklärungen zu den Template Tags gibt es hier.

Beitragstitel als Permalink

Momentan steht vor dem Titel jedes Beitrags die ID des Beitrags (eine Nummer, die WP nach der Reihenfolge, in der die Beiträge geschrieben werden, vergibt.) Da ich manche Beiträge aber erst als Entwurf abspeichere und später veröffentliche, machen die IDs nicht allzu viel Sinn, da sie dann nicht mehr in der richtigen Reihenfolge sind, daher möchte ich sie nicht vor den Titeln stehen haben.

Deshalb muss ich eine kleine Änderung in der index.php vornehmen. Dort stand vorher:

Das habe ich folgendermaßen geändert:

Nun ist jede Überschrift ein permanenter Link zum jeweiligen Beitrag.

Eigenes Design

Ich möchte für dieses Blog kein fertiges Template verwenden, sondern selbst eins basteln. Dazu fange ich mit einem “leeren” Template namens “Tabula Rasa” an, das ich hier heruntergeladen habe, entpackt und auf meinen Webspace unter wp-content/themes kopiert und anschließend im Admin-Bereich unter Themes -> Theme-Editor aktiviert habe.
Da die style.css völlig leer ist, sieht mein Blog sehr seltsam aus:

Das Menü und die einzelnen Einträge stehen untereinander.

Ich füge eine Hintergrundfarbe ein und setze die Sidebar, die eine andere Hintergrundfarbe bekommt, nach rechts. Die style.css sieht nun so aus:

body {
background: #e6e6fa;
}

#sidebar {
float: right;
border: 1px solid #cccccc;
background: #ffffff;
}

Das macht das Ganze schon ein wenig übersichtlicher: