WordPress-Buch

Praxisbuch und Einsteigerseminar

Templates für Seiten (Pages) in WordPress

Seit der Version 1.5 gibt es in WordPress auch die Seiten (englisch: Pages). Ursprünglich waren die Seiten dafür gedacht, dass man dort statische Komponenten eines Weblogs, wie zum Beispiel das Impressum, Informationen über die Autoren, rechtliche Hinweise etc. unterbringt.

Sehr schnell hat man aber die Funktion der Seiten dafür eingesetzt, wenn es darum ging mit WordPress auch Projekte ohne Blogcharakter zu betreiben: WordPress als "klassisches" CMS. weiterlesen…

WordPress-Themes erstellen: was brauche ich dafür?

Du hast dich entschieden, dein eigenes WordPress-Theme zu erstellen?

Fein, dann gilt es nur noch zu klären welche Kenntnisse notwendig sind, welche Werkzeuge man benötigt, was die wichtigen Quellen sind etc. weiterlesen…

WordPress-Workshops

Ein klein wenig Eigenwerbung sollte erlaubt sein. Ab September leiten Perun und ich wieder zwei Workshops bei akademie.de:

WordPress als "klassisches" CMS 3.-30. September 2009

Eigene WordPress-Themes entwickeln 15. Oktober – 11. November 2009

Nähere Infos gibt es auf perun.net oder natürlich direkt bei akademie.de

Themes verwalten

Die Verwaltung von Themes, also welche Themes sind installiert und welches ist aktiviert unter dem Menüpunkt «Design / Themes» wurde erweitert.

Themes sind nun mit den Links Aktivieren, Vorschau und Löschen ausgestattet, so dass die Verwaltung – insbesondere das Löschen von Themes – dann auch im Backend von WordPress möglich sein wird.

Zudem gibt es – falls zutreffend – einen Link zu einer aktuelleren Version sowie die Möglichkeit ein Theme automatisch zu aktualisieren.

Aufpassen muss man natürlich falls man eigene Änderungen am Template vorgenommen hat. Diese würden bei einem automatischen Update wieder verloren gehen.

Themes installieren

Der neue Menüpunkt: «Design / Add New Themes» bzw. «Install Themes» präsentiert – ganz ähnlich wie beim Installieren von neuen Plugins – die Möglichkeit Themes aus dem Backend heraus zu installieren.

Das Suchen nach Themes erfolgt nach dem gleichen Muster wie bei den Plugins: entweder nach einem Begriff, dem Autor oder nach einem Tag. Man kann aber auch (im unteren Bereich der Seite) ganz gezielt nach bestimmten Eigenschaften (Farbe, Anzahl der Spalten, Breite, Features, Thema) suchen bzw. filtern. Sämtliche Filter, die man auswählt, werden dann automatisch als Tag für die Suche nach einem Theme übernommen.

Die Links

• Hochladen:
  ermöglicht die Installation von Themes, die man als *.zip-Datei vorliegen hat.
  

  Theme

• Mehr:
  zeigt eine Auswahl an Themes an.
• Neu:
  zeigt die neuesten Themes an.
• Frisch aktualisiert:
  zeigt Themes an, die aktualisiert wurden.

bieten zusätzliche Möglichkeiten bei der Suche bzw. Installation eines neuen Themes. Hat man auf die eine oder andere Art ein Theme gefunden, so wird dies mit einem Vorschaubild und zusätzlichen Informationen angezeigt. Man kann sich nun eine ausführliche Vorschau anzeigen lassen oder es installieren.

CSS für Bilder in WordPress

In den letzten Versionen wurde u.a. auch die "Bilder einfügen"-Funktion stark erweitert und seit der Version 2.6 kann man den Bildern automatisch beim Hochladen eine Bild-Unterschrift vergeben. Daher verdient diese Funktion es, dass man ein paar erklärende Sätze verfasst.

Nach dem man ein Bild hochgeladen hat, kann man diverse Eingaben tätigen. Als erstes kann man den Text für den Mousover (title-Attribut) eingeben. Im zweiten Textfeld gibt man den Text für die Bildunterschrift, welcher gleichzeitig auch der Inhalt des alt-Attributes ist.

Weiter darunter im größeren Textfeld mit dem Namen "Beschreibung" notiert man den Text, der bei der Galerie-Funktion erscheint. Dieser Text diente in den früheren Versionen lediglich internen Zwecken. Darunter wird eine URL generiert, je nach dem wofür man sich entscheidet: keine, Link zu dem Bild oder die Adresse des Beitrages.

In den beiden letzten Punkten entscheidet man sich für die Ausrichtung des Bildes und für die Größe bzw. die Ausmaße des Bildes. Die Dimensionen von "Vorschaubild" und "Medium" kann man komfortabel in "Einstellungen" » "Verschiedenes" einstellen.

Die zuständigen CSS-Regeln

So weit, so gut. Nun geht es darum für die Ausrichtungen des Bildes und für Bildunterschrift-Funktion, die passenden CSS-Regeln zu definieren. Hier zuerst (beispielhaft) die Angaben für die Ausrichtung der Bilder:

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto; margin-right: auto;
    text-align: center;
}

.alignleft {
    float: left; margin-right: 10px;
}

.alignright {
    float: right; margin-left: 10px;
}

Der obere Code sollte klar sein. Dier erste Regel sorgt dafür, dass das Bild bzw. der umgebende div-Block znetriert ist, die zweite Regel sorgt dafür, dass das Bild links floatet und die letzte Regel sorgt dafür, dass das Bild rechts ausgerichtet wird.

.wp-caption {
    text-align: center;
    background: #e4f2fd; border: 1px solid #cde;
    padding: 11px 9px 9px 9px;
    margin-top: 3px; margin-bottom: 10px;
    /* Abgerundete Ecken fuer Browser die es koennen */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.wp-caption img {
    margin: 0; padding: 0; border: 1px solid #cde;
}

div.wp-caption a { border: none; }

.wp-caption p.wp-caption-text {
    font-size: 11px; line-height: 17px;
    margin: 0; padding-top: 5px;
}

Der obere Code besteht aus vier Regeln. Mit der ersten Regel wird eine Box definiert in der sich dann später das Bild befinden wird. Je nach dem restlichen Layout der Website, werden hier entsprechend andere Werte für Abstand, Farbe und Rahmen angegeben.

Die zweite Regel kümmert sich um das Bild innerhalb der Box. Die dritte Regel kümmert sich um den Link, welcher das Bild umschließt und die letzte Regel ist zuständig für die eigentliche Bildunterschrift. Wie das ganze ausschauen kann, sieht man in der oberen Abbildung.

Abgerundete Ecken mit CSS

Auch mit CSS kann man abgerundete Ecken realisieren, hier der Code, der schon weiter oben zum Einsatz kam:

-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

Alle vier Deklarationen tun das gleiche. Eigentlich sollte die letzte Deklaration reichen. Blöderweise unterstützt momentan kein einziger Browser auf dem Markt CSS 3 komplett und daher auch nicht die Eigenschaft border-radius. Die Eigenschaft belasse ich dennoch, falls in nahen Zukunft ein Browser doch diese Eigenschaft unterstützen sollte.

Bis dahin muss man sich proprietären Angaben begnügen: -moz für Geckos, -khtml für Konqueror & Co. und -webkit für Safari & Co.

Mein zweites WordPress-Buch

Schon während ich im September bis November 2006 mein erstes WordPress Buch – Das Einsteigerseminar – geschrieben habe, hatte ich vor auch ein WordPress-Buch für fortgeschrittenes Publikum zu schreiben. Zwei Themen empfand ich als besonders wichtig:

• Das Template-System von WordPress: Themes
• und WordPress für Projekte ohne Blog-Charakter

Daher habe ich das Inhaltsverzeichnis ausgearbeitet und dann im Juni 2007 beim mitp-Verlag mit dem Schreiben des Buches angefangen. Am 20. September 2007 habe ich das Buch dann abgegeben und ab dem 12. November soll das Buch dann auch veröffentlicht werden.

Der Inhalt des Buches

Bezüglich des Inhaltes schaut man am besten in das Inhaltsverzeichnis (PDF, 290kb). Ein starker Fokus liegt auf den Themes und dem Einsatz von WordPress als "klassisches CMS".

An wen richtet sich dieses Buch

Das richtet sich zuerst an Leute die schon die ersten Erfahrungen mit WordPress hinter sich haben oder schon Erfahrungen mit anderen Redaktionssystemen gemacht haben, da viele Vorgänge in den gängigen CMSen recht ähnlich ausfallen. Auf jeden Fall ist das Buch für alle Menschen lesenswert, die tiefer in WordPress einsteigen wollen und mehr über WordPress-Themes und alternative Einsatzmöglichkeiten erfahren möchten.

Das Buch kaufen

Das Buch kann man in gewohnter Weise bei den üblichen Verdächtigen kaufen:

• Bei Amazon
• Direkt beim mitp-Verlag
• Bei Buch.de
• Bei Libri
• Ãœblicherweise auch beim Händler um die Ecke