WordPress Themes richtig aussuchen und nachhaltig konzipieren

Ideensammlung vom zweiten WordPress Berlin Workshop

Geschätzte Lesezeit: 12 Minuten

WordPress Berlin wurde im Jahr 2012 als Kommunikationskanal für WordPress Fragen gegründet und hat derzeit rund 400 Mitglieder. Jede TeilnehmerIn kann Workshops vorschlagen und eigenverantwortlich organisieren.  Wie man WordPress Themes richtig aussuchen und anpassen kann, ist ein wichtiges Thema. Dazu habe zu einem sechsstündigen Workshop in der Wikimedia Foundation eingeladen, um gemeinsam Ideen, Anregungen und kreative Lösungsvorschläge zu diskutieren. Gemeinsam mit Esther Nowack moderierte und strukturierte ich den Workshop.

Teil 1 – Frage an die TeilnehmerInnen: Was ist für Dich wichtig bei der Wahl deines Themes?

Verwendungszweck

Nicht jedes Projekt hat vorab einen klar definierten Verwendungszweck. Dieser ist jedoch sehr hilfreich, um von Anfang an ein Theme richtig aussuchen zu können und bietet viele Entscheidungshilfen. Soll das Endprodukt ein Shop sein, ein Kontaktblog oder eine Dienstleistungsseite? Ein Aushängeschild, ein Portfolio, ein Veranstaltungskalender oder ein Magazin? Hat man die Frage geklärt, fällt es viel leichter, ein Theme zu finden – wobei man auch im Umkehrschluss über die Möglichkeiten eines Themes neue Verwendungszwecke entdecken kann.

Farben

Die Farbgebung eines Themes soll so gestaltet sein, dass interessante Kontraste entstehen. Schrift muss dabei immer gut lesbar sein. Blaue Schrift auf lila Grund ist selten eine gute Idee. Wünschenswert ist, dass sich der Inhalt vom Hintergrund absetzt, es also unterschiedliche Gestaltungsmöglichkeiten für Background und Content gibt. Der Ausgangspunkt eines guten Themes kann eine neutral gehaltene Farbgebung sein, das bietet die meisten Möglichkeiten der Gestaltung. Farben sollten dem Verwendungszweck angemessen sein, so soll beispielsweise eine Shoppingseite besser keine zu düstere oder triste Stimmung haben, wenn es sich nicht gerade um einen Shop für Emozubehör handelt. Reinweiß könnte als Hintergrund in manchen Fällen zu streng sein – leicht getönte Farben wie Pastellgelb schmeicheln dem Auge. Dennoch ist Weiß in seiner Neutralität sehr flexibel und bietet alle Möglichkeiten. Stilelemente und Fotos auf der Seite können einen zu harten Kontrast neutralisieren. Reinschwarz als Textfarbe kann das Auge anstrengen, dunkles Grau ist angenehmer zu lesen. Ein Theme mit umfangreichen Einstellungsmöglichkeiten im Customizer oder in den Theme Options ist wünschenswert. Der Einsatz von wysiwyg Farbeditoren wird sehr geschätzt und einem Child Theme vorgezogen. Dabei ist zu beachten, dass Farbwerte, die über den Customizer geändert werden, nicht in einem Stylesheet platziert, sondern inline in den Header des Themes geschrieben werden. Somit werden auch Farben in der style.css eines Child Themes überschrieben, wenn für die jeweiligen CSS-Klassen Customizer Werte vorliegen. Dadurch, dass der Customizer seine Werte im Header platziert, wodurch die Settings beim Aufruf von jeder Seite neu gelesen werden, kann es bei zahlreichen Einträgen zu einer Erhöhung der Ladezeit kommen. Deshalb sollte man gegebenenfalls die fertig eingestellten CSS-Werte nach der Bearbeitung im Customizer aus dem Quelltext der Seite kopieren, in die style.css von einem Child Theme übertragen und den Customizer zurücksetzen. Über Sylestats kann man CSS-Werte aus Stylesheets auslesen, entweder über die Eingabe einer URL oder über den Upload eines Stylesheets. Wenn man alle CSS-Farbwerte einer Seite kennt, kann man sie unkompliziert mit einem eigenen Farbschema auswechseln. Uneinigkeit herrscht in der Gruppe, ob man besser die Klassen für Farben Feld für Feld einzeln mit Browser-Entwicklertools identifizieren und in ein Child Theme übertragen soll, oder ob man vielmehr das gesamte Stylesheet des Mutterthemes in das Child Theme übernimmt und die Farben über die „Suchen und Ersetzen“ Funktion eines Editors austauscht. Beide Varianten sind möglich. Vorteil der Schritt-für-Schritt Variante: Man kann individueller auf Farbabstimmungen eingehen. Manchmal ist beispielsweise das Grau eines Balkens identisch mit der Schriftfarbe. Wenn man den Balken grün einfärbt, ist nicht auch die Schrift grün, wenn man Element für Element anpasst. Wenn man nur die CSS-Klassen in das Child Theme überträgt, die man selbst geändert hat, das Stylesheet vom Muttertheme importiert und dessen Klassen überschreiben lässt von den Klassen im Child Theme, werden spätere Updates und seltene, aber mögliche Veränderungen im Stylesheet des Mutterthemes mit berücksichtigt. So dauert aber die Bearbeitung deutlich länger. Vorteil der Übertragung des ganzen Stylesheets des Mutterthemes in das Child Theme: Man kann über einen Codeeditor sehr schnell und effizient arbeiten, ein neues Farbschema ist in wenigen Minuten eingesetzt. Da durch Media Queries viele Klassen oft mehrfach im Stylesheet für unterschiedliche Auflösungen vorkommen, ist die Bearbeitung wesentlich erleichtert, da alle Werte im Child Theme bereits vorliegen. Es kann sich auch positiv auf die Ladezeit auswirken, wenn nicht erst das Stylesheet des Mutterthemes über das Child Theme eingelesen wird, denn jede externe CSS-Quelle verlangsamt eine Seite. So werden aber spätere Aktualisierungen im Originaltheme nicht übernommen.

Werkzeuge, um Farbschemen zu erstellen:

Barrierefreiheit in Bezug auf Farben:

Über die Website Enably kann man Hinweise auf das Aussehen einer Website bei Farbenblindheit bekommen.

Schriften

Die Schriftarteneinbindung soll in einem Theme frei gestaltbar sein. Serifenschriften sind interessant und angemessen – es hängt immer vom Einsatzzweck und von den Endgeräten ab, auf denen die fertige Website hauptsächlich genutzt wird. Golem beispielsweise nutzt selbstverständlich serifenlose Schriften als Headlines und Serifenschriften für Fließtexte. Arial wird als veraltet und nicht mehr zeitgemäß empfunden. Doch auch die schicke Open Sans ist nicht notwendigerweise ein Garant für gute Typografie, da sie bei falschem Einsatz auch nicht gut aussieht. Vor allen Dingen allzu kleine Schriften sollte man vermeiden. Generell wird auf gute Schriften sehr großer Wert gelegt, das Erscheinungsbild soll professionell wirken.

Ausstattung

Sowohl bei der Auswahl von Premium Themes als auch bei Gratisthemes ist die Ausstattung mit integrierten Zusatzplugins und -Funktionen, beispielsweise für Slideshows oder Kontaktformulare, nicht ausschlaggebend. Man sollte eher darauf achten, dass Themes und Ausstattung unabhängig voneinander bleiben – denn sollte man eines Tages das Theme wechseln, gehen zu viele Einstellungen verloren. Besonders ausschlaggebend ist das bei Shortcodes. Um Texte mit Spalten zu strukturieren, Buttons einzupflegen etc. empfiehlt Esther Nowack unbedingt, nicht auf Theme-Shortcodes zurückzugreifen, sondern lieber das Plugin „Shortcode Ultimates“ zu verwenden – denn so bleiben Textformatierungen dauerhaft erhalten, auch wenn man das Theme wechselt. Das „Page Builder“ Plugin von Origin ist eine gute Empfehlung. Damit kann man eine Seite einteilen in Spalten und ohne großen Aufwand selbst Designs anlegen. Wahrscheinlich wird es bald ein fester Bestandteil von WordPress sein. Videoeinbindung wird von einigen TeilnehmerInnen für wichtig gehalten. Immer mehr Websites zeigen bewegte Hintergründe oder Headerbilder. Auch dafür gibt es Plugins. Hier stellt sich die Frage, ob man diese Videos auch auf Smartphones laden lässt, oder ob man sie auf mobilen Geräten nicht anzeigt. Es ist jedoch schwierig, genau festzustellen, welches Gerät mobil ist und welches nicht. Über die reine Pixelgröße ist es mittlerweile fast unmöglich, festzustellen, ob ein Gerät ein Smartphone, Tablet oder ein Desktoprechner ist – besser ist eine Angabe in Pixel Ratio. Wenn man große Daten wie Videos anbietet, macht es ggf. Sinn, über bewusst gesteuerte Ladeverzögerung nachzudenken – beispielsweise dass Videos nur dann geladen werden, wenn die UserIn nach unten zum Video scrollt, aber nicht, wenn sie über das Headermenü direkt eine andere Seite aufruft. Wichtig für eine themeeigene Ausstattung sind Sprachen. Wer ein mulitlanguage Projekt plant, sollte unbedingt darauf achten, dass das Theme selbst auch schon mehrsprachig angelegt ist, denn das Nachrüsten von Sprachen kann für ein Theme sehr aufwändig sein. Der Wunsch nach interessanten Bewegungseffekten wurde geäußert, beispielsweise dem Ken Burns Effekt, einige Ideen wurden auch in Bezug auf Parallax Gestaltung angesprochen. Allerdings wird hier die Gefahr von einem „zu viel“ gesehen. Außerdem unterliegen Effekte Moden und können, falls nicht bewusst und sinnvoll eingesetzt, sehr schnell veralten. Über das Plugin Jetpack können zahlreiche interessante Funktionen nachgerüstet werden. Zwar wird man mit Jetpack abhängig von den Servern von WordPress – es stellt sich jedoch die Frage, ob das einerseits ein Nachteil ist und ob es andererseits nicht egal ist, weil man allein schon durch die Aktualisierungen des Systems mit WordPress verbunden ist. Insbesondere das CDN von WordPress, über das Bilder weltweit ausgeliefert werden, kann sehr hilfreich sein.

Themes testen

Generell gilt: Man weiß erst, wie gut ein Theme ist, sobald man es ausprobiert hat. Das gilt für Premium Themes ebenso wie für Gratisthemes. Manchmal muss man das Risiko eingehen, ein Theme auf gut Glück zu kaufen, auch wenn man es nicht nutzt. Mit dem Plugin „Theme Test Drive“ kann man unkompliziert Themes mit eigenen Inhalten ausprobieren, ohne sie live zu schalten – eine sehr hilfreiche Funktion. Es verursacht jedoch in seltenen Fällen Konflikte. Dann muss man es auf Serverebene via FTP Client deaktivieren und über das WP Backend neu einschalten.

Demodaten:

Viele Premium Themes lassen über XML-Files den Import von Demodaten zu. Es gibt aber auch für Gratisthemes einige Plattformen für Demodaten, um schnell Dummycontent für eine Testumgebung zu erstellen.

Inspiration von guten Seiten

Eine schöne Möglichkeit, ein tolles Theme zu finden, ist Inspiration von gelungenen Websites. Über What WordPress Theme is that kann man herausfinden, wer welche Themes benützt.

Teil 2 – gute Premium Themes auf Themeforest finden

Esther Nowack zeigte Details, auf die man achten kann, wenn man über den bekanntesten Vertrieb von Premiumthemes Themeforest etwas Passendes erwerben möchte. Generell gilt: Bei Themeforest gibt es wenig Qualitätskontrolle durch die Plattform selbst. Man findet aber eine Reihe an Hinweisen, die auf gute Themes hinweisen können. Die Top 10 der Themeforest Themes können einen ersten Einstieg in die Thematik bieten. Updates und die Häufigkeit von Updates können ein wichtiges Qualitätsmerkmal sein. Sterne können auf gute oder schlechte Themes hindeuten. Drei Sterne sind schon sehr schlecht. Es hängt aber immer auch von der Anzahl der Bewertungen ab. Viele Plugins gebündelt in einem Theme sind kein wichtiges Kaufkriterium. Im Gegenteil, es ist oft besser, die Plugins selbst zu kaufen und individuell zu aktualisieren, dann ist man vom Theme unabhängig. Browserkompatibilität ist sehr wichtig. Wie weit ein Theme mit älteren Browsern kompatibel ist, kann ausschlaggebend sein, wenn man in erster Linie Firmenkunden hat. Speziell in Unternehmen werden Technikparks seltener ausgewechselt als im Consumerbereich, und in Unternehmen gibt es auch nicht unbedingt Browserupdates. Der IE 8 beispielsweise hat derzeit einen Anteil von 25% aller IE UserInnen, was im Endeffekt immer noch knapp 3% aller Browserzugriffe sind. Nur wer seine Zielgruppe und deren Geräte kennt, kann auf die Frage, ob man IE 8 überhaupt noch berücksichtigen soll, eine sinnvolle Antwort finden. Ob ein Theme seine KäuferInnen zufrieden stellt oder nicht, kann man oft aus den Kommentaren über das Theme ersehen. Dabei ist aber die Interpretation der Kommentare wichtig, denn viele UserInnen stellen Fragen aus Unkenntnis. Wenn man ein gutes, umfangreiches Theme gefunden hat, das viele Möglichkeiten bietet, so kann man es für viele Projekte immer wieder verwenden, ohne sich jedes Mal neu einarbeiten zu müssen. Da es oft hohen Aufwand darstellt, alle Features eines Premiumthemes zu lernen, kann das bei Kundenprojekten viel Zeit sparen. Welche Lizenz man für ein Theme erwirbt, hängt von der zukünftigen Verwendung ab: Will man das Theme als Produkt weitervertreiben, braucht man eine extended Licence. Will man es nur selbst nutzen oder für einen einzelnen Kunden einrichten, so reicht die regular Licence. Eine Lizenz ist keine Garantie! Ob und wie lange ein Theme weiterentwickelt wird, kann man schwer vorhersehen, es gibt keine vertraglichen Verpflichtungen für Theme-EntwicklerInnen. Hilfreich ist es, das Portfolio von Theme DesignerInnen anzusehen, um herauszufinden, wie sattelfest die Person mit WordPress Theme Entwicklung ist. „Kriesi“ beispielsweise ist österreichischer Designer und einer der erfolgreichsten Entwickler auf Themeforest. Seine Themes erscheinen auch in deutscher Sprache. Beachten sollte man, dass ein umfangreiches Theme immer mit einer umfangreichen Dokumentation einhergeht. Sprachkenntnisse sind dafür ausschlaggebend – wer kein Englisch kann, wird Schwierigkeiten mit einer dicken englischsprachigen Einführung in die Theme Options haben. Niemals sollte man sich gecrackte Themeforest Themes von Drittanbietern gratis herunterladen, oft sind Viren und Trojaner im Quellcode zu finden. Wer nach „kostenlosen Themeforest Themes“ auf Google sucht, findet eine ganze Menge dubioser Seiten, die man besser vermeiden sollte. Neben Themeforest ist auch Appthemes eine gute Adresse – hier gibt es  hauptsächlich special interest themes zu unterschiedlichsten Zwecken.

Teil 3 – Twenty Fourteen anpassen

Um einen Spielplatz für alle TeilnehmerInnen aufzusetzen, hat Granat On ein WordPress Testsystem mit Twenty Fourteen und Demodaten vorbereitet. Das Magazin-Theme Twenty Fourteen ist sehr charakterstark und bietet nur wenige Anpassungsmöglichkeiten. Es gibt jedoch vier Plugins extra für Twenty Fourteen, die eine Überarbeitung kinderleicht machen. Alle Plugins setzen Anpassungsfelder in den Customizer.

  • Fourteen Colors für einfache Farbanpassungen
  • Styles gemeinsam mit Styles: Twenty Fourteen für sehr diffizile umfangreiche Farbanpassungen
  • Fourteen Extended für einfache bis radikale Layoutänderungen (Seitenbreite, zentrieren …)

Exportfunktionen für die vorgenommenen Einstellungen in diesen Plugins sind keine integriert. Doch auch diese Anpassungen werden, wie oben beschrieben, in den Header einer Seite gesetzt. Hat man alle Veränderungen vorgenommen, kann man sie aus dem Quelltext der Seite auslesen und in ein Child Theme übertragen. Dann kann man die Plugins wieder deaktivieren. Grundsätzlich gilt: Wenn man mit einem Child Theme arbeiten will, sollte man es aktivieren, bevor man Änderungen über Plugins macht, denn wenn man das Muttertheme optimiert, werden diese Überarbeitungen nicht mehr angezeigt, sobald man später auf ein Child Theme wechselt. Es sei denn, man überträgt die Styles aus dem Quelltext des Mutterthemes in das Stylesheet des Child Themes. Twenty Fourteen nutzt eigene Bildgrößen und -proportionen für die Beitragsbilder. Bereits beim Upload werden Thumbnails erzeugt. Die Größe und die Proportion dieser Thumbnails wird in der functions.php bestimmt. Möchte man diese verändern oder ganz auf die Funktion verzichten, so muss man die neuen Eigenschaften in der functions.php eines Child Themes festlegen. Man kann bei Twenty Fourteen wahlweise einen Slider oder eine Artikelmatrix für die Startseite wählen. Jeder Beitrag, der darin erscheinen soll, muss mit dem gleichen Tag versehen werden. Artikel, die darin integriert sind, werden nicht mehr extra im folgenden Loop angezeigt, weshalb man mindestens einen weiteren Artikel anlegen muss, der nicht in diese Auswahl einbezogen ist. Artikel, die dafür ausgewählt werden, sollten unbedingt ein passendes Artikelbild bekommen, da andernfalls unschöne Leerflächen entstehen. Für Artikel ohne Vorschaubild empfiehlt es sich, einen attraktiven Dummy zu gestalten, der immer dann zum Einsatz kommt, wenn ein Artikelbild fehlt. So ein gut gestylter Dummy kann ein wunderschönes Stilelement sein.

Teil 4 – individuelle Projektbesprechung

Zum Abschluss wurden noch individuell TeilnehmerInnenprojekte in der Gruppe diskutiert. Darunter ein Immobilienseitenprojekt und die Übertragung der Seite einer Presseagentur von HTML in WordPress. Für manche Seiten ist es nach wie vor sehr sinnvoll, ein WordPress Theme zu designen und von Grund auf neu aufbauen zu lassen, als ein fertiges Theme anzupassen. Die Möglichkeit, aus HTML Seiten WordPress Themes zu generieren, die gibt es zwar, doch der Code wird dabei gern Kuddelmuddel. Die Anpassung von CSS Buttons mit FontAwesome über die Entwicklertools von Firefox wurde kurz demonstriert.

Was wir noch lernen konnten:

Ethercalc ist nicht identisch in seinen Funktionen mit Etherpad. Wenn man in einer Gruppe an Ethercalc arbeitet, sieht man nicht, wer gerade was schreibt. UserInnen können keine individuellen Farben anlegen. Änderungen in den Texten werden erst nach einem Reload sichtbar. Fazit: Wenn mehrere Leute gleichzeitig in ein Feld schreiben, löschen sie sich gegenseitig und das Tabellenblatt geht kaputt. Folglich ist Ethercalc nur bedingt für ein spontanes Brainstorming nutzbar. Erst wollten wir jeder UserIn eine eigene Zeile zuweisen, damit man sich nicht gegenseitig stört, doch das hat sich als zu kompliziert herausgestellt. Im Endeffekt lief die Ideensammlung darauf hinaus, dass ich Ethercalc genutzt habe, um ein Protokoll der verbal geäußerten Ideen nach Kategorien geordnet festzuhalten. Dafür war es ein gutes Tool.

Ideen für zukünftige Workshops

  • SEO für WordPress  (ausführlich)
  • Barrierefreiheit für WordPress Seiten
  • Responsive Bilder und Videos
  • Site Performance und Caching
  • Github nutzen

3 Gedanken auf "WordPress Themes richtig aussuchen und nachhaltig konzipieren"

  1. Dietrich Antworten

    Das ist ja gefährlich, wenn du immer so gute Berichte schreibst, da braucht man ja gar nicht mehr zur Veranstaltung zu gehen. Dennoch bedaure ich es, nicht dabei gewesen zu sein, hätte doch wieder eine ganze Menge wegschleppen können.
    LG Dietrich

    • Granaton Antworten

      Vielen Dank, Dietrich! Es war schade, dass du nicht dabei warst, mit deiner Erfahrung hättest du sicher eine Menge beigesteuert. Nächstes Mal dann! Hast du deine Slides für deinen Vortrag beim letzten Meetup schon online gestellt?

      • Dietrich Antworten

        Kommt Anfang der Woche. Habe auch einen Artikel dazu fast fertig, ist sicher für die, die den Vortrag nicht gehört haben, verständlicher.

Teilen Sie Ihre Meinung mit