Lange schon wollte ich meinen Zeichner-Blog wiederbeleben. Der Wille war da, aber zuerst nicht die Zeit und mit der Länge der Pause entstanden umso mehr Dinge, die ich ändern wollte. Vor kurzem habe ich es doch endlich in Angriff genommen und den Blog aufgeräumt und einen neuen Anstrich verpasst. Dabei sind mir einige Arbeitsweisen, Methoden und Tipps aufgefallen, die vielleicht auch dem einen oder anderen bei der Administration eines Blogs helfen oder gar dem Neu-Aufsetzen. Dieser Artikel richtet sich also an WordPress.org-User bzw. Blogger mit einem selbst gehosteten WordPress und mit Einschränkungen auch an WordPress.com-Nutzer. Ich habe versucht die Anleitungen und Erklärungen so zu schreiben, dass man mit ihnen auch umgehen kann, wenn man keine Kenntnisse in Web-Design und -Programmierung hat. Ihr könnt mir gerne in den Kommentaren schreiben, ob es geklappt hat 😉 Übrigens beziehen sich meine Anleitungen auf die Arbeit im Chrome-Webbrowser. Verwandt mit dem Thema sind auch meine Artikel zu Umzug eines WordPress.com-Blogs zu einer selbst-gehosteten Lösung (unter Mitnahme der Follower) und häufige Fehler und wie man sie fixt.

Designanpassungen mit dem Customizer

Wenn man nach langer Suche das perfekte Theme gefunden hat, stören unter Umständen einige Features und trüben das Gesamtbild. Deswegen muss man in den meisten Fällen nicht gleich ein anderes Theme suchen, sondern kann sich einfach der Freiheiten bedienen, die einem WordPress mit auf den Weg gibt. Denn man kann quasi alle Themes benutzerdefiniert (customized) gestalten. Dazu kann man sich beispielsweise des Customizers bedienen. Der versteckt sich im WordPress-Menü unter Design.

Der Customizer stellt den Blog in einem Frame dar, wodurch man die vorgenommenen Einstellungen meistens sofort am ‚lebenden Objekt‘ sehen kann. Man kann sich sogar normal durch die Webseite durchklicken. Die Änderungen, die man vornehmen kann, werden einem am linken Rand im Menü des Customizers angeboten und erst gespeichert, wenn man den Button betätigt. Welche und ob einem überhaupt Möglichkeiten zum customizen zur Verfügung stehen, das hängt vom Theme ab. Es gibt Themens, die einem eine schier unendliche Anzahl an Möglichkeiten bieten und welche, die mit kaum Optionen daherkommen. Eine Praktik, die lange ausgeübt wurde, ist dass Anbieter von WordPress Themes eine freie und eine Kauf-Version des Themes angeboten haben. Oftmals gibt es in der freien Version bestimmte Features gar nicht und nur eingeschränkte Möglichkeiten um sie an die eigenen Wünsche über den Customizer anzupassen, während die Voll-Version ein größeres Spektrum bietet. Das ist manchmal vorher nicht abzusehen und man muss es einfach erproben.

Man kann aber nicht alles über den Customizer erledigen, die Möglichkeiten sind begrenzt. Falls das zutrifft oder das Theme von Haus aus wenig Spielraum für Anpassungen zulässt, kann man sich des Customized CSS (= „Zusätzliches CSS“) bedienen.

Design anpassen via benutzerdefiniertes CSS / Customized CSS

Wer sich für Programmierung und Webdeisgn interessiert, dem ist CSS sicherlich bekannt. Als Erklärung für alle anderen: CSS ist eine Designsprache, die bei Webseiten die Optik definiert. CSS hat quasi einen englischen Befehlssatz und kann daher von jedem verstanden werden – aber nicht alles ist intuitiv. WordPress erlaubt es einem das CSS eines Themes anzupassen wie man möchte in dem man im Customizer unter Zusätzliches CSS die entsprechenden ‚Regeln‘ hinzufügt. Wie das geht, möchte in den folgenden Absätzen auch für Nicht-Webdesigner verständlich erklären.

Grundsätzlich muss man wissen, dass eine Webseite durch Tags und Container gegliedert wird. Jedem solchen Container kann man einen Style zuweisen. Ein Beispiel erklärt das besser. Eine Überschrift beispielsweise ist ein h2-Container. In dem Screenshot sieht man, dass die Überschrift (links) den HTML-Container h2 hat (oben rechts) und der Container hat eine CSS-Klasse die auch h2 heißt (neben anderen Attributen), die eine font-size von 34px angibt. Die CSS-Klasse ist das, was wir verändern wollen. font-size ist ein CSS-Attribut.

Möchte ich beispielsweise, dass die Schriftgröße kleiner ist, würde ich es mal mit font-size: 28px; oder einem anderem Wert kleiner als 34 probieren. Klingt logisch, oder? Und genau so kann ich das im Customizer unter Zusätzliches CSS eingeben. Allerdings muss die Notation, also die Schreibweise korrekt sein. Das würde wie folgt aussehen:


/** Hier ein Kommentar, damit ich später noch weiß, warum ich das gemacht habe. Er muss zwischen den Sternen stehen: ich habe die Schriftgröße der Überschrift geändert.*/
.entry-content h2 {
font-size: 28px;
}


Und würde so in den Customizer eingegeben werden (anderes Beispiel):

Jetzt stellt sich natürlich die Frage (insbesondere für diejenigen, die nicht mit Webdesign vetraut sind): wie komme ich an die Namen der richtigen CSS-Klassen ran und woher weiß ich die „Befehle“ bzw. CSS-Attribute? Dazu kann man ein in Browser standardmäßig integriertes Tool für Webentwickler benutzen, die Debug Tools. Im Chrome kann man beispielsweise F12 drücken und erhält die Ansicht, die man im Screenshot unten sieht.

Unter Elements sieht man den DOM, d.h. den Aufbau der Webseite mit HTML-Tags und -Containern. Rechts unter Styles sieht man die CSS-Style-Klassen. In den Debug Tools kann man an der Webseite rumspielen, ohne dass man etwas kaputt machen kann – nach einem Neu laden der Seite (F5), sind die Änderungen weg. Wenn man ein ganz bestimmtes Element untersuchen möchte, kann man in den debug tools den Picker aktivieren (linke obere Ecke, siehe roter Kreis im Screenshot) und dann mit dem Cursor in der Webseite ein bestimmtes Element auswählen. Dann wird einem in Elements und Style das entsprechende HTML und CSS angezeigt. Das coole daran: man kann so beliebig im Browser rumprobieren. Denn unter styles kann man alle möglichen Attribute verändern, löschen, ausblenden (über Checkboxes am Attribut) und auch welche hinzufügen.

Der beste Ansatz ist, wenn man in einem Browser-Fenster oder -Tab die Webseite mit den Debug Tools offen hat und Styles ausprobiert. font-size ändern, color ändern, etc. Und in einem zweiten Browserfenster kann man den Customizer offen lassen mit der Ansicht des zusätzlichen CSS. Hat man in den Debug Tools eine Einstellung gefunden, die einem gut passt, kann man dort unter styles die entsprechenden CSS-Klassen einfach rauskopieren und in dem anderen Fenster im Customizer einfügen – fertig. Das einzige was noch fehlt ist, die richtigen CSS-Attribute zu kennen. Da CSS sowas wie ein Universalwerkzeug ist, findet man dank Suchmaschinen in der Regel fast alles. „css farbe von text ändern“ und sowas dürfte schon dick ausreichen. Ansonsten helfen Seiten wie die W3 Schools. Aber Achtung: gut testen und im Zweifelsfall auch wieder was unter „Zusätzliches CSS“ aus dem Stylesheet löschen, denn man kann sich damit theoretisch das Design auch zerhauen, wenn man nicht aufpasst. Zuviel Angst ist aber auch nicht nötig, denn man kann im Customizer immer den Standard wieder herstellen 😉 Es ist unter WordPress unter Umständen auch möglich die CSS-Stylesheets direkt zu bearbeiten, wozu ich nicht rate. Wenn man das Theme aktualisiert, wären dann alle vorgenommenen CSS-Änderungen weg.

Freie Fonts finden, die dem Ganzen mehr Würze geben

Falls einem die Welt der Standard-Fonts etwas zu klein wird, gibt es das Google Fonts Projekt, das einem Open Source Fonts zur Verfügung stellt. Dort kann man nach Belieben filtern und bei den Fonts sogar eine CSS-Klasse auswählen, die man auf die Stylesheets anwenden kann. Dank der Google Font API können die Fonts über CSS-Befehle geladen werden. Alles was man dazu braucht, sogar die entsprechenden Befehle und URLs zur API gibt die Seite an. Klasse Sache!

Features von WordPress.com nutzen

Um Features von WordPress.com zu benutzen wie den Folgen-Button, die durch Kacheln animierten Galerien, Statistiken aufzeichnen zu können, den Like-Button etc. kann man sich das Jetpack-Plugin installieren. Achtung: man muss evtl. auch nach Updates die Einstellungen im Jetpack-Menü nochmal überprüfen. Jetpack ist mächtig und bietet einem viel Komfort. V.A. wenn man von einem wordpress.com-Blog zum selber hosten wechselt, wird man viele Funktionen vermissen. Aber aus Erfahrung muss ich sagen, dass Jetpack zu aktualisieren ein Glücksspiel sein kann. Einmal unter drei Versuchen scheitert bei mir in der Regel das Update oder die Einstellungen gehen verloren. Was man in dem Fall tut, steht hier.

Webseite auf Responsiveness testen mit den Debug Tools

Responsive Webdesign bedeutet, dass die Anzeige einer Webseite automatisch auf die Gegebenheiten des Endgeräts anpasst wird. D.h. die Inhalte der Webseite werden bspw. automatisch „schmaler“ auf einem Smartphone angezeigt im Vergleich zu einem PC Bildschirm. Dass eine Webseite responsive ist, kann extrem wichtig sein. Wird sie auf einem portablen Gerät seltsam dargestellt, animiert man höchstwahrscheinlich den Besucher höchstens dazu die Seite direkt zu schließen. Man kann leicht testen wie eine Webseite unter verschiedenen Bildschirm-Auflösungen aussieht. In den debug tools kann man die Anzeige über ein Handy, Tablet etc. nämlich simulieren. Dazu die Anzeige aktivieren (siehe roter Kreis im Screenshot) und angeben für welches Gerät man die Ansicht testen will (gelbe Markierung). Falls es um kein bestimmtes Gerät geht, dann „responsive“ auswählen und die Ansicht beliebig vergrößern und verkleinern. Man kann sogar testen wie die Webseite aussieht, wenn der Bildschirm gekippt/gedreht wird – siehe kleines Symbol mit der gelben Markierung.

Ein Design-Sheet oder -Konzept anlegen hilft

Damit man bei Anpassungen am Design oder Erstellen von Grafiken oder anderem (Visitenkarten, …) wichtige Daten des Designs auf einen Blick hat, würde ich empfehlen sich die wichtigsten Daten irgendwo abzulegen, sodass man sie direkt griffbereit hat. Sozusagen eine Art „Cheat-Sheet“ für das Design. Das für meinen Blog „Miss Booleana“ sieht das beispielsweise so aus (Stand September 2017):

Falls sich das schon jemand von euch fragt: nein, ich werde für diesen Artikel nicht von Google oder WordPress bezahlt. Tatsächlich arbeite ich sehr gern auch auf Arbeit mit den Chrome Debug Tools, obwohl die von Firefox und Konsorten inzwischen quasi genauso aussehen und funktionieren. Ich hoffe, dass der Artikel für den einen oder anderen eine kleine Hilfe ist wie man das Webdesign auf Herz und Nieren prüft und ggf etwas mehr aus dem Blog rausholt. CSS kann unter Umständen eine Hürde sein, wenn man noch nie etwas mit IT oder Webdesign zutun hatte. CSS ist sehr mächtig und ein quasi ungeschlagener Standard für Webseiten. Was sind eurer Meinung nach unschlagbare Tools und Plugins ohne die euer Leben keinen Sinn mehr macht? 🙂 Eigentlich ist CSS sehr intuitiv verständlich, die Anfangshürde sehe ich eher im Verstehen der Zusammenhänge und für Nicht-Coder in dem „Ich will aber nichts kaputt machen“-Gefühl. Aber hey: solange ihr euch in den debug tools ausprobiert, könnt ihr nichts kaputt machen. Mit einmal F5 drücken wird der Ist-Zustand wieder geladen. Keine Angst.

Netzgeflüster ist eine Kategorie meines Blogs in der ich mich immer zwischen dem 10. und 15. eines jedes Monats Themen rund um IT, Forschung, Netzwelt, Internet und eben auch Gerüchten widme. 🙂