Beitragsbilder verstehen und richtig einsetzen – 5. Nützliche Plugins

Zum Abschluss dieser kleinen Artikelserie über Beitragsbilder habe ich eine kleine Auswahl von nützlichen Plugins zusammengestellt, die die Arbeit mit Beitragsbildern leichter machen.

Add Featured Image to RSS Feed

Leider werden Beitragsbilder nicht automatisch mit übergeben, wenn der RSS-Feed der Seite erzeugt wird. Das ist ein bisschen lästig, denn dadurch verliert die Darstellung des Feeds deutlich an Attraktivität.
Das Plugin Add Featured Images to RSS Feed schließt diese Lücke und sorgt dafür, dass das Beitragsbild zum Artikel auch im RSS-Feed erscheint. Das Plugin wählt dafür die größe Bildformat (large).

Im WordPress-Plugin-Verzeichnis erscheint übrigens eine Warnung, dass das Plugin schon seit zwei Jahren nicht aktualisiert wurde. Normalerweise sollte man an dieser Stelle vorsichtig sein und lieber ein anderes Plugin suchen. Aber die Funktion, die das Plugin abdeckt, ist so einfach, dass sie seit Jahren gleich geblieben ist. Es gibt also schlichtweg keinen Anlass, das Plugin zu überarbeiten.
Weiterlesen Beitragsbilder verstehen und richtig einsetzen – 5. Nützliche Plugins

Beitragsbilder verstehen und richtig einsetzen – 4. Tipps & Tricks

WordPress kommt mit einem Satz von Standrad-Einstellungen für die Größen von Beitragsbildern. Das kleinste Bild ist 150×150 Pixel, die mittlere Größe liegt bei 300×300 Pixeln und die großen Bilder bei 1024×1024 Pixeln. Diese Größen kann man selbstverständlich ändern.

In einer frischen WordPress-Installation hat die kleinste Bildgröße ein quadratisches Format. Man kann dieses Seitenverhältnis selbstverständlich nachträglich verändern. Wobei das Quadrat Vorteile hat, weil quadratische Bilder in vielen Layouts leicht zu handhaben sind.
Aber was tun bei Bildern, die asymmetrisch aufgebaut sind? Das quadratische Vorschaubild sieht dann womöglich etwas merkwürdig aus, weil wichtige Teile vom Bild abgeschnitten werden.

WordPress bringt eine Möglichkeit mit, mit der Du selbst den Ausschnitt festlegen kannst, der als Vorschaubild genutzt werden soll. Das geht mit Bordmitteln, ein zusätzliches Plugin braucht man dafür nicht (s. Bild).

Bild-Ausschnitt für quadratische Vorschaubilder bestimmen

1. Wenn Du in der Mediathek „Bild bearbeiten“ anklickst, kommst Du zu einer Maske, die Dir verschiedene Bearbeitungs-Möglichkeiten anbietet. Wir wollen uns hier auf das Zuschneiden der Vorschaubilder konzentrieren.
2. Zunächst legst Du die Seitenverhältnisse fest, die das Vorschaubild haben soll. Beim quadratischen Bild ist das der Wert 1:1.
3. Dann solltest Du sicherstellen, dass Du auch wirklich nur das Vorschaubild bearbeitest.
4. Jetzt kannst Du beim Bild den Ausschnitt auswählen. Am einfachsten geht das bei gedrückter Shift-Taste – dann wird automatisch das richtige Seitenverhältnis für den Ausschnitt festgelegt. Mit der Maus kannst Du den markierten Ausschnitt anschließend noch verschieben.
5. Dann Schritt 4 nicht vergessen: „Ausschneiden“. Dazu auf das kleine Ausschneiden-Symbol klicken.
6. Dass es geklappt hat, sieht man daran, dass nun unter “Vorschaubild-Einstellungen” das neue Vorschaubild angezeigt wird.
Weiterlesen Beitragsbilder verstehen und richtig einsetzen – 4. Tipps & Tricks

Beitragsbilder verstehen und richtig einsetzen – 3. Beitragsbilder als Kriterium für die Auswahl des Themes

Die meisten WordPress-Themes – insbesondere attraktiv gestaltete Premium-Themes – arbeiten intensiv mit Beitragsbildern. Themes im Magazin-Stil oder mit schicken Portfolio-Ansichten setzen ihre Layouts über die Beitragsbild-Funktion um.

Wer mit einem solchen Theme arbeiten möchte, braucht richtig viel und vor allem hochwertiges Bildmaterial. Umgekehrt wird aber auch ein Schuh draus: Wer wenig Bildmaterial hat, wird mit einem Magazin-Theme wahrscheinlich nicht glücklich. Das Layout funktioniert zwar nach wie vor, aber ohne Beitragsbilder bekommt die Seite ein vollkommen anderes Gesicht.

Viele Layouts funktionieren ohne Beitragsbilder nicht mehr gut

Wenn es also darum geht, sich auf ein Theme festzulegen, muss eine der ersten Fragen lauten:

Welche Art von Bildern habe ich?

Relativ selten kommt es vor, dass man auf eine umfangreiche Bibliothek aus Profi-Fotos zurückgreifen kann, die eigens für das Projekt produziert wurden.
Sehr viel häufiger muss man sich mit Stockfotos behelfen. Das kann schnell ins Geld gehen, wenn man sehr viele davon braucht. Abgesehen davon, dass solche Bilder selten 100%ig zum Inhalt passen und immer ein bisschen künstlich wirken.
In der Regel muss man mit einer Mischung aus Stockfotos und selbst gemachten Fotos zurechtkommen. Wobei letztere häufig nur von mittlerer Qualität sind – als Beitragsbild eigenen sich diese Bilder daher nicht immer.
Weiterlesen Beitragsbilder verstehen und richtig einsetzen – 3. Beitragsbilder als Kriterium für die Auswahl des Themes

Beitragsbilder verstehen und richtig einsetzen – 2. Beitragbilder anpassen

Die Maße für die Bildgrößen stellt man im Dashboard unter Einstellungen/Mediathek ein. Diese Bildgrößen beziehen sich auf alle Bilder, die zu WordPress hochgeladen werden. Auch auf die Beitragsbilder.

Unter Umständen kann es aber sein, dass sich die Darstellung der Bilder im Layout gar nicht verändert, nachdem Du unter Einstellungen/Mediathek die Bildformate bearbeitet hast.
Die Ursache dafür ist im Theme-Code zu suchen. Themes, die komplexe Layouts mit Beitragsbildern bauen, arbeiten in der Regel nicht mit diesen Standardgrößen. Die Themes bringen eigene, zusätzliche Bildgrößen mit, die in der functions.php des Themes festgelegt sind.
Größen-Varianten über die functions.php hinzufügen
Zusätzliche Bildformate für Beitragsbilder werden in der functions.php mit der Funktion add_image_size() hinzugefügt.

 // additional image sizes
 add_image_size( 'category-thumb', 300, 200 ); //300 Pixel breit, 200px hoch
 }

Quelle: Codex
Die Bildformate, die über add_image_size() festgelegt werden, beziehen sich nur auf die Beitragsbilder. Das heißt, wenn Du einen Artikel schreibst und über den Button “Dateien hinzufügen” im Editor ein Bild platzierst, werden weiterhin nur die drei Standard-Größen angeboten, die Du unter Einstellungen/Mediathek angegeben hast. Von den zusätzlichen Bildformaten in der functions.php merkst Du hier nichts. Diese Größen finden ausschließlich in den Theme-Templates Verwendung.
Weiterlesen Beitragsbilder verstehen und richtig einsetzen – 2. Beitragbilder anpassen

Beitragsbilder verstehen und richtig einsetzen – 1. Was ist ein Beitragsbild

Für viele WordPress-Einsteiger ist das Prinzip der Beitragsbilder (englisch Featured Images oder Post Thumbnail) etwas schwer verständlich. Das Konzept ist tatsächlich ein bisschen abstrakt.
In dieser kleinen Artikelserie soll es darum gehen, wie Beitragsbilder in einem WordPress-Theme funktionieren und was man so alles damit machen kann.

Was ist ein Beitragsbild?

Ein Beitragsbild ist ein Bild, das man einem Beitrag (post) oder einer Seite (page) fest zuordnen kann. WordPress weiß dann, dass dieses bestimmte Bild mit dem Text verknüpft ist.
Das Besondere dabei: Das Bild wird nicht wie gewohnt in den Text eingebaut und dort deutlich sichtbar angezeigt. Sondern es wird quasi im Hintergrund gespeichert – man sieht es zunächst nur, wenn man weiß, wo man hingucken muss.

Ist ein Beitragsbild ausgewählt, sitzt es als kleines Thumbnail-Bild in einer Box rechts neben dem Texteditor.

Ein Beitragsbild festlegen

Um ein Bild mit einem Beitrag zu verknüpfen, klickt man in der Metabox “Beitragsbild” rechts unten neben dem Editor auf den Link “Beitragsbild festlegen” (s. Screenshot).
Weiterlesen Beitragsbilder verstehen und richtig einsetzen – 1. Was ist ein Beitragsbild

Gutenberg und der Faktor Zeit

Seit einiger Zeit verfolge ich sehr aufmerksam die Entwicklung von Gutenberg. Mir ist klar geworden, dass sich WordPress mit Gutenberg tiefgreifend verändern wird. Das ist eine gute Sache. Aber wo sich Vieles ändert, entsteht auch viel Bewegung.

Gutenberg ist ein anspruchsvolles Projekt und solche Projekte dauern ihre Zeit. Momentan sind wir vielleicht auf halbem Weg angekommen. Ich rechne damit, dass es etwa noch ein Jahr dauern wird, bevor wir etwas haben, das auf einer Live-Seite eingesetzt werden kann.

Ich weiß, es steht der Termin April 2018 im Raum. Den Termin hat Matt Mullenweg in seinem Vortrag „State of The Word“ beim WordCamp US 2017 genannt. Zu diesem Zeitpunkt soll WordPress 5.0 erscheinen und zwar mit Gutenberg als fest integriertem Bestandteil.

Ich halte diesen Termin erstens für unrealistisch und zweitens für unsinnig. Denn nicht nur die Entwicklung von Gutenberg braucht Zeit, auch der Übergang vom alten in einen neuen Zustand.

Der ungeliebte Übergang

Vor vielen, vielen Jahren, als ich frisch gebackene Kommunikations-Designerin war, bekam ich den Auftrag, eine Tageszeitung grafisch zu überarbeiten. Die Zeitung erhielt eine moderne Typografie und ein klareres Layout. Das Ergebnis war richtig gut. Die Redakteure hatten weniger Arbeit, die Abstimmungsprozesse waren schlanker geworden und die Leser bekamen besser lesbare Texte und ein übersichtliches Layout.
Aber alle haben es gehasst. Die Redakteure schimpften über die neuen Strukturen und die Leser fanden ihre Lieblingskolumne nicht wieder.
Weiterlesen Gutenberg und der Faktor Zeit

Morten Rand-Hendriksen: Gutenberg and the WordPress of Tomorrow

Wer sich für Gutenberg interessiert, sollte sich diesen Vortrag vom WordCamp US 2017 von Morten Rand-Hendriksen unbedingt anschauen.

Was wir momentan sehen, ist nur ein sehr kleiner Ausschnitt dessen, was Gutenberg tatsächlich bedeutet. Morten zeichnet das große Bild und erklärt sehr anschaulich, wo es hingehen soll.

Blocks. WYSIWYG. Alles wird anders.
Sehr spannend!

Der nicht ganz so ultimative Page-Builder Vergleich

Vor Kurzem habe ich zum ersten Mal einen Page-Builder für ein Kundenprojekt eingesetzt. Die Anforderungen waren relativ speziell: Innerhalb einer Multisite sollten Redakteure selbst Sites erstellen können, die jeweils aus einer Art Landingpage bestanden. Die Layouts dafür sollten variabel und weitgehend frei gestaltbar sein. 

Das ist ein ungewöhnlich langer Artikel geworden. Wer nicht alles lesen möchte, hier sind ein paar Anchorlinks zum schnelleren Durchlesen:

– Was ich mir angeschaut habe
– Das Testlayout
– Frontend-Editing, Responsiveness und WordPress-Integration
– Die Page-Builder in der Einzelbetrachtung
– WordPress und Page-Builder

Ich hatte mir zu Beginn des Projekts vier Page-Builder ausgesucht und verschiedene Szenarien durchgespielt. Ich wollte sehen, was die Redakteure machen können und ob vielleicht wichtige Funktionen fehlen.
Dabei war mir wichtig, dass auch wenig erfahrene Nutzer gut zurechtkommen und ein „Knöpfchen“ für jede Funktion vorfinden, die für die Umsetzung meines konkreten Projekts wichtig war.
Ein Beispiel: Hintergrundbilder, auf denen ein Text platziert wird, müssen immer ein bisschen abgetönt werden, damit der Text auch lesbar ist. Wer sich mit HTML und CSS zu helfen weiß oder mal eben schnell Photoshop anschmeißen kann, kriegt das natürlich hin. Aber Redakteure ohne Vorkenntnisse nicht.

Die Kandidaten

Für diesen Artikel habe ich noch zwei weitere Plugins mit aufgenommen:

  1. Tailor, das einzige mir bekannte OpenSource-Projekt unter den Page-Buildern.
  2. Visual Composer, the elephant in the room

Von allen Plugins habe ich jeweils die kostenlose Version installiert.

Zum Vergleich treten an:

Das hier ist kein systematischer Test, eher eine Stichprobe. Mein Ziel war, ein Gefühl dafür bekommen, wie es sich mit dem jeweiligen Page-Builder arbeitet.

Wer einen gründlichen und umfassenden Vergleich lesen möchte, dem empfehle ich den Artikel von Pippin Williamson (en)

Weiterlesen Der nicht ganz so ultimative Page-Builder Vergleich

MAMP: WordPress-Themes und Plugins über Symlinks zentral verwalten

Vor ein paar Monaten hatte ich eine Weile mit Local von Flywheel als lokale Entwicklungsumgebung gearbeitet. Inzwischen bin ich wieder zurück zu MAMP gewechselt. Mehr dazu in diesem Artikel.

Eine Eigenschaft von Local, die mir besonders gut gefiel, war der Volumes Manager. Damit konnte man Themes und Plugins für alle Hosts zentral verwalten. Alle lokalen Sites und alle WordPress-Installationen greifen dann auf dieselben Themes und Plugins zu. Das ist zum Entwickeln sehr praktisch, weil es keine Doubletten gibt und keine Verwirrung mit Versionen.

Diese Funktion kann man auch in MAMP nachbilden. Man muss dafür ins Terminal wechseln, aber was man dort tun muss, ist denkbar einfach.

  1. Plugins und Themes an zentraler Stelle ablegen.
    In meinem Fall ist das der Ordner sites
  2. Im Terminal zum Verzeichnis navigieren, in der die lokalen Sites liegen, die mit MAMP verwaltet werden.
    Bei mir ist es das Verzeichnis sites und ich navigiere dort hin mit cd sites
  3. Einen Symlink für das Theme-Verzeichnis setzen
    ln -s ~/Sites/themes ~/Sites/name-des-projekts/wp-content
  4. Einen Symlink für das Plugin-Verzeichnis setzen
    ln -s ~/Sites/plugins ~/Sites/name-des-projekts/wp-content

Im wp-content-Verzeichnis des Projekts erscheint dann jeweils ein Alias des zentralen Theme- bzw. Plugin-Verzeichnisses.

Damit es keine Fehlermeldung gibt, muss man die Verzeichnisse themes und plugins im wp-content-Verzeichnis vor der Aktion umbenennen. Es reicht ein kleiner underscore vor dem Namen, z.B. so: _themes.
Weiterlesen MAMP: WordPress-Themes und Plugins über Symlinks zentral verwalten

Checkliste Server für WordPress-Installation

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