von Elisabeth

Checkliste Server für WordPress-Installation

Welche Angaben braucht der Kunde von uns als WordPress-Dienstleister, damit er den passenden Server für eine WordPress-Installation bereitstellen kann?

Für eine WordPress-Installation muss ein Server bestimmte Voraussetzungen mitbringen. Eigentlich ist das eine sehr übersichtliche Liste. Bei Kunden-Projekten ist es aber häufig nicht einfach, alle Angaben zusammen zu bekommen.

Das hat damit zu tun, dass im Hintergrund interne Abstimmungsprozesse ablaufen. Häufig sind Personen aus verschiedenen Bereichen beteiligt. Die Chefin entscheidet über die URL, der IT-Verantwortliche muss die Sicherheits-Vorgaben einhalten und den Hoster beauftragen und der Hoster ist am Ende der, der die Angaben ausführen muss.

Die Zeit dafür muss man einrechnen. Wir fragen deshalb immer gleich zu Anfang des Projekts nach den Server-Daten.

Checkliste WordPress-Server

Es ist daher hilfreich, wenn man eine Liste zur Hand hat, die man allen Beteiligten zuschicken kann. Ich habe die Angaben auf wordpress.org ergänzt und eine Checkliste zusammengestellt, die alle Angaben beinhaltet, die wir zur Installation brauchen. Damit auch auf verschlungenen Abstimmungswegen nichts verloren geht.
Weiterlesen Checkliste Server für WordPress-Installation

von Kirsten

Browsercache für die style.css deaktivieren

Was tun, wenn die Änderungen in der CSS-Datei einfach nicht angezeigt werden? Ganz einfach: Den Browsercache automatisch löschen.

Es gibt ein Sache, die mich bei Änderungen in der style.css regelmäßig zum Wahnsinn treibt. Egal, wie oft ich auf Reload klicke, der Browser zeigt meine Änderungen im CSS nicht an.

Das hat den Grund, dass die style.css im Browser-Cache gespeichert ist. Eigentlich eine gute Sache, denn so muss die Datei nicht bei jedem Aufruf neu geladen werden. Aber für’s Arbeiten ist das lästig.

Den Browsercache deaktivieren

Wer viel mit den Developer Tools arbeitet, kann in den Einstellungen das Caching deaktivieren. Das kleine Häkchen schaltet den Cache aus so lange die Console offen ist.

Ich kann den Browsercache auch umgehen, indem ich ein Inkognito-Fenster öffne oder einen harten Refresh mache.
Aber da ist ja auch noch die Kundin vor ihrem Rechner. Es ist sehr unpraktisch, wenn ich ihr jedesmal erklären muss, dass sie zuerst ihren Browsercache löschen muss bevor sie etwas zu sehen kriegt.

Das muss anders gehen.
Weiterlesen Browsercache für die style.css deaktivieren

von Elisabeth

Vorschaubild: Ausschnitt selbst erzeugen

Wer kennt es nicht: Manchmal hat man Bilder, die asymmetrisch aufgebaut sind. Die von WordPress erzeugten Vorschaubilder sehen dann etwas merkwürdig aus, weil wichtige Teile vom Bild abgeschnitten werden.

WordPress bringt aber eine Möglichkeit mit, selbst einen Ausschnitt festzulegen, der als Vorschaubild benutzt wird. Das geht mit Bordmitteln, ein zusätzliches Plugin brauche ich dafür nicht.

Ich habe mir folgendes Foto für mein Beispiel ausgesucht. (Und ja, das Vorschaubild würde von alleine sogar noch einen akzeptablen Ausschnitt zeigen. Aber ich mag das Bild so gern. ;-)

Kurzhaarcollie sitzt auf einem Waldweg

Lizzy, Kurzhaarcollie, im Schwarzwald


Weiterlesen Vorschaubild: Ausschnitt selbst erzeugen

von Elisabeth

Die Netzialisten auf der EuroBike

Bild: Eurobike | Bergamont

Vom 30. August bis 2. September findet in Friedrichshafen die EuroBike statt und wir sind dabei! Wir sind zwar kein Blog übers Radfahren, aber wir sind ein Blog über WordPress. Die Messe Friedrichshafen hat uns eingeladen, einen Workshop zum Thema WordPress für Bloggerinnen und Blogger anzubieten.

Wir haben uns schon ein wenig unter Bloggern umgehört, welche Themen besonders interessant wären. Gerne nehmen wir noch weitere Anregungen mit und freuen uns auf einen regen Austausch mit Euch. Gibt es was, von dem Ihr sagen würdet „Wenn ich das am Anfang gewusst hätte…“?

Der Workshop-Termin findet am Donnerstag, 31.08., nachmittags statt.
Wenn Ihr als Blogger bei der EuroBike akkreditiert seid, solltet Ihr dazu Informationen bekommen haben. Wenn nicht, fragt einfach mal nach.

Wir werden am Donnerstagnachmittag und am Freitag auf der EuroBike sein. Sprecht uns gerne an oder schickt uns eine Nachricht über Twitter (an Kirsten oder Elisabeth).

Das PDF mit den Informationen, die wir zusammengetragen haben, könnt Ihr hier herunterladen.

Logo der EuroBike in Friedrichshafen

von Kirsten

Unscharfe Beitragsbilder nachschärfen

Die verkleinerten WordPress Beitragsbilder werden leider durch das Verkleinern unscharf. Mit etwas PHP-Magie kann man das beheben.

WordPress erzeugt zu jedem Bild, das man hochlädt, eine kleine Serie von verkleinerten Versionen. Das ist sehr praktisch, weil man dadurch jedes Bild in verschiedenen Größen zur Hand hat. Das spart Ladezeit.

Nun war mir in letzter Zeit aufgefallen, dass die heruntergerechneten Bild-Varianten im Vergleich zum Originalbild unscharf aussehen. Ich hatte zuerst den Verdacht, dass der Unschärfe-Effekt durch eine Skalierung im Browser (CSS) entsteht.

Aber bei den Projekten, bei denen mir die Unschärfe aufgefallen war, war keine Verkleinerung per Browser im Spiel. Das verkleinerte Bild war einfach ein Stück unschärfer als das Originalbild (das selbstverständlich ordentlich scharf war).

Im Nachhinein wundere ich mich, dass mir das nicht schon früher aufgefallen ist. Denn der Unschärfe-Effekt ist ein bekanntes Phänomen, das jeder kennt, der schon Mal mit einem Bildbearbeitungs-Programm wie Photoshop gearbeitet hat. Verkleinert man ein Bild, verliert es an Schärfe. In der Bildbearbeitung gehört das Nachschärfen daher zur Routine.

Beitragsbilder schärfer machen

Man könnte jetzt alle Bilder der Reihe nach mit Photoshop öffnen und mit dem „Unscharf Maskieren“-Filter behandeln. Das ist aber nicht so richtig praktisch und nachhaltig ist es auch nicht.

Bei den WordPress Plugins gibt es ein paar, die sich des Themas annehmen. Leider konnte ich keines davon zum Laufen bringen. Die einfacheren wollten nicht funktionierten (sind durchweg schon etwas älter) und die ImageMagick-Maschinerie war mir einen Tick zu wuchtig.

Ich habe dann noch – mehr der Vollständigkeit halber – ausprobiert, ob es etwas hilft, wenn ich die JPG-Kompressionsrate auf 100% setze. Aber das hat nichts bewirkt, die Unschärfe bleibt.

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Weiterlesen Unscharfe Beitragsbilder nachschärfen

von Kirsten

Ist WordPress sicher?

Viele WordPress-Nutzer haben Angst um die Sicherheit ihrer Seite. Über das Thema wird viel geredet und geschrieben – leider auch eine ganze Menge Unsinn.

„Nimm bloß nicht WordPress! Mein Kumpel arbeitet in der IT und der sagt, WordPress ist wahnsinnig unsicher!“

Stimmt das? Nein, das stimmt so nicht. WordPress ist eine Software und um Software muss man sich kümmern. Indem man regelmäßig Updates macht und indem man sichere Passwörter verwendet. Das war’s aber auch schon. Der Kumpel liegt also falsch, WordPress ist ein sicheres System.

Webseiten, die keine Pflege brauchen, gibt es schon auch. Das sind statische HTML-Seiten bei denen keine Scriptsprachen am Werk sind. Folglich kann dort auch niemand Unfug treiben.

Wer lieber ein komfortables CMS haben möchte, der muss sich kümmern. So wie das Betriebssystem auf dem Laptop bekommt auch WordPress regelmäßig Updates. Jedes Update bringt neue, praktische Funktionen und nebenbei werden Sicherheitslücken geschlossen.
Ein Redaktionssystem ist also nichts, dass man einmal installiert und dann vergessen kann. Das System ist ein Stück Software und das braucht Aufmerksamkeit.

2 Regeln für die Sicherheit

Dabei ist es denkbar einfach, WordPress sicher zu machen. Wer die beiden wichtigsten Faustregeln beachtet, ist weitgehend raus aus der Schusslinie.

  1. Sichere Passwörter = lange Passwörter, am besten ganze Sätze (12 Stellen und mehr)
  2. Updates, Updates, Updates

Sicherheit ist immer relativ

In einem kleinen Dorf wo jeder jeden kennt, schließt niemand seine Haustür ab, wenn er aus dem Haus geht. In der Großstadt wäre das wahrscheinlich ein Fehler, denn hier leben viel mehr Menschen und darunter sind auch solche mit unlauteren Absichten, die sich in der Masse verstecken.

Bei WordPress ist das ganz ähnlich. Weil WordPress sehr weit verbreitet ist und es viele WordPress-Installationen gibt, sind diese Installationen ein lohnendes Ziel. Einfach weil es so viele davon gibt. Die Chance ist groß, dass sich in der großen Masse ungepflegte Systeme finden, die einmal installiert und dann vergessen wurden. Die mit einfachen wirkungslosen Passwörtern abgesichert sind und bei denen niemand jemals ein Update gemacht hat.

Die Ziele der Hacker

Weiterlesen Ist WordPress sicher?

von Kirsten

Local von Flywheel und MAMP 4.x im Schnell-Vergleich

Local von Flywheel ist ein cooles Ding – man kann damit innerhalb von Sekunden eine WordPress-Seite aufsetzen. Wären da nicht ein paar Macken.

Diesen Artikel habe in ursprünglich im Oktober 2016 geschrieben. Inzwischen ist viel passiert, so dass ich die Informationen noch einmal aktualisiert habe.

Local von Flywheel hat in der Zwischenzeit mehrere Updates bekommen. Leider haben die Entwickler beim letzten Update den Volumes Manager vergessen. („Sorry for the inconvenience! We underestimated the amount of people using this add-on.“ Tja, so verspielt man Vertrauen.)

Mit dem Volumes Manager konnte man Themes und Plugins in je einem Verzeichnis für alle Hosts zentral verwalten. Alle Installationen greifen dann auf dieselben Themes und Plugins zu, es gibt keine Doubletten und unklaren Versionszustände.
Flywheel hat zwar auf Github einen Fix für das Mapping AddOn nachgeliefert, aber der läuft bei mir nicht zuverlässig. Nach vielen Stunden Fehlersuche musste ich einsehen, dass das AddOn einfach nicht sauber arbeitet.

Ich habe ich mich entschieden zurück zu MAMP zu gehen. Local war superschnell und komfortabel. Aber ein Tool, das mich mitten in der Arbeit für Kundenprojekte für viele Stunden ausbremst und dann keine brauchbare Lösungen hat, das kann ich nicht gebrauchen. Dafür sind diese Setups zu wichtig.
Kommt dazu, dass Flywheel’s Hauptgeschäft das Hosting ist und Local ist ein Baustein in ihrem Business. Es ist z.B. nicht möglich, eine externe Seite zu klonen und in Local rüberzukopieren. Ich hab’s jedenfalls nicht geschafft. Für Flywheel-Kunden gehen solche Sachen selbstverständlich ganz einfach.

Das Mapping von Verzeichnissen z.B. für Themes und Plugins, kriegt man bei MAMP Pro übrigens auch hin (Über Symlinks, die man übers Terminar erzeugt hier ein Artikel dazu)

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 Local?
Local tut das Gleiche wie MAMP, es ist eine Serverumgebung für lokale Rechner. Man kann damit WordPress lokal auf seinem Rechner installieren.
Weiterlesen Local von Flywheel und MAMP 4.x im Schnell-Vergleich

von Kirsten

Eine CSS-Datei ausmisten und überflüssigen Code entfernen

Eine CSS-Datei überarbeiten, die in die Jahre gekommen ist, kann mühsam sein. Der erste Schritt ist, herauszufinden, welche CSS-Angaben überhaupt noch aktuell sind.

Wenn ich mir eine CSS-Datei anschaue, die ich vor fünf Jahren geschrieben habe, wird mir anders. Aber das ist ein gutes Zeichen, denn wenn es nicht so wäre, hätte ich in der Zwischenzeit nichts gelernt.
Also tief durchatmen und einmal kräftig entrümpeln.

Es gibt einige Möglichkeiten, über Browser-Extensions oder über die Chrome Developer Tools herauszufinden, welches CSS auf einer Seite gerade nicht verwendet wird. Aber diese Methode taugt nur für einen schnellen, ersten Überblick. Denn anschließend müsste man das überflüssige CSS mühsam per Hand mit der CSS-Datei abgleichen. Kommt dazu, dass man nur das Ergebnisse für die aktuell aufgerufene Seite sieht.

Wir brauchen also ein kluges Script, das in der Lage ist, mehrere Seiten durchzugucken und das ein praxistaugliches Ergebnis in Form einer „bereinigten“ CSS-Datei ausspuckt.

Ausmisten mit Uncss

Ein Script, das das sehr gut macht, ist uncss von Giacomo Martino.

Ich habe mich für die Gulp-Variante entschieden. Geht aber auch via Grunt und npm.
Und so geht’s:

  1. Gulp und uncss installieren (falls nicht schon vorhanden)
  2. Im Theme-Verzeichnis einen Ordner namens uncss anlegen. Dort landet später die bereinigte CSS-Datei, die uncss erzeugt hat. Das Verzeichnis kann auch anders heissen, der Name wird im gulpfile.js angegeben.
  3. Das gulpfile.js erzeugen (Beispiel s.u.) und in das Verzeichnis legen, in dem man arbeiten will. Also z.B. das Verzeichnis, das das WordPress-Theme enthält.
  4. Per Terminal in dieses Verzeichnis navigieren und gulp tippen – und ab geht die Post.
    Das Ergebnis ist eine verschlankte CSS-Datei im Verzeichnis uncss.

Inhalt gulpfile.js

var gulp = require('gulp');
var uncss = require('gulp-uncss');

gulp.task('default', function() {
  return gulp.src([
  //Pfad zur CSS-Datei, die entruempelt werden soll
      '/Users/kirsten/Sites/my-blog/wp-content/themes/my-blog-theme/style.css',
      //hier kann noch ein Pfad hin
    ])
    .pipe(uncss({
     //URLs der Seiten, die das Script durchgucken soll

      html: [
        'http://my-blog.local/',
        'http://my-blog.local/category/tipps-und-tricks/',
        'http://my-blog.local/some-post/headline/',
        'http://http://my-blog.local/category/stories/',
  
      ]
    }))
    .pipe(gulp.dest('uncss/'));
});
von Kirsten

Das Plugin WP-Accessibility

Wie barrierefrei wird eine Seite mit dem Plugin WP Accessibility?

Wer sich mit Barrierefreiheit und WordPress beschäftigt, begegnet früher oder später dem Plugin WP Accessibility von Joe Dolson. Ich habe mir angeschaut, was das Plugin macht und was man damit erreichen kann.

Das Plugin WP Accessibility ist für Seiten gedacht, die ein Theme nutzen, das nicht schon „von Haus aus“ accessibility-ready ist und das ein Stück barrierefreier werden soll.
Je nachdem wo das Theme noch Lücken hat kann man mit dem Plugin folgende Eigenschaften ergänzen:

  • Skip-links einbauen für die Navigation per Tastatur
  • ARIA landmark roles
  • Labels hinzufügen für das WordPress-Such-Formular
  • Target-Attribute aus Links entfernen (Links nicht in einem neuen Fenster öffnen)
  • Änderungen im Tabindex entfernen
  • Links immer unterstrichen darstellen
  • Überflüssige Title-Attribute entfernen
  • CSS für a:focus nachrüsten (wichtig für die Tastatur-Navigation)
  • Lange Beschreibungen für Bilder erlauben
  • Post-Titles für „read more“ Links ergänzen

Das Plugin installiert ausserdem zwei Toolbars, mit denen man die Schriftgröße und die Farb-Kontraste verändern kann. Ich persönlich empfinde das eher als Spielerei – die Toolbars tun nichts auf Code-Ebene, es verändert sich nur kurzfristig die Darstellung.
Weiterlesen Das Plugin WP-Accessibility

von Kirsten und Elisabeth

Accessibility-ready WordPress-Themes

Was steckt drin im Code von einem „accessibility-ready“-WordPress-Theme?

Momentan ist Barrierefreiheit (noch) keine verpflichtende Eigenschaft für Themes, die im offiziellen Theme-Verzeichnis gelistet werden. Aber es gibt im Theme-Verzeichnis das Tag „accessibility-ready“.

Accessibility-ready Themes erfüllen die wichtigsten technischen Anforderung für Barrierefreiheit wie sie die WAI (Web Accessibility Initiative) in den Web Content Accessibility Guidelines (WCAG) aufgestellt hat.

Wenn ein Theme im WordPress.org-Theme-Verzeichnis unter dem Stichwort „accessibility-ready“ erscheint, erfüllt es folgende Bedingungen:

  1. Die Seite ist per Tastatur bedienbar
  2. Für Bedienelemente (Buttons, Links und Inputs) wird korrektes HTML verwendet
  3. Links sind verständlich und eindeutig gestaltet
  4. Formulare sind barrierefrei aufgebaut
  5. Das HTML ist semantisch korrekt
  6. HTML-Code ist mit Aria Landmarks gegliedert
  7. Es müssen werden Farben und gute Kontraste gewählt
  8. Bilder und Medien sind für Seh- und Hörbehinderte zugänglich
HINWEIS
Eine ausführlichere Version dieses Artikels mit Code-Beispielen und Links findet Ihr im KrautPress Paper Nr. 1 WordPress-Themes

In diesem Artikel schauen wir uns die Bedingungen für ein accessibility-ready Themes an und erklären, worum es dabei geht. Alle WordPress-Standard-Themes der Twenty-Reihe sind übrigens accessibility-ready.

1. Bedienbarkeit per Tastatur

  • Alle Links, Buttons und Formularfelder sind über die Tastatur erreichbar, auch Links in Dropdown-Submenüs. Die Enter-Taste aktiviert einen Link oder einen Button, die Leertaste aktiviert Checkboxen und Buttons. Die Pfeiltasten wählen Formular- und Bedienelemente an, z.B. Radio-Buttons, Auswahlfelder, Slider, Reiter oder Menüs mit Baumstruktur. Auch Autocomplete-Vorschläge sind per Pfeiltasten anwählbar.
  • Die style.css enthält die Angaben für a:focus: So können die Besucher erkennen, welches Element sie mit dem Tab gerade angewählt haben.
  • Das CSS für Screenreader-Texte ist so definiert, dass die Texte bei :focus sichtbar werden.
  • Die Tabulator-Reihenfolge wird nicht verändert.
  • Ein Skip-to-Content-Link, der bei :focus sichtbar wird, führt direkt zum zentralen Inhalt.

2. Korrektes HTML für Bedienelemente

  • Die HTML-Elemente button und a sind nicht austauschbar. Ein Button triggert eine JavaScript-Aktion oder ist Teil eines Formulars. Ein Link ist – ein Link und verweist auf eine interne oder externe URL.
  • Soll ein Link wie ein Button aussehen, kommt das Attribut role=”button” ins Spiel. Im HTML steht aber nach wie vor ein a.
  • Damit die Besucher mit Screenreader wissen, welche Funktion ein Element hat, sind manche Bedienelemente mit zusätzlichen Informationen ausgestattet. Das ist gerade bei Buttons wichtig. Auch Links, die eine bestimmte Aktion auslösen – wie z.B. der Edit-Link, die Post-Navigation oder zusätzlichen Menüs – haben ergänzende Screenreader-Texte.

Weiterlesen Accessibility-ready WordPress-Themes