Kategorie: WordPress

von Kirsten

WordPress & Vagrant für visuelle Menschen

Viele WordPress-Profis schwören auf Vagrant als Entwicklungsumgebung. Das sind meist Leute, die viel per Kommandozeile arbeiten. Und dann gibt es noch Menschen wie mich, die sich mit Shell-Befehlen nicht ganz so wohl fühlen.

Letzte Woche habe ich mir angeschaut, wie sich MAMP und Pressmatic im direkten Vergleich so anfühlen. Um das Bild etwas zu erweitern, habe ich mir noch Vagrant angeguckt. 

Beim Zusammenbauen eines Vagrant-WordPress-Workflows haben mir diese beiden Artikel sehr geholfen:

WordPress Development mit VVV (Tuts+)
Setting up a WordPress VVV Workflow (WP Beaches)

In den Artikeln werden alle Schritte zur Installation genau beschrieben.

Optische Oberflächen für VVV und Vagrant

Für mich ist die Arbeit mit dem Terminal deshalb so schwierig, weil ich vor einer „Black Box“ sitze. Erst wenn ich einen passenden Befehl eintippe, spuckt mir das Terminal eine Rückmeldung aus. Weiss ich den Zauberspruch Befehl nicht, sitze ich nur dumm davor und komme nicht weiter.

Spannend fand ich deshalb diese beiden Module:

  1. VVV Dashboard
  2. Vagrant Manager

VVV Dashboard ist eine optische Oberfläche für eine VVV-Installation. Dort kann ich sehen, was sich in meiner Serverumgebung tut und ich kann direkt vom Dashboard aus Aktionen ausführen. Das VVV Dashboard hat mir den Zugang zur Vagrant-Welt sehr erleichtert.
Weiterlesen WordPress & Vagrant für visuelle Menschen

von Kirsten

Pressmatic und MAMP 4.x im Schnell-Vergleich

Pressmatic ist ein cooles Ding – man kann damit innerhalb von Sekunden eine WordPress-Seite aufsetzen.

UPDATE 3. Dezember 2016
Pressmatic wurde von Flywheel aufgekauft und heisst jetzt Local by Flywheel. Die Software ist ab sofort kostenlos und Ihr könnt sie hier herunterladen.

Was ist Pressmatic?
Pressmatic tut das Gleiche wie MAMP, es ist eine Serverumgebung für lokale Rechner. Man kann damit WordPress lokal auf seinem Rechner installieren.

Was macht Pressmatic besser als MAMP?
Pressmatic wirkt auf mich viel moderner als MAMP. Technisch ist der Hauptunterschied der, dass Pressmatic jede Seite in einen separaten VirtualBox-Container packt.
Das Aufsetzen einer neuen Seite geht ausgesprochen flott und ist in wenigen Sekunden erledigt.

Seiten zu klonen und zu duplizieren geht genau so schnell und man kann sich ganze Konfigurationen als Template speichern. Dadurch entfällt der Teil, bei dem man sich zum x-sten Mal durch sämtliche Dashboard-Einstellungen klickt. Das ist schon ziemlich genial.

Pressmatic hat noch mehr schicke Features, zum Beispiel kann man über ein Addon einen Tunnel über ngrok aufbauen, über den man z.B. Kunden auf die lokale Installation gucken lassen kann. Den Tunnel kann man auch dazu nutzen, eine Seite mit mobilen Geräten zu testen.
Ein weiterer Vorteil ist, dass Pressmatic automatisch die neueste WordPress-Version (derzeit 4.6.1) herunterlädt. In MAMP (4.0.4) wird WordPress 4.6. angeboten, es gibt also nur die Major-Release-Versionen. Das ist allerdings ein Riesenfortschritt gegenüber MAMP 3.x, da gab’s eisern nur WordPress 4.0.

Was macht Pressmatic nicht so gut wie MAMP?
Ein kleiner Dämpfer ist für mich der Umgang von Pressmatic mit Multisite.
Dabei fing alles so gut an: Man kann mit einem Klick entscheiden, ob man eine Einzelseite oder eine Multisite-Installation haben möchte. Kein Gehampel mit htaccess und wp-config.php mehr. Bei der Installation kann man sogar zwischen Subdomains und Subfolders wählen.
Weiterlesen Pressmatic und MAMP 4.x im Schnell-Vergleich

von Kirsten

Einen Textauszug per CSS erzeugen

Kann man die Länge von WordPress-Excerpts per CSS steuern? Ja, aber es ist kompliziert.

WordPress-Excerpts werden in einer bestimmten Länge ausgegeben, der Default-Wert sind 55 Wörter.  Möchte man diesen Wert ändern, kann man das über den Filter excerpt_length relativ einfach erreichen.

function custom_excerpt_length( $length ) {
return 20;
}
add_filter( ‘excerpt_length’, ‘custom_excerpt_length’ );

Sie auch https://codex.wordpress.org/Plugin_API/Filter_Reference/excerpt_length

Geht das nicht auch per CSS?

So lange ein Projekt noch in der Entwicklung ist, ändert sich die Form von Auszügen/Excerpts häufig. Auch braucht man oft unterschiedliche Varianten von Auszügen: An einer Stelle ist ein längerer Teaser sinnvoll, an anderer Stelle ist der Platz knapp und ein Satz muss reichen.

Da wäre es eigentlich praktisch, wenn man die Darstellung der Exzerpte per CSS steuern könnte. Zumindest bis zu dem Zeitpunkt, an dem feststeht, welche Exzerpt-Varianten in welchem Kontext gebraucht werden.

1. CSS Eigenschaft ‚text-overflow:ellipsis‘

In CSS3 gibt es die Eigenschaft text-overflow. Damit kann man festlegen, was passieren soll, wenn ein Text länger ist als die Box, die ihn umschließt. Der default Wert ist text-overflow:clip, damit wird der Text einfach abgeschnitten. Trägt man statt dessen text-overflow:ellipsis ein, erscheinen am Ende der abgeschnittenen Zeile drei Pünktchen (Ellipsis).

Tolle Sache, dachte ich. Damit müsste man eigentlich auch die Darstellung von Exzerpten auf einer WordPress-Seite per CSS steuern können. Das ist leider nicht ganz einfach.
Weiterlesen Einen Textauszug per CSS erzeugen

von Kirsten

Performance-Experiment mit gzip und Browser-Caching

Was macht eine Webseite eigentlich langsam? Wo kann man ansetzen, um schnellere Ladezeiten zu erreichen?

Auf dem WordCamp Nürnberg hat Jan Thiel einen tollen Vortrag zum Theme Performance gehalten: WordPress Performance Mythbuster. Den Vortrag könnt Ihr Euch hier auf wordpress.tv anschauen.

Performance ist ein wichtiges Thema, nicht nur seit Google ein Auge drauf hat. Je langsamer eine Seite lädt, desto schlechter ist die User Experience. Jede Millisekunde zählt, bei mobilen Geräten umso mehr.

Spannend fand ich, wie Jan herausgearbeitet hat, wo denn der Flaschenhals bei den Ladezeiten tatsächlich liegt. Vorsicht Spoiler: Weder die Server-CPU noch der PHP-Code vom WordPress-Core sind hier die Bremse, der PHP Code von Themes und Plugins ist es, der aufs Tempo drückt.

Was logischerweise bedeutet, dass noch’n Plugin Eure Seite nicht unbedingt schneller macht. Auch wenn Performance-Optimierung draufsteht. Ausnahmen bestätigen die Regel.

Das Experiment

Ich hab mir mal zwei Sachen vorgenommen, die Jan in seinem Vortrag erwähnt hat, mit denen man der Netzialisten-Seite Beine machen kann. Ich hab dazu das Google Page Speed Tool genutzt, obwohl ich ein etwas gespaltenes Verhältnis dazu habe: Die Angaben dort muss man mit Vorsicht geniessen und immer die Verhältnismäßigkeit im Auge behalten. Beispiel: Man kann schon „Punktabzug“ kriegen, wenn ein einziges 32KB-Bild nicht optimiert ist.

Die beiden Techniken, die ich mir angeschaut habe, sind:

  1. gzip -Komprimierung
  2. Browser-Caching

Weiterlesen Performance-Experiment mit gzip und Browser-Caching

von Kirsten

Google Fonts über den eigenen Server einbinden

Es gibt verschiedene Methoden, um Google Fonts in eine Webseite einzubinden. Die klassische Methode ist, die Schriften über einen Link in der header.php oder – besser – über die functions.php ins Theme einzubinden. Ellen Bauer hat einen ausführlichen Artikel dazu geschrieben: Google Fonts in WordPress Themes

Bei dieser Methode liegen die Schriften auf den Google-Servern und werden über einen Link auf meine Webseite geholt. Wird meine Seite geladen, schickt sie eine Anfrage an den Google Server und der liefert dann die Schriften aus. Davon merkt man in der Regel nicht viel. Aber es bleibt die Tatsache, dass eine Abfrage passiert und das dauert ein paar Millisekunden.

Je nach der Qualität der Datenverbindung kann es auch passieren, dass die Schriften nicht schnell genug ausgeliefert werden. Dann erscheinen alle Texte plötzlich in Arial oder Times.
Auch Firewalls können ein Problem darstellen – in manchen Firmen gelten so strenge Regeln, dass die Mitarbeiter keine Google Fonts zu sehen kriegen.

Google Fonts herunterladen und Webfont erzeugen

Aus diesen Gründen bin ich in letzter Zeit dazu übergegangen, Google Webfonts nicht mehr per Link einzubinden, sondern direkt auf den Sever zu laden, auf dem auch das WordPress-Theme liegt. Ich gehe davon aus, dass das rechtlich kein Problem ist, denn die Google Webfonts haben eine SIL Open Font License, die das Herunterladen erlaubt.
Weiterlesen Google Fonts über den eigenen Server einbinden

von Kirsten

Flexbox jetzt! IE8 und IE9 und die Bremse im Kopf

Flexbox ist schick, aber ganz schön knifflig. Floats und Clearings sind zwar ein bisschen umständlich und nicht so richtig semantisch, aber seit Langem eine feste Bank.

Das Web entwickelt sich im Sauseschritt. Heute ist SVG das Grafik-Format der Wahl und die Flexbox-Methode bringt uns endlich flexible CSS-Raster ohne semantische Verrenkungen. Wenn da nicht die alten Browser wären.

So lange wir Code vorhalten müssen, den auch alte Browser lesen können, haben wir ein Problem. Wir müssten eine Menge Sachen doppelt schreiben, eine Version für moderne Browser und eine für die alten Herrschaften.

Das ist natürlich mühsam. Bevor ich mir die doppelte Arbeit mache, bleibe ich doch lieber bei den altbewährten Methoden. Floats und clearfixes können neue und alte Browser lesen. Wegen dem bisschen Semantik lohnt sich der Aufwand nicht.

Ist das nur eine bequeme Ausrede oder ist da was dran?
Weiterlesen Flexbox jetzt! IE8 und IE9 und die Bremse im Kopf

von Kirsten und Elisabeth

Tipps für eine barrierefreie Webseite

Barrierefreiheit im Web gilt als lästige Pflichtübung. Menschen ohne Behinderung geht das Thema schließlich nichts an. Falsch gedacht.

Wie viele Leute verwenden wohl einen Screenreader um diese Webseite zu betrachten? Der Anteil dürfte im niedrigen einstelligen Prozentbereich liegen. Warum also so viel Aufwand für eine so kleine Benutzergruppe?
Weil es nicht um Screenreader geht. Sondern um Usability.

Wer profitiert von einer barrierefreien Webseite?

  • Menschen mit einer Sehbehinderung, die starke Kontraste auf ihrem Bildschirm brauchen
  • Menschen, die im hellen Sonnenlicht eine Adresse auf ihrem Smartphone lesen wollen
  • Menschen, die per Tastatur statt Maus navigieren, weil sie keine Arme haben
  • Menschen, die per Tastatur statt Maus navigieren, weil sie Rheuma in den Händen haben oder ihr rechter Arm vorübergehend einen Gipsverband hat
  • Menschen, die eine geistige Behinderung haben
  • Menschen mit einem Hochschulabschluss, deren Muttersprache nicht Deutsch ist
  • Menschen, die eine Aufmerksamkeitsstörung haben und sich schlecht konzentrieren können
  • Menschen, die nach einem langen Arbeitstag müde sind und sich schlecht konzentrieren können
  • Alte Menschen, die unsicher sind und leicht die Orientierung auf der Webseite verlieren
  • Junge Menschen, die unsicher sind und leicht die Orientierung auf der Webseite verlieren

Weiterlesen Tipps für eine barrierefreie Webseite

von Kirsten

Sieben Fragen und Antworten für WordPress-Einsteiger

Eine WordPress-Seite ist schnell aufgesetzt (siehe der berühmte Fünf Minuten Install). In Gesprächen mit Kunden stelle ich jedoch fest, dass viele Leute den Einstieg in WordPress ganz schön kompliziert finden.

1. Ich hab‘ gar kein Blog, kann ich trotzdem WordPress benutzen?

Das Argument „WordPress ist nur für Blogs“ ist zwar Unsinn, aber dafür hält es sich eisern. Damit ist wohl gemeint, WordPress sei gar kein „richtiges“ CMS.
Das Gegenteil ist der Fall: Gerade weil WordPress (unter anderem) mit einer Blog-Funktionalität daherkommt, ist es ein sehr modernes Content Management System (CMS).

Mit WordPress kann man alle möglichen Projekte umsetzen. Große, kleine, mittlere, mit Blog und ohne Blog.
In Zeiten der REST-API werden die Möglichkeiten, große Projekte mit WordPress zu realisieren, noch einmal wachsen.

Kurze Antwort: Na klar. Nächste Frage.

Lange Antwort: Man kann auch Webseiten ohne Blog mit WordPress bauen. Dann erstellt man einfach eine Reihe von statischen Seiten. Aber auch große Projekte mit Schnittstellen zu allen möglichen Funktionen sind umsetzbar.
Weiterlesen Sieben Fragen und Antworten für WordPress-Einsteiger

von Kirsten

Meine schwierige Beziehung zu Baukasten-Themes

Themes mit Page-Builder-Erweiterung sind groß in Mode. Damit können auch Laien komplexe Layouts bauen.

„Du machst doch was mit WordPress, kannst Du mir mal schnell mit meinem Theme helfen?“ Wenn ich diese Frage höre, dann weiß ich: Das könnte knifflig werden. Denn nicht bei jedem Theme kann ich mein WordPress-KnowHow anwenden.

Es gibt Themes, die haben nicht mich im Visier, sondern den Endkunden, der selbst etwas zusammenbauen möchte. Diese Baukasten-Themes bieten eine große Vielfalt an Einstellungsmöglichkeiten im Backend und/oder über den Customizer an. Dort kann man dann für jedes Element die Farbe, Abstände, Größen und so weiter festlegen und sich ganze Seiten-Layouts zusammenklicken.

Es kann allerdings passieren, dass das Theme, das zuerst so vielversprechend aussah, nicht so funktioniert wie erwartet. Auch bei 200+ Optionen gibt es immer Dinge, für die der Entwickler keine Einstellungsmöglichkeit vorgesehen hat.
Das ist der Punkt, an dem viele Leute Hilfe suchen.
Weiterlesen Meine schwierige Beziehung zu Baukasten-Themes