PDF Vorschaubilder von WordPress 4.7 in XAMPP unter Windows verwenden

Mit WordPress 4.7 wurde eine neue sehr nützliche Funktion eingeführt: PDF-Vorschaubilder. Ich wollte heute eigentlich einen Beitrag zu dem Thema schreiben und habe es einfach mal testen wollen. Leider funktioniert es nicht „out of the box“ unter Windows. Für kleine Demos setze ich gerne XAMPP ein und hiermit hatte ich leider keinen Erfolg mit den Vorschaubildern. Also habe ich meinen geplanten Artikel verschieben müssen, um euch erst einmal zu zeigen, wie ihr es unter Windows zum Laufen bekommt.

Notwendige Abhängigkeiten installieren

Wie im Make-Blogartikel bereits beschrieben wird, benötigt die neue Funktion drei Komponenten Imagick, ImageMagick und Ghostscript. Alle drei sind unter Windows nicht installiert. Daher hier kurz zu jedem eine Installationsanleitung.

Weiterlesen →

Performanceanalyse von Plugins

Nachdem ich euch gestern gezeigt habe, welche Tools es für die Analyse von MySQL Datenbankabfragen gibt, möchte ich heute auf den zweiten potentiellen Flaschenhals bei der Performance eingehen: die Ausführungszeit der PHP-Skripte. Hierbei soll es auch darum gehen, Plugins zu identifizieren, die besonders viel Ladezeit verursachen.

Das Plugin „P3 (Plugin Performance Profiler)“

Eine Erhebung solcher Daten ist nicht gerade einfach. Glücklicherweise gibt es genau für diesen Zweck ein sehr gutes Plugin. Den Plugin Performance Profiler oder abgekürzt einfach P3 genannt. Nachdem ihr dieses kostenlose Plugin installiert habt, könnt ihr über „Werkzeuge | P3 Plugin Profiler“ einen neuen Test starten. Ich war mal so mutig und habe es für diese Seite gemacht 🙂

Weiterlesen →

Langsame Datenbankabfragen identifizieren

Gestern hatte ich euch berichtet, welche Fehler man bei der Analyse machen kann. Heute möchte ich euch einen ersten Tipp geben, wie ihr Performanceprobleme mit Datenbankabfragen erkennen könnt.

Ein sehr wichtiger Performancewert ist ja die sogenannte „Time to first byte“, also die Zeit die es dauert, bis der Server nach einer Anfrage die ersten Daten zurückschickt. Ist diese Zeit sehr hoch (etwa mehr als 0,5 Sekunden), dann ist in der Regel eines dieser beiden Dinge schuld (oder beide): die Ausführungszeit der PHP-Skript oder die Dauer der Datenbankabfragen. Um die PHP-Skripte geht es in einem anderen Artikel, also beschäftigen wird und heute mal mit den Datenbankabfragen.

Exkurs: Annahmen zu Datenbankabfragen

Ich möchte auch heute ein wenig auf typische Annahmen eingehen, weshalb eine Seite langsam ist, und diese ein wenig entkräften.

Weiterlesen →

Häufige Fehler bei der Performanceanalyse einer Website

Eine Frage, die eigentlich fast ständig bei Meetups, Facebook-Gruppen oder ähnlichem aufkommt sind Fragen zur Performance einer Seite. Daher möchte ich heute mal einen kleinen Überblick geben, welche Tipps ich in diesem Fall gebe um eine Seite erst einmal

Analysefehler 1: Die falschen Schlüsse ziehen

In den allermeisten Fällen startet das Gespräch damit, dass ein schlechtes Ergebnis bei Google PageSpeed Insights erreicht wurde. Auf einigen Seiten liest man, dass man möglichst 95 Punkte oder mehr erreichen und alle Fehler beheben muss. Ich verrate euch jetzt mal ein schockierendes Geheimnis: das ist Blödsinn 😉

Weiterlesen →

Edit Shortcuts im Customizer

Im Beitrag von gestern hatte ich euch am Ende ja noch kurz einen Hinweis auf die „Edit Shortcuts“ gegeben. Heute möchte ich ein wenig genauer darauf eingehen, worum es sich dabei handelt und wie ihr diese auch für eure Optionen verfügbar machen könnt.

Automatisch verfügbar für neue Features

Die Edit Shortcuts sind fest mit den sogenannten „Selective Refresh Partials“ verbunden. Also mit jenen Elementen des Customizers, die bei einer Änderung der Einstellungen das Ergebnis sofort im Vorschaubereich anzeigen, ohne dabei die gesamte Vorschau neu laden zu müssen.

Aber hier kommt auch schon die schlechte Nachricht. Man kann Edit Shortcuts deshalb nicht einfach zu global für alle Optionen aktivieren. Es muss stattdessen die Customizer Option ebenfalls um einen „Selective Refresh“ erweitert werden.

Weiterlesen →

Neuen Video-Header in TwentyThirteen einsetzen

Zusammen mit WordPress 4.7 wurden die sogenannten Video-Header eingeführt. Damit ist es möglich, anstelle eines Bilder, ein Video als Hintergrundbild zu verwenden. Eingestellt werden diese dann über den Customizer. Ich habe mir das neue Feature mal angesehen. Es gibt ja schon einige Anleitungen mit dem Code-Snippet, das man dazu verwenden muss. Aber ich hatte noch keine Anleitung gesehen, die es mal in ein bestehendes Theme einbaut. Daher möchte ich euch heute zeigen, wie ihr es beispielsweise in TwentyThriteen verwenden könnt.

Der Bild-Header in TwentyThirteen

Ich setze ja selbst kein Theme mit Bild-Header ein. Allerdings verwenden viele Seiten, die ich kenne, das beliebte Default-Theme TwentyThirteen. Hier gehört ein Bild-Header ja fest zum Layout (auch wenn man es im Grunde sogar ausblenden kann).

Das Bild wird hierbei über einen CSS-Hintergrund umgesetzt.Die Größe des Headers wird durch dessen Textinhalt festgelegt und hat mindestens 230px Höhe:

Weiterlesen →

Wiederkehrende Aufgaben mit WP-CRON ausführen

Als ich letztes Wochenende in Philadelphia beim WordCamp US war, hatte ich einige Beiträge für den Adventskalender vorgeschrieben. Da ich meine Artikel immer um 9 Uhr morgen veröffentlichen wollte, dies aber um 3 Uhr nachts Ortszeit gewesen wäre, habe ich die Artikel „geplant“, damit sie pünktlich online gehen. Leider hat das an zwei Tagen nicht funktioniert, was mir erst sehr spät mitgeteilt wurde.

Woran es genau lag, kann ich leider aktuell nicht sagen. Es kam aber die Frage auf, wie die Artikel veröffentlicht werden und wie hierbei der Reihenfolge ist. Das möchte ich heute versuchen rauszufinden und euch berichten.

Automatisierung mit WP-CRON

Die Basis für das zeitgesteuerte Veröffentlichen ist ein sogenannter Cronjob. Dies sind Vorgänge, die in einem bestimmten Intervall ausgeführt werden. Ein solcher Cronjob kann beispielsweise direkt auf einem Webserver. Dies kann ein Nutzer entweder über den Befehl crontab tun, oder aber über eine Administrationsoberfläche seines Hosters.

Weiterlesen →

Einzelne SVG Bilder mit Gulp zusammenfassen

In den letzten beiden Artikeln habe ich ja erzählt, wieso man anstelle von Icon-Fonts besser SVG verwenden sollte und welchen Vorteil hierbei die Verwendung von Symbols hat. Nun werden sich vielleicht einige von euch gefragt haben, wie man eine solche Datei am besten erstellen kann. Oft hat man ja SVG Icons eher als Einzeldateien rumliegen und bei großen Sammlungen wäre der manuelle Aufwand doch recht groß.

Genau dieses Problem hatte ich diese Woche auch bei einem Projekt. Ein Kollege wollte die Icon-Sammlung Entypo verwenden, die allerdings nur in Form einzelner SVG-Dateien vorlag. Ich konnte auch auf die Schnelle keine Variante mit nur einer einzelnen Datei finden. Ich hatte aber schon so eine Idee, die ich das umsetzen könnte 🙂

Automatisierung mit Gulp

Früher hätte ich für diese Aufgabe vermutlich PHP verwendet. Nicht sehr elegant, aber eben eine Sprache, die ich ganz gut beherrsche. Nun ist aber die Arbeit mit XML-Dateien in PHP nicht wirklich schön und außerdem wollte ich mal einen neuen Weg versuchen, der dazu noch möglichst wenig Aufwand bedeutet.

Weiterlesen →

SVG Icons per CSS bearbeiten

In meinem Beitrag von gestern hatte ich euch ja erzählt, die Icons als SVG Dateien in TwentySeventeen eingebunden werden. Ich habe darauf einige Kommentare und Nachrichten erhalten die darauf hindeuten, dass viele von euch noch nicht wirklich mit dieser Methode gearbeitet haben und ich möchte daher noch einige hilfreiche Tipps nachreichen.

Einbindung als CSS-Background

Als erstes ein kleiner Nachtrag zu Einbindung, da diese Frage häufiger vorkam. Einige von euch verwenden Icons als CSS-Hintergrundsbild in einen „before-Pseudoelement“. Hierbei kam die Frage auf, ob man auch dort auf SVG-Dateien setzen könnte, als Ersatz für Icon-Fonts. Die Frage würde ich mit Ja beantworten, allerdings gibt es eine Einschränkung. Es ist nicht möglich, Icons aus einer eingebundenen SVG-Datei zu verwenden, wie ich es euch gestern mit dem <use> Tag gezeigt habe. Es ist aber sehr wohl möglich, Icons aus SVG-Symbolen einer externen Datei einzubinden. Das funktioniert wie folgt:

Weiterlesen →

SVG-Icons statt Icon-Font im neuen Default Theme

Vorgestern hatte ich euch ja einige Neuerungen von WordPress 4.7 vorgestellt. Eine weitere Neuerung betrifft ein Detail des neuen Default Theme TwentySeventeen. Bisher wurden für Icons immer sogenannte Icons-Fonts verwendet. Also Schriftarten, die nur Icons enthalten.

Nachteile von Icon Fonts

In meinen Folien zum Vortrag beim WordCamp Nürnberg 2016 hatte ich euch ja schon berichtet, weshalb Icons-Fonts gegenüber SVG Dateien viele Nachteile haben. Hier noch einmal die Übersicht:

Weiterlesen →