Es ist (vorerst, bis ihr mir die Fehler nennt) vollbracht: Ich habe mich endlich durchgerungen, ein WordPress-Paket mit dem Arthemia-Template und den notwendigen Plugins der Webseite von Reinhard Bütikofer zu packen. Außerdem habe ich jetzt auch eine rote Version gemacht. (Beispiel: Remix errötet)

Das Tempplate steht unter der GPLv3. Terms and conditions.

Warum tu ich das?

Mir ist es wichtig, Menschen die Instrumente an die Hand zu geben, um im Internet zu publizieren. Und ich möchte schöne Instrumente, Instrumente, die – insbesondere – Kreisverbände und Kandidat/innen wirklich nutzen können. Ich finde, ein bloßes, chronologisch geordnetes Blog ist nicht das selbe wie eine Webseite.

Deswegen habe ich auch eine genaue Erklärung geschrieben, wie man das Template einrichtet. Dieses “Herrschaftswissen” möchte ich nicht bei mir behalten, sondern ich möchte, dass so viele Menschen wie möglich befähigt werden, Texte attraktiv aufbereitet im Netz zu publizieren.

Ich wünsche mir, dass viele Menschen die Angst vor HTML, PHP und CSS verlieren. Sie sollen den Mut fassen, diese Dateien mal zu öffnen und ein wenig darin zu lesen. Es ist faszinierend, mit Buchstaben, Zahlen und anderen Zeichen Farben, Formen und Funktionen erzeugen zu können. Diese Fazination möchte ich mit anderen teilen und sie ermutigen, selbst einmal mit Zeichen herumzuprobieren.

Mit einem Computer kann man Kunst und Schönheit schaffen!

aus der Hackerethik

Enthalten:

• Neueste WordPress-Version (deutsch)
• Theme: Arthemia (angepasst)
• Notwendige Plugins

0. – WordPress hochladen und installieren

Die Ordnerstruktur ist zum “Sofort hochladen” gemacht, da muss nichts umsortiert werden.
Bedenkt: Wenn ihr den Ordner nehmt und als Ganzes auf den Server ladet, habt ihr am Ende eine URL www.blabla.de/grünes-wordpress/ – kleines Ratespiel, wie muss man wohl den Ordner hochladen, damit man eine Seite mit der URL www.blabla.de bekommt?

Upload per FTP - aber beachten, wie und wohin (auf das Bild klicken für größere Ansicht)

Das Bild zeigt es – für eine URL www.blabla.de muss man nicht den Ordner, sondern den Inhalt des Ordners in das Wurzelverzeichnis hochladen.

Nun ist das Päckchen oben – es muss aber noch installiert werden, damit es als Blog funktionieren kann. Für die Installation der im Ordner enthaltenen Blog-Software WordPress beachtet bitte die Anleitung, insbesondere checkt, ob eurer Server die Voraussetzungen erfüllt (Kurz: Ihr braucht PHP und eine mysql-Datenbank, wenn ihr das bei der Hotline von eurem Webspace oder bei eurem Hoster sagt, wissen die schon bescheid). Eine WordPress-Installation ist wirklich nicht sehr kompliziert, wie bei vielen anderen Problemen reicht es, die Anleitung zu lesen und die dort beschriebenen Schritte auszuführen. Wer schon WordPress installiert hat, muss logischerweise nur das Theme und die Plugins hochladen.

Jetzt wird’s bunt und es geht ums Eigentliche

Die Anleitung zur Einrichtung des Designs

Anleitung zur Einrichtung des Templates

Wenn ihr auf die Grafik klickt, wird sie groß und ihr könnt die einzelnen Punkte zuordnen.

1. – Die Kopfzeile

Hier werden alle “Seiten”, die ihr angelegt habt, angezeigt. Unterseiten werden in Klappmenus sichtbar. Es ist aus meiner Sicht empfehlenswert, das Impressum nicht als Seite, sondern als Artikel anzulegen – dann könnt ihr es an einer Stelle eurer Wahl verlinken, und es erscheint nicht in der Kopfzeile. Zum Impressum später im Rahmen des Footers (Punkt 14).

2. – Der Header

Hier habe ich grundlegende Strukturen aus dem Header von Reinhards Template erhalten. Ihr könnt Fotos oder ein Parteilogo einfügen. Wenn Ihr einen Zufalls-Header (Wechsel-Header) wünscht, dann ist das auch möglich, die Funktion ist angelegt. Hierfür muss Zeile 48 in der header.php folgendermaßen umgeändert werden.

Zurzeit sieht sie so aus:

< ?php echo get_option('home'); ?/>/wp-content/themes/arthemia/images/header.png” width=”960px” height=”80px” alt=”Header” />

Ihr ersetzt diese Zeile durch

< ?php echo get_option('home'); ?/>/wp-content/themes/arthemia/images/header/random.php” width=”960px” height=”80px” alt=”Header” />

In den Ordner /wp-content/themes/arthemia/images/header/ legt ihr alle Headerbilder, die nach dem Zufallsprinzip oben erscheinen sollen. Denkt dran, dass diese die Größe 960*80 Pixel haben müssen. Wenn euch diese Größe nicht gefällt, dann nehmt eine andere, vergesst aber nicht, die Zahlen auch in der header.php zu ändern.

3. – Anpreisen

An dieser Stelle wird der aktuellste Artikel einer bestimmten Kategorie angezeigt – in unserem Fall die Kategorie “Headline”. Diese sollte in eurem Blog existieren, damit das klappen kann. Ihr findet den Code in Zeile 9 – 12 der index.php

Thema der Woche
< ?php query_posts("showposts=1&category_name=Headline"); ?>

Denkt daran, den alten Artikel “Headline” aus dieser Kategorie zu entfernen – Häkchen wegmachen – wenn ihr einen neuen Artikel an dieser Stelle anpreist. Wenn ihr den Aufmacher anders als “Thema der Woche” nennen wollt, so ersetzt “Thema der Woche” durch etwas anderes eurer Wahl (zum Beispiel “Heiße Sache” “Schwer im Kommen” oder “Meine Debatte”)

Damit im Aufmacher auch ein schönes Bild erscheint, muss das Bild auf eurem Server existieren und ihr müsst den so genannten relativen Pfad zum Bild angeben. Bitte vergesst nicht, Urheber und Lizenz anzugeben!

Dieser Screenshot von reinhardbuetikofer.de vermittelt einen ersten Eindruck.

Die schönen großen Bilder

Die schöne Bildfunktion funktioniert mit dem Skript “timthumb.php”, das in dem Paket enthalten ist. In der Anleitung von Michael Hutagalung, dem Erfinder von Arthemia, steht geschrieben, dass man den Ordner /cache die Rechte 777 geben soll. Der Ordner /cache befindet sich dort /wp-content/themes/arthemia/scripts/cache – Diese sehr weitgehenden Rechte könnt ihr entweder mit dem Befehl chmod realisieren, oder per Rechtsklick in eurem FTP-Programm. Lasst euch da von eurem Hoster helfen, wenn ihr nicht wisst, wie das funktioniert.

Für jeden Artikel muss ein benutzerdefiniertes Feld namens “Image” (Großschreibung beachten!) angelegt werden. Das geht so: Ihr klickt auf “Enter new” und schreibt “Image” in das Feld.

Benutzerdefiniertes Feld hinzufügen

Dann ist das Feld “Image” angelegt, für die kommenden Artikel könnt ihr es aus dem Klappmenu anwählen.

Habt ihr das richtig eingerichtet, dann geht es jetzt richtig ran – das Verfassen eines Artikels. Die Zahlen orientieren sich an dem etwas weiter oben in diesem Artikel befindlichen befindlichen Screenshot.

1) relativen Pfad angeben
Gebt die URL des Bildes ab /wp-content/… in das benutzerdefinierte Feld “Image” ein.

2) Auszug
Unter dem Blogartikel findet ihr ein Feld, in das ihr einen Auszug eintragen könnt. Das ist sinnvoll, denn ihr wollt den angepriesenen Artikel vielleicht mit einem anderen Einstieg anpreisen, als mit den ersten soundsovielen Worten.

3) Kategorie
Angepriesene Artikel links (der große) muss in die Kategorie “Headline”, die kleinen (oben rechts) kommen in “Featured”. Bedenkt bitte, dass die Länge des Auszugs anzupassen ist, wenn ein Artikel zB von “Headline” in “Featured” verschoben wird – oben rechts ist weniger Platz.

Wie man also sieht, funktioniert das Skript “timthumb” sowohl für Headline als auch für die Kategorie “Featured” und außerdem für die Auflistung im unteren Teil der Seite. Die Größe der Bilder wird dabei automatisch angepasst, es wird auch ein Ausschnitt gewählt. Ich finde es sinnvoll, die Bilder in der Größe 300*275 Pixel auszuschneiden, dann weiß man recht genau, was am Ende angezeigt wird und überlässt so gut wie nichts dem Zufall.

In Zeile 32 der index.php steht “Das Neueste” – ihr könnt dies natürlich auch ändern. Denkt daran, eine Kategorie “Featured” anzulegen oder dies in Zeile 36 zu ändern.

< ?php query_posts("showposts=2&category_name=Featured"); $i = 1; ?>

Auch hier rate ich, die Artikel, die nicht mehr dort erscheinen, aus der Kategorie “Featured” wieder herauszunehmen, denn sonst werden sie weiter unten nicht angezeigt. – und das wäre doch schade!

4. – Lesen! – Angepriesene Links

Dies muss per Hand in HTML eingetragen werden. Ihr findet “Lesen” ab Zeile 60 – in der index.php

• Link 1
• Link 2
• Link 3

5. – Fernsehen – Youtube-Video

Ebenfalls per Hand eingetragen werden muss das kleine Youtube-Video. Den Code hierfür findet ihr direkt unter dem für “Lesen!”. Ihr müsst einfach die Kennzahl des Videos austauschen. Aktuell ist dort ein grünes Europawahlvideo verlinkt, es hat den Link www.youtube.com/v/gp6BVKjlwyA – um ein anderes Video dort anzuzeigen, müsst ihr “gp6BVKjlwyA” durch die entsprechende Kennzahl des Videos, welches ihr verlinken wollt, austauschen.

Achtung: das muss an zwei Stellen (zum Glück aber im selben Absatz) gemacht werden!

6. – Die bunte Bauchbinde

Farben machen das Leben schön.

Im Prinzip sind hier auch andere Farben möglich. Die spannenden Zeilen im Stylesheet (Name der Datei: style.css) befinden sich ab Zeile 431. Dort ist niedergelegt, welche Farben die Bauchbinden-Elemente haben sollen, wenn man die Seite einfach ansieht.

Das sind erst einmal die 8 Pixel breiten Balken oben drüber:

#cat-1 {border-top:8px solid #006600;}
#cat-2 {border-top:8px solid #660066;}
#cat-3 {border-top:8px solid #000066;}
#cat-4 {border-top:8px solid #330066;}
#cat-5 {border-top:8px solid #336600;}

Ab Zeile 461 findet sich noch mehr

#cat-1:hover {background:#006600; color:#fff; }
#cat-2:hover {background:#660066; color:#fff; }
#cat-3:hover {background:#000066; color:#fff; }
#cat-4:hover {background:#330066; color:#fff; }
#cat-5:hover {background:#336600; color:#fff; }

#cat-1:hover a {background:#006600; color:#fff; }
#cat-2:hover a {background:#660066; color:#fff; }
#cat-3:hover a {background:#000066; color:#fff; }
#cat-4:hover a {background:#330066; color:#fff; }
#cat-5:hover a {background:#336600; color:#fff; }

Wie man sieht, hat das ganz linke Element (background = Hintergrund) die Farbe #006600 – das ist das Standard-Grün. Dann folgt #660066, das ist ein freundliches Aubergine, und so weiter. Theoretisch könnt ihr dem Template sagen, dass sich die Farbe des Elements ändern soll, wenn man mit der Maus drüber fährt. Die Schriftfarbe ist stets weiß (#fff).

Ich finde, das ist eine schöne Stelle im Stylesheet, um mal ein wenig herumzuprobieren. Ihr findet Farbcodes zum Beispiel hier. Genauso könnt ihr auch mit eurem Grafikprogramm (zum Beispiel mit der Freien Software Gimp) die Codes herausbekommen.

Sinnvoll ist es, mithilfe der Farben einen Bezug zum Thema herzustellen. Bei Reinhard Bütikofer habe ich beispielsweise die Kategorie “Diary of Change” in Demokraten-Rot eingefärbt, die Kategorie “Europa” in Blau-Gelb, die Kategorie “Green New Deal” in einem “neuen” Grün und “Archiv” im Standard-Grün. Genauso könnt ihr natürlich Farben wählen, die euch gefallen oder aber die von mir vorgeschlagenen lassen, wie sie sind.

Wichtig für die Bauchbinden-Elemente: Zeile 85 in der index.php

< ?php $display_categories = array(2,3,4,5,6); $i = 1;

Wie man sieht, sind die Kategorien mit der ID 2,3,4,5,6 von mir voreingestellt. Die Kategorie 1 ist bei WordPress die “Allgemein” Kategorie, das macht aus meiner Sicht keinen Sinn. Ihr könnt die IDs der Kategorien erfahren, wenn ihr im Bereich “Kategorien” eures Blogs über die Kategorienamen fahrt – dann wird unten im Browser eine Kategorie-ID angezeigt

Drüberfahren - ganz unten Link schauen

Mir fällt gerade keine bessere Erklärung ein, ich mache das immer so. Habt ihr die IDs der Kategorien, die ihr in der Bauchbinde anzeigen wollt, herausgefunden, dann tragt sie in der index.php in Zeile 85 ein. Wenn ihr den Kategorien eine Beschreibung hinzugefügt habt, wird diese unter dem Kategorienamen angezeigt. Denkt daran, dass die Beschreibungen in etwa die gleiche Länge haben sollten – sonst gibt es unschöne “Hüpf-Effekte”.

7. – die neuesten Artikel

Ganz normal, wie es sich für ein Blog gehört, werden im unteren Bereich des Templates Artikel chronologisch aufgelistet. Wie ich oben schon schrieb, werden hier nicht die Artikel der Kategorien “Featured” und “Headline” angezeigt (sofern dies richtig eingestellt ist, worauf ich jetzt eingehe)

Wichtige Zeile in der index.php: 113

query_posts(“cat=-5,-6,-7,-44&paged=$page&posts_per_page=4”); ?>

Ausgeblendet in diesem Fall sind die Kategorien mit der ID 5,6,7 und 44. Es werden vier Artikel pro Seite angezeigt. Hier müsst ihr selbst ein wenig anpassen, denn ich kann ja nicht wissen, welche Kategorien in eurem Blog welche IDs haben. Sinnvoll aus meiner Sicht ist es, die Kategorien “Featured” und “Headline” auszublenden, damit die Artikel nicht zweimal (einmal oben und einmal unten) erscheinen.

Jetzt wird’s einfacher – nun geht’s an die Widgets.

Um die Widgets benutzen zu können, müsst ihr vorher die entsprechenden Plugins aktiviert haben. Ansonsten können sie nicht verwendet werden. Am besten aktiviert ihr einfach alle Plugins, die ich mit in das Paket gepackt habe, später kann ich dies noch einmal genauer auflisten.

Die Widget-Sektion findet sich im Bereich “Erscheinungsbild”.

Sidebar Top:

Ich habe hier folgende Widgets verwendet

8. – FlickrRSS
9. – Gigs Kalender
10. – Schlagwortwolke

Sidebar Left

11. – Twitter Tools

Empfehlung: Nur einen Tweet anzeigen, keine Credits, kein automatisches Twittern aus dem Blog. Alles andere sieht “nicht schön” aus, finde ich.

Sidebar Right

12. – Blogroll

14. – Footer

Hier ist das Impressum eingebaut, am besten als Artikel (und nicht als Seite) anlegen und dort verlinken. Wichtig hier der Bereich ab Zeile 31 in der footer.php – ich wäre euch dankbar, wenn ihr die Credits genau so lasst, wie sie sind.

Weiterhin gibt es noch folgende enthaltene Plugins

• mygallery
• Viper Video Quicktags
• WP-Print
• WP-Email
• WP-Polls (Abstimmungen)
• Kontaktformular von Dagon Design
• Akismet (Spamschutz)
• Audio Player
• WP-Post-Ratings (Artikel bewerten) + Widget
• WP-Post-Views (zählt Ansichten pro Artikel) + Widget
• Datenbank-Backup-Plugin

Hoffe, ich habe nichts wesentliches vergessen. Jetzt habe ich erst einmal einen wichtigen Termin und komme nachher wohlgemut (hoffentlich) zurück, um eure Anmerkungen zu lesen – denn ich habe sicherlich wichtige Fragen als Selbstverständlich ausgeklammert, bei diesem Design bin ich bestimmt betriebsblind. Der Artikel wird auch noch einmal schöner und leserlicher gemacht, aber ich möchte euch das Design schonmal zur Verfügung stellen und vielleicht kommen ja manche schon mit der vorliegenden Erklärung klar.

Danke an meinen Hoster Stefan!

Drei Tipps zum Abschluss:

1. Benutzt, wenn ihr nicht weiterwisst, eine Suchmaschine
2. Hilfreich ist auch die Seite “SelfHTML”
3. Noch keine Artikel? Nutze den Blindtextgenerator