Bluejax.net

So, wir haben nun also Wordpress auf dem Computer bzw...lliert und zum Laufen gebracht. Heute geht es um das Design, um das Aussehen eures Weblogs.

Das schöne an Wordpress ist, das jeder ganz schnell sein eigenes Weblog nach seinen individuellen Vorlieben generieren kann. Dazu stehen euch unzählige von so genannten Themes zur Verfügung.

Themes sind nichts anderes als das grafische Grundgerüst eures Weblogs. Nehmt mein Blog hier als Beispiel: Das ganze grobe Aussehen hier, also der Aufbau, ist im Theme geregelt. Mit dem Theme bestimmt ihr also die grafische Oberfläche eures Blogs.

Auch hier gilt wieder, was für Wordpress allgemein gilt: Einfach, schnell und ohne große HTML-Kenntnisse zum eigenen, individuellen Blog!

WordPress.de – Themes suchen & finden

Es gibt verschiedene Möglichkeiten euer Liebling-Theme zu finden. Ihr könnt googlen oder euch sonst wie auf die Suche nach Wordpress-Blogs machen. Die einfachste Möglichkeit ist bestimmt mal wieder die über die Wordpress-Community auf Wordpress.de!

Dort findet ihr schon auf der Hauptseite den Punkt Design und Layout. Klickt ihr diesen Punkt an, öffnet sich ein kleines Drop-Down-Menü und ihr findet schon die Links zu einigen Theme-Gallerien:

* Alex King’s Theme Browser
* To Blog: list of 355+ WordPress 1.5 Themes
* WordPress Theme Browser
* WordPress Codex: Theme List
* Liste deutschsprachiger WordPress Themes

Noch mehr WP-Themes

Die zweite Möglichkeit wäre oben im Menü auf Wordpress.de auf den Punkt Doku zu gehen. Ihr kommt dann direkt zu WordDoku, der Deutschen WordPress Dokumentation. Hier findet ihr nun alle möglichen Tipps und Tricks rund um Wordpress. Und unter anderem findet ihr hier auch einen Link zu weiteren Wordpress-Themes.

Ihr müsst einfach unter dem Punkt „WordPress Ressourcen“ auf den Link Templates gehen und schon kommt ihr zu einer weiteren schönen Übersicht von WP-Themes.

Zwei Möglichkeiten, ein Ziel

Empfehlen kann ich euch den WordPress Theme Browser, den ihr über die erste Möglichkeit (Wordpress.de -> „Design & Layout“ -> WordPress Theme Browser) findet. Dort sind viele verschiedene WP-Oberflächen verfügbar, die ihr euch in einem extra Fenster direkt anschauen und bei Gefallen gleich runterladen könnt.

Um hier ein Theme runterzuladen, müsst ihr nichts anderes tun, als auf dieses kleine Diskettensymbol am Fenster zu klicken.

Der Übersicht halber empfiehlt es sich übrigens auf eurem PC in eurem Wordpress-Ordner ein extra Theme-Verzeichnis zu erstellen. Dies dient der Übersicht und ihr findet euch später besser zurecht!

So, über die zweite Möglichkeit (Doku -> Templates) gelangt ihr auf eine Seite, wo ebenfalls verschiedene Themes aufgelistet sind. Allerdings sind diese hier nicht wie bei dem WP-Theme-Browser direkt anschaubar, sondern ihr müsst dem jeweiligen Link folgen.

Das Besondere hierbei ist, dass die verschiedenen Themes aufgeteilt sind nach Eine Spalte, Zwei Spalten und nach Drei Spalten.

Diese Spalten meinen die Anzahl der Spalten (von links nach rechts) in dem jeweiligen WP-Theme. Schaut bluejax.net an, hier seht ihr zum einen die Spalte, in der die Artikel erscheinen – Spalte Eins. Zum zweiten seht ihr links noch die so genannte Sidebar, in der verschiedene Linkkategorien stehen – Spalte Zwei. Das von mir verwendete WP-Theme würde also somit in der Kategorie Zwei Spalten auftauchen.

Ich glaube es gibt kein besser oder schlechter, was die Anzahl der Spalten oder überhaupt das Theme an sich angeht. Gut ist, was euch gefällt! Lasst euch aber dabei nicht von den jeweiligen Farben abschrecken, die könnt ihr alle nach eurem Geschmack anpassen!

Aber der Reihe nach: Download & Entpacken

Habt ihr ein interessantes Theme gefunden, dann ladet ihr es euch auf euren Computer herunter. Die Dateien sind fast immer als .zip-Datei verfügbar, ihr müsst die Datei also erst einmal entpacken.

Upload auf euren Server

Habt ihr das getan, könnt ihr euer ftp-Programm starten und euch auf euren Server einwählen. Dort öffnet ihr dass den Ordner wp-content und dann das Verzeichnis themes. Hier schiebt ihr nun eurer entpacktes Theme rein.

Vorsicht: Achtet bitte darauf, dass ihr den Theme-Ordner ohne nochmaligen Unterordner darin hochladet. Sonst kann es sein, das WordPress das Theme nicht erkennt.

Einloggen und aktivieren

Habt ihr das getan, dann logged ihr euch über die Oberfläche eures Weblogs unter dem Punkt Site Admin in euren Wordpress-Konfigurationsereich ein!

Dort findet ihr nun im Menü den Punkt Themes. Den klickt ihr an und landet im Theme-Ordner. Ihr seht nun alle Themes, die ihr auf euren Server hochgeladet habt. Wenn ihr nun eines davon anklickt, wird dieses als Standard übernommen und euer Blog-Aussehen danach angepasst.

Ihr könnt nun zwischen den verschiedenen – von euch vorher auf den Server hochgeladenen – Themes rumspielen. Probiert einfach mal verschiedene aus und testet diese auf Funktion und Gefallen hin.

Die Individualisierung – Alles nach eurem Geschmack!

Habt ihr das alles getan, dann dürfte euer Weblog in neuem Glanz, in neuem Design erstrahlen. Soweit war alles ganz einfach, kein HTML. Jetzt geht der ganze Spaß aber erst richtig los, denn ihr könnt nun jede einzelne Farbe oder auch sonstige Sachen eures Blogs verändern. Allerdings sind hierfür kleinere HTML-Kenntnisse Voraussetzung.

Keine Angst, ich hab selber nur wenig Ahnung von HTML. Das was ihr braucht findet ihr ganz schnell selbst raus. Sucht ihr bestimmte Befehle, geht einfach den Weg über eine Suchmaschine oder schaut euch mal die Seiten von Selfhtml an.

Einstellungen im Theme-Editor

Also, unter Themes gibt es den Punkt Theme-Editor. Dort findet ihr nun die Inhalte, die Programmierung, eures Themes.

Die Namen der einzelnen Teile, sowie deren Anzahl können von Theme zu Theme etwas variieren. Auch kann es sein, dass die Befehle, die eine bestimmte Aktion ausführen bei dem einen oder anderen Theme in einer anderen Datei stehen.

Die Datei Stylesheet ist im Grunde so etwas wie das Grundgerüst. Hier findet ihr Angaben und Befehle zum Theme im Allgemeinen. Bei mir sind etwa die Befehle zum Kopfbild (Header) oder die einzelnen Farben hier zu finden.

Unter der Datei Header sind bei mir die Einstellungen zur grauen Leiste oben vorhanden. Je nachdem, welche Punkte ich im Menü haben will, kann ich dies hier einstellen.

Da fällt mir jetzt auch etwas ganz wichtiges ein

Wenn ihr jetzt etwas im Theme-Editor verändert werden ihr keinen Button finden, über den ihr de Änderungen abspeichern könnt. Stattdessen wird unter dem Fenster ein Text stehen, indem darauf hingewiesen wird, dass diese Funktion aktuelle nicht möglich wäre:

Hinweis:
Die Datei ist derzeit leider nicht beschreibbar.
Das ist auch der Grund, warum es dir nicht möglich ist, deine Veränderungen abzuspeichern.
Diesen Zustand kannst du allerdings ändern, indem du der Datei andere Rechte zuweist…

Dateiattribute über ftp-Programm einstellen

Wählt euch nun über euer ftp-Programm wieder auf eurem Server ein. Die folgenden Tipps gelten für das Verwenden von FileZilla, dürften aber bei anderen ftp-Programmen ähnlich sein!

Wenn ihr jetzt einen Ordner oder eine Datei mit der rechten Maustaste anklickt, öffnet sich ein kleines Menü. Im untersten Punkt steht Dateiattribute…, den klickt ihr an. Ihr seht nun ein Fenster, in dem ihr die Dateiattribute für den jeweiligen Ordner bzw. für die jeweilige Datei ändern könnt. Meistens steht 555 darin. Wenn ihr nun stattdessen die Zahlen 777 eingebt, stellt ihr ein, dass der Ordner oder die Datei auch beschrieben werden kann.

Welcher Datei ihr jetzt genau neue Dateiattribute geben müsst, damit ihr das Theme beschreiben könnt, kann ich euch jetzt nicht zweifelsfrei sagen. Sicherlich kommen die Dateien im Ordner „themes“ in Frage. Macht es wie ich: spielt einfach mal ein bisschen rum.

So, wenn ihr nun die Dateiattribute dahin gehend abgeändert habt, dass man nun auch schreiben kann, dann könnt ihr in eurem Theme-Editor die HTML-Texte schreiben und abändern und danach auch verbindlich abspeichern!

Zwei Tipps hab ich dann jetzt noch für euch

Ihr möchtet euer Header-Bild, also das Bild, das am oberen Ende eures Blogs erscheint abändern? Kein Problem! Ihr nehmt einfach euer gewünschtes Bild und ladet es über euer ftp-Programm auf euren Server. Ihr legt es in eurem Theme Ordner in das Verzeichnis Images ab.

Habt ihr das getan, dann müsst ihr in euren Theme-Editor in der Wordpress-Konfiguration gehen. Dort sucht ihr jetzt nach einem Befehl, der sich auf das Headerbild bezieht. Bei mir ist dies im Bereich Stylesheet geregelt.

Dort gibt es einen Befehl bei dem in irgendeiner Form das Wort Header, etwa als h1#header vorkommt. Dahinter steht ein Befehl in der Form url(images/dein_altes_hintergrundbild.jpg). Ihr gebt nun den Namen eures neuen Bildes ein: url(images/dein_neues_hintergrundbild.jpg) und speichert das ganze ab.
Jetzt euer Weblog aktualisieren und anschauen und ihr seht: Neues Bild, neues Glück!

Jetzt sind die Farben dran!

Wenn ihr euch die verschiedenen Befehle im Theme-Editor anschaut, werden ihr des Öfteren Zeilen sehen, in denen das Zeichen # mit einer Folge von 6 Buchstaben und/oder Zahlen stehen. Das sind Farbeinstellungen.

Welcher Befehl nun welche Farbe in eurem Weblog meint, kann ich nicht sagen. Das findet ihr am besten selber heraus. Aber ich kann euch einen Tipp zur Bestimmung der Farben geben.

Wenn ihr irgendwo im Internet eine Farbe findet, die euch gefällt, macht von dem Bild einen Screenshot oder speichert das Bild gleich auf eurem PC ab. Öffnet dann diese Datei mit Photoshop (keine Lizenz, dann ab in die Uni)!

Tipp: Adobe Photoshop

Nehmt nun das Werkzeug Pipette und nehmt damit eine Probe der Farbe, die ihr haben wollt. Habt ihr das getan, dass wird eben diese Farbe in der Werkzeugleiste als Auswahl auftauchen. Wenn ihr nun dieses Farbfeld in der Werkzeugleiste anklickt, öffnet sich ein Farbfenster. In diesem Farbwähler seht ihr nun den RGB-Code für die ausgewählte Farbe. Allerdings benötigen wir die Farbe als Webfarbe. Dafür müsst ihr nun das Feld Nur Webfarben anzeigen aktivieren.

Et voila, der Code eurer ausgewählten Farbe wird als Webcode angezeigt. Diesen könnt ihr nun nehmen und in eurem Theme-Editor anpassen. Habt ihr das getan, wird das jeweilige Feld in eurem Weblog in der bei Photoshop von euch ausgewählten Farbe erscheinen. Schön, nicht?!

Ihr seht, ihr könnt mit Wordpress wirklich allerhand anstellen. Und wenn ihr euch etwas Zeit nehmt, dann könnt ihr euer Weblog in eurem Style und in euren Farben erscheinen lassen. Ihr braucht einfach nur die Lust am herumprobieren.

Versucht es einfach mal. Und solltet ihr dann irgendwann mal Probleme oder Fragen haben, kann ich euch das Wordpress-Forum nahe legen. Da wird euch sehr schnell geholfen werden.

Und außerdem habt ihr ja noch mich. Bei Fragen oder Problemen, schreibt mir einfach über das Kontaktformular, per E-Mail oder hinterlasst mir einen Kommentar!

Dann wünsch ich noch viel Spaß beim rumprobieren. Und bis bald, im nächsten Teil vom WordPress-Wokshop bei bluejax.net!

bluejax
, den 21. April 2006

Der Wordpress-Workshop:
Wordpress-Workshop Part 1: Vorlauf – Den PC fit machen
Wordpress-Workshop Part 2: Let...tung – der passende Webspace
Wordpress-Workshop Part 3: Dow... Anpassung & Installation

Quellen und Links:
http://www.bluejax.net/2006/04/14/wordpress-workshop
-part-3-download-anpassung-installation/
http://www.google.de/search?hl=de&q=wordpress+themes
&btnG=Google-Suche&meta=
http://wordpress.de/
http://wordpress.de/#Themes
http://www.alexking.org/software/wordpress/theme
_browser.php
http://blogging.typepad.com/how_to_blog/2005/03/
comprehensive_l.html
http://themes.wordpress.net/
http://codex.wordpress.org/Using_Themes/Theme_List
http://doku.wordpress.de/Hauptseite
http://doku.wordpress.de/Ressourcen/Templates
http://de.selfhtml.org/
http://www.filezilla.de/
http://forum.wordpress.de/
http://www.bluejax.net/kontakt/
http://www.bluejax.net/
http://www.bluejax.net/2006/03/18/wordpress-wokshop
-part-1-vorlauf-%e2%80%93-den-pc-fit-machen/
http://www.bluejax.net/2006/03/19/wordpress-workshop
-part-2-letzte-vorbereitung-%e2%80%93-der-passende-
webspace/
http://www.bluejax.net/2006/04/14/wordpress-workshop
-part-3-download-anpassung-installation/