von Kirsten

Gutenberg: Breite des Editors anpassen

Seit einiger Zeit arbeite ich – unter anderem hier im Blog – mit dem neuen Gutenberg-Editor. 

Wenn man nicht nur Texte schreibt, sondern auch die Layout-Features von Gutenberg einsetzt (Spalten, Titelbild und so weiter) dann stört einen ziemlich schnell die schmale Standard-Breite von Gutenberg im Backend.

Mit ein bisschen CSS kann man dem Layout im Backend dieselbe Breite geben wie im Frontend.
Angenommen, die Breite des Layouts im Frontend beträgt 1200px, dann sieht das CSS für Gutenberg so aus:

.edit-post-visual-editor .editor-block-list__block {
margin: 0 auto;
max-width: 1200px;
}

Damit diese Anweisungen greifen, müssen wir das CSS in einer Datei im Theme-Verzeichnis abspeichern (z. B. gutenberg.css). 
Abschließend müssen wir die Datei noch per Funktion einbinden: 

function ks_gutenberg_styles() {
wp_enqueue_style( 'gutenberg-css', get_theme_file_uri( '/gutenberg.css' ), false );
}
add_action( 'enqueue_block_editor_assets', 'ks_gutenberg_styles' );

Ich verwende zum Einbetten solcher Funktionsschnipsel sehr gerne das Plugin Code Snippets. Damit kann man die functions.php schön sauber halten und man behält besser den Überblick.

Tipp

Wer es genauer wissen will, was man mit CSS und Gutenberg im Backend alles machen kann, Florian Brinkmann hat einen sehr ausführlichen Artikel zum Thema geschrieben: Theme-Editor-Styles für Gutenberg erstellen

von Kirsten

Gutenberg kommt – was mach ich jetzt?

Noch ist nicht klar, wann WordPress 5.0 mit Gutenberg kommt und es gibt viele ungeklärte Fragen. Die Unsicherheit unter den Anwendern ist entsprechend groß.

Mit der Version 5.0 wird es einen neuen Editor namens Gutenberg geben. Noch ist nicht ganz klar, wann die neue Version kommt, aber sie ist quasi schon unterwegs.

Wer Websites mit WordPress betreut, fragt sich jetzt, was der neue Editor für WordPress-Projekte und WordPress als CMS bedeutet. Was wird sich ändern? Worauf muss ich achten? Welche Entscheidungen muss ich jetzt treffen?

Noch gibt es nicht auf alle Fragen eine Antwort. Aber ich denke, man kann die Richtung erkennen, in die es weitergehen wird. Und eine kleine Checkliste für den großen Tag gibt es auch.

Was ist dieser Gutenberg nochmal?

Ellen Bauer von Elmastudio hat es sehr schön erklärt:

Das große Stichwort bei Gutenberg sind die sogenannten „Blocks“. Momentan gibt es viele unterschiedliche Elemente, die wir im WordPress-Adminbereich handhaben müssen. Es gibt Beiträge und Seiten, Widgets und Widgetbereiche, Menüs, Anpassungsoptionen im Customizer und meist noch etliches mehr. Letztendlich sollen mit Gutenberg alle diese unterschiedlichen Elemente vereinheitlicht werden und zu Blocks werden. Blocks kann man sich ähnlich wie Legosteine vorstellen, also Bausteine, mit denen man seine Webseite flexibel aufbauen kann.

Ellen Bauer, Was Du über den WordPress Gutenberg-Editor wissen solltest

Was wir wissen

  • Gutenberg kommt 2018, wohl spätestens im Sommer
  • Gutenberg kann viele Dinge, zu denen man heute noch einen PageBuilder braucht
  • Gutenberg kann aber bis auf Weiteres (noch) keinen PageBuilder ersetzen
  • Man muss Gutenberg nicht nutzen. Man kann Gutenberg deaktivieren und durch den klassischen Editor ersetzen (Plugin Classic Editor)
  • Das Update auf 5.0 passiert nicht automatisch, man muss es per Hand installieren (auf den Install-Button klicken)
  • Wer sich unsicher ist, kann mit dem Update auf 5.0 warten. Alle 4.x Versionen bekommen weiter Sicherheitsupdates.

Was wir nicht wissen

Wir wissen nicht genau, wie sich die WordPress-Landschaft durch Gutenberg verändern wird.

Ich vermute, dass nicht alle Plugins und Themes den Übergang zu Gutenberg mitmachen werden. Das hat ganz praktische Gründe: Der Code muss umgeschrieben werden und dazu braucht man entsprechende Ressourcen.
Wahrscheinlich werden davon eher die Kleinen betroffen sein. Anbieter, die hohe Verkaufs- und Downloadzahlen haben, sollten über genügend Mittel verfügen, um Code und Konzept anzupassen.

Dieser Effekt ist übrigens nicht neu. Das Web macht immer wieder tiefgreifende Veränderungsprozesse durch. Vor fünf Jahren gab es z.B. kaum Themes im Responsive Design. Heute ist das Standard.

UPDATE

Ich hab mal kurz recherchiert, was die Entwickler der Theme-Bestseller (Stand 3. März 2018) auf themeforest.net zu Gutenberg sagen.
Die Macher von Avada haben in ihrem Blog einen Artikel dazu geschrieben. Sie beschreiben darin im Wesentlichen die technischen Schwierigkeiten, signalisieren aber, dass sie sich darum kümmern wollen, dass Gutenberg und Avada sich vertragen. Es gibt also Pläne, ein konkretes Theme-Update ist aber noch nicht in Sicht.

Der Entwickler vom Enfold Theme hat sich in einem Support Thread zum Thema Gutenberg geäußert. Bottom line hier: In einer Übergangsphase werden die Nutzer wählen können, ob sie den eingebauten PageBuilder weiter nutzen möchten oder nicht. Wie das genau aussehen wird, muss man abwarten.

Auf der Website des dritten Beststellers, Theme X von Themeco, habe ich keine Informationen gefunden.

Weiterlesen Gutenberg kommt – was mach ich jetzt?

von Kirsten

WordPress Premium-Theme anpassen – lohnt sich das?

Premium-Themes sind unter Freelancern und kleinen Agenturen sehr beliebt. Es gibt jedoch Projekte, für die solche Themes weniger gut geeignet sind.

Premium-Themes wie Divi, Avada, Enfold & Co. kommen mit einem ganzen Bündel an fest eingebauten Funktionen. Jeder kann sich damit schnell und ohne Programmierkenntnisse eine schicke Website bauen. Und das zum höchst attraktiven Preis – ab 50$ ist man dabei.

Unter Freelancern und kleinen Agenturen sind diese Themes sehr beliebt. Es gibt allerdings Projekte, für die solche Themes weniger gut geeignet sind.
Mit einem Allzweck-Theme stößt man immer dann an Grenzen, wenn etwas anders sein soll, als es der Theme-Autor eingeplant hat.

Änderungen sind nicht vorgesehen

Verhält sich der Slider nicht so wie gewünscht? Ist das Akkordeon mobil nicht gut bedienbar? Kann der PageBuilder etwas nicht umsetzen?

Funktionen wie Slider, Akkordeons und PageBuilder werden normalerweise per Plugin in die Site geholt. WordPress trennt Aussehen und Funktionalität voneinander: Das Theme ist für das Aussehen zuständig, für die Funktionen sucht man sich Plugins aus dem Plugin-Verzeichnis. Die Idee dahinter ist, dass man das Design (= Theme) wechseln kann, ohne dass dabei Funktionen (= Plugins) verloren gehen.
Umgekehrt wird auch ein Schuh draus: Wenn Slider-Plugin A den gewünschten Überblend-Effekt nicht anbietet, wird es eben gegen Slider-Plugin B ausgetauscht.

Alles in einem Paket

AllInOne-Themes halten sich nicht an dieses Prinzip. Sie packen Design und Funktionen zu einem fest verschnürten Paket zusammen. Das macht das Umsetzen von Änderungen ziemlich knifflig. Denn ein Plugin kann man austauschen, eine ins Theme eingebundene Funktion nicht so ohne Weiteres.
Weiterlesen WordPress Premium-Theme anpassen – lohnt sich das?

von Kirsten

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

Beitragsbilder sind ein wichtiges Kriterium bei der Theme-Auswahl. Bevor Du Dich für ein Theme entscheidest, solltest Du genau prüfen, ob die Beitragsbild-Systematik gut zu Deinen Inhalten passt.

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

von Kirsten

Beitragsbilder verstehen und richtig einsetzen – 4. Tipps & Tricks

Beitragsbilder sind ein wichtiges Kriterium bei der Theme-Auswahl. Bevor Du Dich für ein Theme entscheidest, solltest Du genau prüfen, ob die Beitragsbild-Systematik gut zu Deinen Inhalten passt.

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

von Kirsten

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

Beitragsbilder sind ein wichtiges Kriterium bei der Theme-Auswahl. Bevor Du Dich für ein Theme entscheidest, solltest Du genau prüfen, ob die Beitragsbild-Systematik gut zu Deinen Inhalten passt.

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

von Kirsten

Beitragsbilder verstehen und richtig einsetzen – 2. Beitragbilder anpassen

Beitragsbilder sind ein wichtiges Kriterium bei der Theme-Auswahl. Bevor Du Dich für ein Theme entscheidest, solltest Du genau prüfen, ob die Beitragsbild-Systematik gut zu Deinen Inhalten passt.

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

von Kirsten

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

Beitragsbilder sind ein wichtiges Kriterium bei der Theme-Auswahl. Bevor Du Dich für ein Theme entscheidest, solltest Du genau prüfen, ob die Beitragsbild-Systematik zu Deinen Inhalten passt.

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

von Kirsten

Gutenberg und der Faktor Zeit

Gutenberg bewegt sich stetig vorwärts. Jede neue Version bringt neue Features. Aber mir fehlt etwas bei Gutenberg. Mir fehlt ein Plan.

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