Archiv der Kategorie: WordPress

Twenty Twenty One: Nicht nur für Asketen

Als WordPress 5.6 mit dem neuen «Twenty Twenty One» Theme ausgeliefert wurde, waren nicht wenige Anwender etwas enttäuscht, Twenty Twenty One, nennen wir es im Folgenden einfach «TT1» wirkt auf den Betrachter doch etwas spartanisch; zumal das Vorgänger-Theme, Twenty Twenty, bunter und verspielter wirkte! TT1 gibt sich zufrieden mit einem Minimum an Gestaltungselementen; es gibt einen Titel, ein Logo und einen mehrzeiligen Fussbereich für «Widgets»; Widgets sind kleine vordefinierte Elemente wie zum Beispiel ein Kalender, ein kurzer Text oder ein Menu. Charakteristisch für das Theme sind ferner die vordefinierten Pastellfarben. 

Wie so oft trügt aber der erste Eindruck, denn das neue Standardtheme eignet sich sehr gut, um mit dem Blockeditor selbst Layoutelemente wie zum Beispiel Spalten oder gruppierte Bilder zu erstellen. So wird TT1 zu einer Leinwand, bei der der Gestalter die Layoutelemente selber anordnen kann. Ich möchte dies im folgenden kurz mit einem kleinen Beispiel illustrieren; es soll zeigen, wie vielseitig TT1 in Wirklichkeit ist. Hierzu erstelle ich eine Seite zu meiner Wohngemeinde mit ein paar Photos und Texten. Dabei werden einige wichtige Blöcke des WordPress Editors verwendet: Cover, Spalten, Titel und Bild. 

Tipp: WordPress bietet mehr als 50 verschiedene Blocktypen. Wem das nicht genügt, kann weitere hinzufügen. Es gibt zahlreiche, teils freie Blockbibliotheken, wie zum Beispiel Coblocks mit 30 neuen Blocktypen. Beliebt sind ferner Stackable, Kadence oder Atomic. Eine gute Idee ist es aber immer, ohne Blockerweiterungen zu starten und erst dann weitere Block Plugins zu installieren, wenn das gewünschte Ergebnis mit den Standard Blocks trotz aller Müh und Not nicht zu erreichen ist…

Hinweis: Ich gehe im Folgenden davon aus, dass Sie sich bereits mit WordPress und dem Block Editor vertraut gemacht haben. Einen gute Einführung zum Thema finden Sie hier: https://developer.wordpress.org/block-editor/

Weisser Hintergrund – wie auf dem Papier
Das erste, was ich am TT1 Theme ändere, ist die Hintergrundfarbe. Die angebotenen Pastelltöne sind wirklich hübsch, ein weisser Hintergrund bietet jedoch mehr Möglichkeiten. Der Hintergrund für alle Seiten kann sehr einfach im Customizer eingestellt werden. Im Dashboard wird dazu der Menupunkt Design, dann Customizer gewählt. Jetzt muss nur noch in der Rubrik «Farben & Dark Mode» ein weisser Hintergrund eingestellt werden! Damit sind ab sofort alle Seiten und Blogbeiträge auf strahlend weissem Grund. Und da sie jetzt schon einmal im Customizer sind, schauen Sie sich auch die anderen Optionen einen Moment an – es sind wohltuend wenige! Sie können als Hintergrund jede beliebige Farbe wählen. Und die Schriftfarbe? Die können Sie für jeden Block individuell festlegen. Tun sie dies nicht, wählt das Theme automatisch eine passende Farbe mit genügend Kontrast zum Hintergrund.

Ein Photo als Blickfang
Nun kann es mit der ersten Seite losgehen. Erstellen Sie also eine neue Seite (nicht einen Blog Beitrag) und wählen Sie einen sprechenden Titel, in meinem Beispiel heisst er «Blick auf das Dorf». Die grosse, schlanke Schrift des Titels passt sehr gut auf den weissen Grund.  Aber noch ist alles leer! Lassen Sie und dies ändern. Als erstes hätte ich gerne ein sogenanntes Cover auf der Seite, ein Bild also, das mit Text ergänzt werden kann. Also erstelle ich einen neuen Block und wähle «Cover». Schon beim Einfügen will WordPress wissen, welches Bild ich gerne hätte! Cover Blöcke können als Hintergrund ein Bild, eine Farbe oder auch gar nichts enthalten. Da Cover mit einem passenden Photo attraktiv aussehen und die Aufmerksamkeit auf sich ziehen, wähle ich hier ein schönes Foto vom Dorf! Damit es auch zur Geltung kommt, muss bei den Eigenschaften des Covers die Einstellung «Weite Breite» gewählt werden. Schauen Sie sich auch die Cover Eigenschaften an, da gibt es allerlei Einstellungsmöglichkeiten wie zum Beispiel die Minimalhöhe oder die Bildausrichtung. Experimentieren ist erlaubt und erwünscht:

Blick auf das Dorf, Illustration 1
Titel, Cover und einleitender Text der Seite

Soll das Cover auch Text enthalten, genügt es, innerhalb des Block zu klicken, wo bereits «Schreiben Sie einen Titel» steht, nun kann der gewünschte Text eingegeben und formatiert werden.

Es folgt ein simpler Textblock, der eine kurze Einführung zur Seite enthält; um den Text etwas zu schmücken, habe ich die Initiale aktiviert, damit wird der erste Buchstabe des Absatzes deutlich grösser dargestellt. Der nächste Block wird nun aber wieder etwas umfangreicher, es ist ein Spaltenblock mit vier Spalten; jede davon enthält ein Bild und darunter einen kurzen, erläuternden Text mit Titel.  

Spalten machen den Text leserlicher
Spalten? Wie geht das? WordPress Blöcke können verschachtelt werden und bei Spalten tun Sie genau das! Erstellen Sie als erstes einen neuen Spaltenblock und geben Sie die Anzahl Spalten an, in diesem Fall vier! Nun müssen Sie nur noch auf die Plus-Symbole in den Spalten klicken, um diese mit Inhalten zu füllen; das kann fast alles sein: Bild, Text, Tabelle, Cover; einfach alles, was Ihnen gefällt! Im folgenden füge ich in jede Spalte zuerst ein Bild, dann einen Titel und zuletzt einen Text ein:

Blick auf das Dorf, Illustration 2
In Spalten angeordnete Photos

Einschub: Kreisrunde Bilder. Um runde Bilder zu erhalten, kann ich an dieser Stelle zwei Lösungen anbieten. Zuerst die WordPress Lösung: Bei jedem Bild scrollen Sie bei den Block Eigenschaften nach unten, bis sie die Rubrik «Erweiterte Eigenschaften» finden. Tragen Sie dann im Feld „Zusätzliche CSS-Klasse(n)“ folgendes ein: circle-image. Wenn Sie bei allen Bildern diese CSS Eingenschaft erfasst haben, wechseln Sie in den Customizer und geben Sie im Feld «zusätzliches CSS» den folgenden Code-Schnipsel ein: 

.circle-image img {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
}

Ganz wichtig: Die Bilder müssen quadratisch sein, sonst werden Sie als Ellipsen angezeigt! Und wie zweite Lösung? Ganz einfach, installiere das Plugin Coblocks und verwenden den Block Services. 

Die ganze Seite – Anklicken für Vergrösserung

Wir sind mit der Seite schon fast am Ende. Nun fehlt noch der Abschnitt, der das Dorf vorstellt. Auch hier ist der Spaltenblock dienlich, diesmal nimmt er pro Spalte eine Überschrift und einen Text an. Um den Spaltenblock etwas vom übrigen Seiteninhalt abzuheben, habe ich die Hintergrundfarbe verändert  und einen der Pastelltöne des Themes verwendet. Auch den Spaltenblock habe ich auf weite Breite gestreckt!

Was haben wir damit erreicht? Eine nette kleine Seite, die noch nicht viel bietet, die aber ausbaufähig ist. Folgendes könnte noch eingebaut werden: 1. Verlinken der Vorschaubilder mit den Photos. 2. Weitere Inhalte in Textblöcken und Spalten. 3. Eine Fusszeile, die den eigenen Wünschen entspricht. Und 4. Ein Menu mit weiteren Seiten. 


Update vom 7. April 2021: Für die beiden WordPress Themes Twenty Twenty und Twenty TwentyOne gibt es seit kurzem so etwas wie einen Zaubertrank aus der Küche des Miraculix: Das Plugin «Twentig» bietet genau das, was viele Nutzer dieser beiden Themes vermissen: Gestaltungsoptionen! Und zwar eine grosse Menge davon. Twentig bringt nicht nur eine Vielzahl an gestalterischen Erweiterungen, es bietet auch neue Optionen für die Standard-Blöcke.

WordPress: Was das neue Jahr bringt

WordPress begann im Jahr 2003 als reine Blogger Plattform. Blogger finden bei WordPress auch heute noch ein komfortables Zuhause, die Reise geht aber mit grossen Schritten in Richtung Website Design.

Sie verwenden WordPress für Ihre Seite? Dann können Sie sich sicher noch gut an das Jahr 2018 erinnern. WordPress erhielt damals eine der wichtigsten Veränderungen in der Geschichte dieses erfolgreichen CMS: Der klassische Texteditor wurde durch «Gutenberg», einen neuen blockorientierten Editor ersetzt! Nicht alle waren von dieser Entwicklung begeistert, zumal WordPress auch heute noch zu einem beträchtlichen Teil von Bloggern genutzt wird. Und die erste Version des Block Editors konnte tatsächlich den Schreibfluss empfindlich hemmen. Deshalb bot und bietet WordPress weiterhin den klassischen Editor als Erweiterung (Plugin) an.

Eine neue Sicht auf Themes
Der Wechsel auf den Block Editor leitete einen wichtigen Paradigmawechsel ein: Mit dem Block Editor steht nicht mehr das «Theme» im Zentrum, das der Seite das Design gibt, sondern der Block Editor. Dieser erlaubt es, mit Layoutblöcken Einfluss auf das Design der Seite zu nehmen. Beispielsweise kann der Text in mehreren Spalten angeordnet werden. Der Inhalt lässt sich bereichern mit Zitaten, Fotogalerien, Tabellen und mehr. Und gerade die Betreuer grosser Seiten werden es schätzen, dass mehrere Blöcke zu einer Vorlage zusammengefasst werden können, die eine Wiederverwendung erlaubt. Und zwar dynamisch: Wird die Vorlage geändert, ändern sich auch alle Kopien, die angelegt wurden!

Wieviele Blocktypen gibt es? Mehr als 50! Die wichtigsten von ihnen sind natürlich Textblöcke wie Titel, Absatz, Aufzählung und Zitat. Ihnen folgen die Blöcke für Bilder, Tabellen und für das Layout des Beitrages. Wer den gewünschten Blocktyp nicht findet, wird bestimmt in einer der zahlreichen Blocksammlungen fündig, die mittlerweile angeboten werden, Coblocks zum Beispiel.

«Full Site Editing»
2021 steht nun eine weitere wichtige Veränderung an: Der Block Editor wird im Verlaufe dieses Jahres «Full Site Editing» ermöglichen. Was genau ist das? Mit Full Site Editing (FSE) übernimmt der Block Editor die Kontrolle über die ganze Seite, inklusiv Header- und Footer-Bereich und über die sogenannten «Widget» Areas. Dies sind Bereiche auf der Seite, die mit standardisierten Inhalten belebt werden können: Kalender,  Kategorien, Suchwolke, etc.

FSE ist für WordPress enorm wichtig, es steigt damit in die immer beliebter werdende Liga der «Page Builder» auf. Page Builder sind Werkzeuge, die das schnelle und einfache Erstellen ganzer Webseite möglich machen. Vielleicht kennen Sie Jimdo oder Wix? Das sind kommerzielle Page Builder! Auch für WordPress gibt es bereits solche Werkzeuge, das beliebteste von ihnen heisst «Elementor». Mit Elementor legen Sie in wenigen grundlegenden Schritten das Layout der Seite fest, bauen Inhalte und Bilder ein, verlinken die Seiten miteinander und klicken zuletzt auf «Publish». Die neue Webseite ist damit online! 

Ziel: Ein eigener Page Builder
Das ist schön, macht aber die Entwickler von WordPress nicht ganz glücklich, sie hätten gerne ihren eigenen schicken Page Builder und mit FSE ist nach dem Block Editor der zweite Meilenstein auf dem Weg zu diesem Ziel erreicht. Der Block Editor und FSE werden in den kommenden Jahren die Theme-Landschaft von WordPress markant verändern. Gefragt sind nicht mehr klassische Themes, die das Layout der Seite vorgeben. In de Focus rücken werden nun jene Themes, die eher im Hintergrund bleiben und voll auf die Funktionen des Block Editors bauen. Damit kann der Webdesigner selber entscheiden, wie die Seite zuletzt aussehen wird. Themes werden optisch schlichter, technisch aber komplexer werden.

Setzkasten oder Papierbogen
Früher waren WordPress Themes wie Setzkästen: Sie enthielten Fächer, die der Benutzer mit Inhalten füllen konnte. Die Anordnung und Grösse der Fächer konnte indes nicht angepasst werden. Gewiss gab es Optionen, mit denen das Aussehen des Themes leicht verändert werden konnnte und mit ein paar CSS Tricks war noch mehr möglich! Die neuen Themes, wie zum Beispiel «Twenty Twenty One» gleichen eher einem grossen, leeren Papierbogen, den Sie mit allen möglichen Elementen selber ausfüllen können.

Beide haben Vor- und Nachteile, so wie alles auf dieser Welt. Der Blogger wünscht sich vielleicht ein schönes Theme mit Titel, Inhalt und einer Spalte für die Navigation. Er wird weiterhin von WordPress zu 100% unterstützt! Weiterhin werden klassische Blog Themes entwickelt und wer sich mit dem Block Editor nicht anfreunden mag, kann den Classic Editor nutzen, den es weiterhin geben wird. Webseiten Designer finden mit dem Block Editor ein Tool, das zwar noch nicht an etablierte Page Builder heranreicht, aber heute schon einen praktischen und schnellen Weg zur eigenen Webseite bieten kann.

Die eigene Webseite in 90 Minuten

Vielleicht kennen Sie dieses Problem: Es soll in möglichst kurzer Zeit eine Webseite erstellt werden, natürlich muss sie gut aussehen und leicht wartbar sein. Haben wir schon von den Kosten gesprochen? Nun, in der Budgetkasse ist etwa soviel Geld wie im Hut eines Strassenmusikanten, nach einem zehnminütigen Auftritt, an einem Provinzbahnhof. Wie kann dieses Problem gelöst werden? Ganz einfach, mit WordPress! Dieser Blog Beitrag zeigt Ihnen, wie sie in weniger als 90 Minuten eine eigene Website erstellen können, die alle genannten Kriterien erfüllt.

Vorarbeiten
Alles, was Sie für Ihren Auftritt benötigen, ist ein Webserver Abonnement, das die Installation von WordPress ermöglicht. Bei Hosttech gibt es das passende Paket «easyM» bereits ab 2.10 Franken pro Monat, bei SolNet bezahlen Sie 29.90 Franken pro Jahr, für dieses Geld bekommen Sie den Webserver, ein vorinstalliertes WordPress, die Domain ist wie bei Hosttech im Preis inbegriffen. Versteckte Kosten? Diesmal keine – versprochen!

Falls Sie WordPress selber installieren müssen: Es ist keine Hexerei. Grundsätzlich teilt sich die Installation in vier Schritte auf: Herunterladen von WordPress und entpacken des ZIP Archivs. Anschliessend werden alle Dateien mit FTP (File Transfer Protocol) auf den Webserver kopiert. Im dritten Schritt wird eine MySQL Datenbank erstellt. Im vierten und letzten Schritt rufen Sie Ihre neue Seite im Webbrowser auf, WordPress meldet sich dann mit einer freundlichen Installationsseite. Keine Sorge, es genügt, die Zugangsdaten der MySQL Datenbank anzugeben. Dann ist WordPress bereits installiert! Wenn Sie Probleme oder Fragen haben, kontaktieren Sie den Kundendienst Ihres Providers. Freundliche Hosting Anbieter helfen Ihnen bei der Installation gerne oder erledigen diesen Schritt für Sie!

Falls der letzte Absatz Ihnen nicht ganz verständlich vorkommt: Tut mir leid! Hier finden Sie eine detaillierte Installationsbeschreibung. Ich hoffe, dass Ihnen diese weiterhilft.

Warum gerade WordPress?
Es gibt viele gute CMS (Content Management System), keine Frage! Da sind Joomla!, Drupal, E107, Typo3 und hundert weitere. Und damit haben wir nur die bekanntesten erwähnt. WordPress ist aber mit Abstand das populärste CMS von allen, was gute Gründe hat. Zählen wir hier nur die wichtigsten auf: WordPress ist leicht zu installieren und zu warten, das Erstellen neuer Seiten oder Blogbeiträge geht leicht von der Hand, die Auswahl an Themes (Gestaltungsvorlagen) und Plugins ist riesig! Wie sieht es mit den Kosten aus? WordPress kostet – nichts! Auch die meisten Plugins und Themes sind gratis! Die Anbieter verdienen ihr Geld mit Support und mit sogenannten «Pro» Versionen. Wenn Sie beispielsweise ein schönes Theme wie «Hestia» verwenden, kostet es sie in der Basisversion nichts. Wenn Sie aber alle Funktionen von Hestia verwenden möchten, müssen Sie zur Kreditkarte greifen! Die meisten Themes kosten zwischen 30 und 70 Franken pro Jahr! Dies ist das übliche Geschäftsmodell in der WordPress Welt. Und es funktioniert hervorragend, wie die Praxis zeigt. Rund um WordPress ist in den letzten Jahren eine gigantische Softwareindustrie entstanden.

Und es gibt noch etwas, das für WordPress spricht: Gemäss aktuellen Erhebungen (Februar 2021) verwenden 40% aller CMS-basierten Webseiten weltweit WordPress.

WordPress DashboardWordPress Dashboard

Rein ins Dashboard!
Nun ist WordPress also installiert und Sie haben das Administrator Login für das Dashboard erhalten – oder es selbst definiert. Sie können Ihre Seite im Webbrowser jetzt auch wie folgt aufrufen, ich werde von nun an die Domain hockey-masters.ch als Beispiel verwenden:

Seite aufrufen: http://www.hockey-masters.ch
Dashboard: http://www.hockey-masters.ch/wp-admin

Der Begriff «Dashboard» sagt Ihnen noch nichts? Bei WordPress ist das Dashboard der Admin Bereich. Also der Ort, an dem Sie Ihre Webseite verwalten, Texte schreiben, Bilder hochladen, Themes und Plugins installieren, und so weiter. Kurz: Alles, was benötigt wird, um eine Webseite von A-Z zu erstellen und zu warten.

Falls Sie WordPress noch nicht so gut kennen, empfehle ich Ihnen, sich etwas Zeit für den «Codex» zu nehmen, die Seite also, auf der Sie alles wissenswerte rund um WordPress schnell finden werden. Hier geht’s zum WordPress Codex.

Ein Theme auswählen
Sie haben sich etwas eingelesen? Prima! Weiter geht’s. Das erste, was nun folgt, ist die Installation eines Themes. Hier noch etwas zur Terminologie: Themes sind Gestaltungsvorlagen. Themes legen fest, wie Ihre Seite aussehen wird. Das gute daran ist, dass Themes jederzeit ausgetauscht werden können, ohne dass die Inhalte Ihrer Seite verloren gehen. Zudem können Themes recht einfach an die eigenen Bedürfnisse angepasst werden. Aber welches ist das richtige Theme für mich, werden Sie vielleicht jetzt fragen? Zur Beantwortung dieser Frage sind ganze Bücher geschrieben worden. Deshalb hier um der Kürze willen das Ernüchternde vorweg: Es gibt kein Allgemeinrezept, um in vernünftiger Zeit das «passende» Theme zu finden. Warum nicht? Weil die Wahl stets von der Aufgabe, dem persönlichen Geschmack und davon abhängt, was ein Theme alles können muss.

Machen Sie es zu Beginn so: Wählen Sie im Menu Design > Themes. Nun sehen Sie alle Gestaltungsvorlagen, die bereits installiert sind. Vermutlich werden Sie Twenty Twenty One, Twenty Twenty Twenty und einige weitere sehen.

Info: die Twenty-Themes. Seit rund 11 Jahren veröffentlicht WordPress regelmässig neue Standard Themes, die mit WordPress mitgeliefert werden. Twenty Ten war das erste, das aktuelle heisst Twenty Twenty One. Diese Standard Themes sind in bezug auf das Aussehen meist neutral gehalten, aber so flexibel, dass sie problemlos an individuelle Bedürfnisse angepasst werden können.

Auswahl eines neuen Themes

Klicken Sie als nächstes auf die Schaltfläche Hinzufügen, um neue Themes zu installieren. Wählen Sie im darauf folgenden Schritt die Sortieroption Populär. Jetzt sehen sie die Themes, die zurzeit beliebt sind. Und nun nehmen Sie sich etwas Zeit und schauen sich mindestens zehn Themes in aller Ruhe an. Themes können mit einem Klick auf Vorschau angezeigt werden, damit wird an Ihrer Seite selbst nichts verändert! Prima, nicht? Die meisten Themes, die Sie hier sehen, können Sie kostenlos installieren und in aller Ruhe testen. Wenn Sie genaue Vorstellungen über das Aussehen haben, können Sie die Themes auch filtern mit der Option Nach Funktionen filtern.

Haben Sie ein Theme gefunden? Dann klicken Sie jetzt auf Installieren und aktivieren Sie es. Ich habe in der Zwischenzeit ebenfalls eines ausgewählt, es heisst Lighthouse, ich werde dieses Theme im folgenden als Beispiel verwenden.

WordPress DashboardSo sieht das Lighthouse Theme aus

Schön, dass Sie reinschauen!
Was wir als nächstes benötigen, ist eine Seite, die den Besucher mit einem freundlichen «Willkommen» begrüsst. WordPress hat bereits so eine Seite erstellt, vermutlich mit dem vielverheissenden Titel «Hallo Welt!». Wir könnten nun diese Seite anpassen und als neue Startseite verwenden. Es ist aber besser, wenn Sie eine komplett neue Seite erstellen, ohne jede Altlast! Das geht ganz einfach über Seiten > Erstellen. Wichtig: Erstellen Sie auch wirklich eine Seite, nicht einen Beitrag! Falls Sie dies jetzt verwirrt, ich werde es im nächsten Abschnitt klären…

Hockey Masters Startseite

Hockey Masters Startseite

Ändern Sie Ihre neue Seite und schreiben Sie zuerst einen einladenden Titel, «Willkommen» zum Beispiel. Und dann den Text, mit dem Sie Ihre neugierigen Besucher begrüssen wollen. Wie so oft im Leben gilt auch hier: Weniger ist mehr. Der Text soll korrekt, gut verständlich, angenehm zu lesen und interessant sein! Ich habe diese Aufgabe auf meiner Beispielseite bereits erledigt, das Ergebnis können Sie im Kasten rechts sehen.

Sobald Sie mit der Startseite fertig sind, wählen Sie im Menu noch einmal Seiten und erstellen Sie mindestens zwei neue Seiten. Geben Sie diesen passende Titel wie zum Beispiel Über mich und Kontakt. Ich werde gleich darauf zurückkommen!

Ein paar Worte zum Gutenberg Editor
Hatten Sie beim Erstellen der Texte etwelche Mühe? Nun, dann geht es Ihnen wie zig tausend anderen WordPress Benutzern. Seit Version 5.0 wird WordPress mit einem Block Editor ausgeliefert, der auf den gefälligen Namen «Gutenberg» hört! Sie können hier nicht einfach drauflos tippen, weil alle Inhalte in Blöcken organisiert werden. Und das hat seine guten Gründe. Durch das Anordnen in Blocks sind die Seiteninhalte strukturiert, es ist deshalb viel einfacher, das Layout der einzelnen Elemente zu beeinflussen. Ausserdem kann Gutenberg vieles, was der alte, klassische Editor nicht konnte. Mehrspaltige Bereiche zum Beispiel, die sich an jede Bildschirmgrösse anpassen (Stichwort: Responsive Design).

Mein Vorschlag: Geben Sie Gutenberg eine Chance, Ändern Sie den Titel, dann den ersten Textblock. Wenn Sie damit fertig sind, klicken Sie auf das Plus-Symbol mit Kreis, um weitere Blöcke zu erstellen. Um einen Block vertikal zu verschieben, klicken Sie auf die Pfeilsymbole links neben dem Block. Sobald Sie einen Block markiert haben, wird darüber eine Symbolleiste angezeigt, bei Textblöcken werden hier grundlegende Textauszeichnungen angeboten. Für die Eigenschaften des ganzen Blocks ist das Blockmenu zuständig. Dieses sehen Sie am rechten Fensterrand.

Darauf müssen Sie achten: Gutenberg konvertiert jeden (!) Absatz in einen Block. Zwar kann der Cursor mit den Pfeiltasten über die Blockgrenzen bewegt werden, auch die Seitenlauftasten funktionieren wie erwartet. Abschalten lässt sich dieses Aufteilen in Blocks aber nicht! Was zudem fehlt, ist ein Modus zum störungsfreien Schreiben (englisch: distract free writing). Hierbei werden alle Kontrollelemente ausgeblendet, so dass das ganze Fenster nur noch den Text anzeigt. Das ist etwa so wie mit dem Smartphone am Sandstrand während den Ferien. Wirklich entspannen können Sie sich erst, wenn Sie das verflixte Ding ausschalten!

Info: Gutenberg für Vielschreiber. Wenn Sie längere Texte schreiben wollen, blenden Sie als erstes mit einem Klick auf das [x] Symbol (oben rechts im Fenster) die Einstellungen aus. Ein weiterer Klick auf das Zahnradsymbol blendet den Dialog wieder ein. Als letztes klicken Sie auf das Piktogramm für die Einstellungen, drei vertikal angeordnete Punkte [⋮] und markieren Sie dies: Vollbild Modus, Spotlight Modus und Obere Werkzeugleiste.

Noch ganz kurz etwas zu den Bildern: Damit der Text um ein eingefügtes Bild fliessen kann, muss der Block mit dem Bild vor dem Textblock eingefügt werden. Dann wird bei den Bildeigenschaften der Modus zum Umfliessen gewählt. Das klappt solange gut, bis der Text überarbeitet wird und das Bild plötzlich woanders stehen soll. Hier hilft nur eines: Den Block mit dem Bild an die gewünschte Stelle verschieben.

Den Schalter umlegen!
WordPress entstand vor fast 20 Jahren als Software für Blogger; diese Herkunft ist bis heute gut zu erkennen. Denn wenn sie WordPress installieren, befindet es sich im Blogger Modus. Auf der Startseite werden die neuesten Blog Beiträge angezeigt, nicht eine statischer Inhalt. WordPress unterscheidet strikte zwischen Beiträgen und Seiten. Beiträge werden von Bloggern verfasst und in chronologischer Folge angezeigt, die neusten zuerst, die ältesten weiter unten. Wenn Sie wollen, dass sich WordPress nicht wie eine Bloggerseite verhält, sondern wie eine Webseite mit stets gleichbleibender Startseite und Seitenstruktur, dann müssen Sie den Hebel umlegen. Wir werden dies sogleich tun. Da dies möglicherweise ein nicht ganz leicht zu verdauender Brocken ist, hier noch einmal eine Zusammenfassung der beiden WordPress Modi:

Blogger Modus: Auf der Startseite werden Ihre letzten Blogbeiträge angezeigt. Blogger, aber auch die Betreiber von Nachrichtenseiten verwenden gerne diesen Modus. Ein typischer Blog ist in bezug auf das Design schlicht gehalten, Beiträge werden absteigend nach Datum sortiert von oben nach unten angezeigt, Besucher können meistens auch Kommentare verfassen. Es ist möglich, statische Seiten über ein Menu anzubieten. Auch diese Seite hier, auf der Sie sich gerade befinden, verwendet den Blogger-Modus.

Statische Startseite: Beim öffnen der Webseite wird immer dieselbe Seite angezeigt. Dies ist die Startseite, die Sie vor wenigen Minuten erstellt haben. Weitere statische Seiten wie zum Beispiel Kontakt, Über mich oder Meine Katzen können erzeugt und über ein Menu verlinkt werden. Selbstverständlich können Sie in diesem Modus auch Blogbeiträge einbinden. Diese erscheinen dann unter einer Rubrik wie zu Beispiel «News».

Strtseite einstellen

Startseite einstellen

Und so geht das umstellen: Wählen Sie Design > Customizer und dann Startseiten Einstellungen. Im Dialog, der nun angezeigt wird, wählen Sie eine statische Seite als Startseite, dies öffnet eine Auswahlliste, in der die gewünschte Seite ausgewählt werden kann. Zum zweiten kann hier bestimmt werden, mit welcher statischen Seite die Blogbeiträge angezeigt werden. Wir lassen dies für den Moment aussen vor!

Seitenstruktur und Menus
Richten Sie nun bitte Ihr Augenmerk wieder auf die beiden Seiten, die Sie zusätzlich erstellt haben, ich habe sie im Beispiel Kontakt und Über mich genannt. Natürlich können Sie diese Seiten benennen, wie Sie möchten und Sie können auch weitere verfassen, Sie können sogar bestimmen, dass einzelnen Seiten anderen untergeordnet sind – willkommen in der Welt der Seiten-Hierarchie und -Navigation! Bitte geben Sie diesen beiden Seite einen sprechenden Titel und schon jetzt auch etwas Inhalt. Im folgenden Schritt werden wir die drei bisher erstellten Seiten in einer Navigation anzeigen. Wir benötigen dazu allerdings ein Menu. Keine Sorge, in WordPress können Menus mit wenigen Schritten generiert werden:

WordPress MenuEin Menu entsteht

  1. Wählen Sie Design > Menus. Schon sind Sie mitten im Dialog zum Verwalten der Menus. Standardmässig erstellt WordPress bei der Installation kein Menu, Sie müssen als als erstes eines erstellen.
  2. Klicken Sie in das Eingabefeld Name des Menus und geben Sie Ihrem neuen Menu einen sprechenden Namen, zum Beispiel «Hockey Masters Menu».
  3. Unter dem Menunamen sollten Sie bereits jetzt Ihre Seiten sehen, Sie können durch Ziehen/Ablegen die Reihenfolge ändern, Einträge löschen oder neu hinzufügen. Zum ändern klicken Sie einfach auf den kleinen Pfeil am rechten Rand des zu bearbeitenden Eintrages. Um einen weiteren Punkt zu ergänzen, wählen Sie im linken Bereich des Dialoges die Seite aus und klicken Sie den Button Zum Menu hinzufügen.
  4. Vergessen Sie nicht, zuletzt die Schaltfläche Menu speichern zu wählen, sonst war die ganze Mühe umsonst!

Ihr Menu ist nun fertig. Aber wenn Sie Ihre Seite neu laden, sehen Sie, dass es nirgendwo angezeigt wird. Warum das? Die Antwort wird Ihnen gerne der Entwickler des von Ihnen gewählten Themes geben: Menus müssen einer «Menuposition» zugewiesen werden, Menupositionen sind Bereiche auf der Seite, die der Themedesigner zur Anzeige von Menus vorgesehen hat. Viele Themes haben nur eine Menuposition, diese befindet sich meist oben im Header Bereich. Das in diesem Tutorial verwendete Lighthouse ist so ein Theme. Andere Themes haben drei oder sogar mehr Positionen. Das bedeutet auch, dass Sie verschiedene Menus erstellen und diese für ganz unterschiedliche Aufgaben verwenden können. Aber genug der Theorie, so aktivieren Sie das Menu:

Menuposition wählen

Das neue Menu einer Theme-Position zuweisen

  1. Wählen Sie Design > Customizer, dies öffnet den Dialog, mit dem Sie Ihr Menu einem Slot zuweisen können.
  2. Klicken Sie als nächstes auf Positionen anzeigen. Nun können Sie sehen, welche Menupositionen es gibt. Zu jeder Position können Sie ein Menu wählen, das hier angezeigt wird.
  3. Weisen Sie Ihr neues Menu einer Position zu und klicken Sie dann auf Veröffentlichen.  

Wenn alles geklappt hat, sollten Sie im Header Bereich die Navigation sehen. Wenn Sie nichts sehen, kontrollieren Sie bitte dies: A. Haben Sie das richtige Menu zugewiesen? B. Haben Sie die Änderung bei der Zuweisung publiziert? C. Wenn Sie ein Caching Plugin verwenden, löschen Sie bitte den Cache. Aktualisieren Sie dann die Seite.

Wir sind zum Thema Menu noch nicht ganz am Ende angelangt. Wie ich schon angedeutet habe, können Menus verschachtelt werden. Sobald Ihre Seite umfangreicher wird, ist dies ein wichtiger Aspekt. Ziehen Sie einfach einen Eintrag Ihres Menus im Menu Editor etwas nach rechts. Der Eintrag bleibt dann eingerückt und wird ab sofort als Untermenu angezeigt. Allerdings nur dann, wenn der Designer des Themes dies auch vorgesehen hat! Im Zweifelsfall einfach ausprobieren.

Neue Kleider für den Kaiser
Es freut mich, dass Sie bis hierher durchgehalten haben. Nun haben wir schon ein schönes Stück der Wegstrecke zurückgelegt. Viel fehlt nicht mehr! Im nächsten Schritt sollten Sie der Seite ein individuelles Gepräge geben. Ersetzen Sie dazu das Header Bild und passen Sie die Farben an. Beides können Sie sehr einfach im Customize Menu. Bevor Sie dies tun, stellen Sie bitte ein passendes Bild bereit. Am besten ist es, wenn Sie dieses selber gemacht haben oder die Erlaubnis haben, es zu verwenden.

Header festlegenEin Header Bild zuschneiden

Wählen Sie Design > Customizer und anschliessend die Option Header-Bild. Fast alle Themes bieten ein Header Bild oder wenigstens eine Grafik, die prominent auf der Seite angezeigt werden kann. Achten Sie bitte auf die geforderte Grösse des Bildes, die im Dialog angezeigt wird und verwenden Sie ein Grafikprogramm, um das Bild zuzuschneiden. Falls das jetzt gerade nicht geht: Laden Sie Ihr Photo hoch, so wie es ist. Im zweiten Schritt können Sie es auch in WordPress auf die passende Grösse verkleinern.

Sobald das Header Bild Ihren Vorstellungen entspricht, widmen Sie bitte Ihre Aufmerksamkeit der Farbgebung. Welches ist die dominante Farbe des Headerbildes? Versuchen Sie diese als Theme-Farbe einzustellen. Viel ist dazu nicht nötig: Wählen Sie Design > Customizer > Farben. Wenn es nun einen Eintrag Theme-Farbe gibt, stellen Sie hier die ermittelte Farben ein. Die Theme-Farbauswahl ist sehr unterschiedlich. Manche Themes erlauben nur das Bestimmen der Textfarbe, andere bieten bis zu 100 verschiedene Farbeinstellungen. Auch hier gilt: Ausprobieren, bis es passt!

Was ist eigentlich ein Widget?
Wir sind schon fast fertig! Ganz zum Schluss werfen Sie bitte noch einen Blick auf die Widgets. Widgets? Schlagen wird im Wörterbuch nach, erfahren wir, dass ein Widget ein «Dingsbums» ist – und damit sind wir nicht wirklich klüger! Komponente einer Benutzeroberfläche ist eine wesentlich bessere Übersetzung. In WordPress können Widgets so ziemlich alles sein: Ein Eingabefeld für die Suche, ein Kalender, eine Auflistung der Ihrer neuesten Twitterbeiträge, eine Sprachauswahl, ein Audiogerät usf. WordPress bringt bereits eine Myriade an Widgets mit, weitere können nachinstalliert werden. Und Widgets können fast überall auf der Seite platziert werden: Überall dort, wo der Theme Designer es vorgesehen hat, oder in Beitrag selbst, wenn Sie Gutenberg verwenden.

Widgets platzieren

Widgets auf der Seite platzieren

Wählen Sie bitte noch einmal Design > Customizer, dann Widgets. Nun sehen Sie eine Liste von Bereichen, in denen Sie Widgets platzieren können. Schön übersichtlich, nicht? Wählen Sie nun einen Bereich aus, zum Beispiel Sidebar. Diesen Bereich gibt es auf allen Themes mit Seitenleiste. In der nächsten Ansicht werden alle Widgets aufgelistet, die es in diesem Bereich bereits gibt. Sie können hier Widgets löschen, hinzufügen und die Reihenfolge verändern. Und in aller Regel werden Sie hier auch etwas ändern wollen! Besonders das Widget zum Einloggen in das Dashboard gehört weg! Auf das Meta Widget wollen Sie vermutlich löschen. Beliebt sind hingegen Widgets zur Anbindung an soziale Netzwerke wie Facebook oder Twitter.

Fertige SeiteDie fertige Seite

Und nun sind wir tatsächlich am Ende. Sie haben mit WordPress eine Seite erstellt, die Ihren gewünschten Inhalt anzeigt und – wenn auch nicht bis in alle Details – so aussieht, wie Sie es gerne haben möchten. Ist die Seite damit wirklich fertig? Mit einer Webseite verhält es sich etwa so mit einer alten Lokomotive. Sie fährt zwar, aber es gibt immer etwas zu flicken. Sie stehen also am Beginn eines Prozesses, bei dem sich die Seite ständig verändern und erneuern wird. Und das ist gut so! Pflegen Sie die Inhalte, passen Sie das Design an oder erstellen Sie ihr eigenes Theme (ist keine Raketenwissenschaft). Kümmern Sie sich um die Suchmaschinenoptimierung (Stichwort: SEO und Google Search Console), verfolgen Sie die Zugriffsstatistik und optimieren Sie die Sichtbarkeit mit dem Yoast Plugin.

WordPress 5: Für die Zukunft gerüstet

WordPress 5.0 ist seit kurzem verfügbar. Mit dem blockorientierten Editor «Gutenberg» will das populäre CMS zu modernen Webseiten-Generatoren aufschliessen.

Seit einer Woche ist sie nun also da, die neue Version 5.0 von WordPress, auch «Bebo» genannt. Wichtig zu wissen ist, dass dies nicht einfach eine weitere Version mit einigen neuen Funktionen ist. WordPress 5.0 (WP50) ist ein Meilenstein in der Geschichte des populären CMS (Content Management System), weil es mit einem komplett neuen Editor ausgeliefert wird. «Gutenberg», so heisst der Editor, arbeitet konsequent blockorientiert. Das bedeutet, dass jedes Element eines Beitrages, sei dies nun ein Absatz, ein Bild, eine Liste oder ein Zitat, als Block bearbeitet wird. Dies hat viele Vorteile: Blogbeiträge und Seiteninhalte sind somit strukturiert aufgebaut, es ist für die Entwickler wesentlich einfacher, auf das Design dieser Blocks Einfluss zu nehmen. Gutenberg lehnt sich ferner an die populären «Page Builder» an, das sind Erweiterungen, mit denen Seiten im Baukastenprinzip aufgebaut werden können.

Betrachten wir ein klassisches Beispiel: Es sind drei Texte nebeneinander zu platzieren. Im klassischen Editor muss dazu eine Tabelle erstellt werden, was keine Ideallösung ist. Denn spätestens auf kleinen Bildschirmen gibt es Darstellungsprobleme. Im Gutenberg Editor wird einfach ein Layoutelement Columns erstellt. Nun können die Texte in die freien Spalten eingefügt werden. Wie alle Blockelemente ist auch das Spaltenlayout responsive, es passt sich automatisch der Bildschirmgrösse an!

Blogger mögen den klassischen Editor
Was passiert mit dem klassischen Editor, der bisher zu WordPress gehörte? Er steht immer noch zur Verfügung, muss aber als Plugin nachinstalliert werden. Gerade Blogger sind es, die genau dies tun werden! Sie wollen einfach ihre Texte publizieren, hin und wieder mit Bild, seltener mit einem Youtube-Video. Mindestens einen grossen Vorteil hat der klassische Editor: Er funktioniert genau so wie eine Textverarbeitung. Gutenberg teilt den Text auf, aus jedem Absatz wird ein Block. Zwar haben die Gutenberg Entwickler alles getan, damit das Schreiben trotz der Blockstruktur flüssig von der Hand geht. Stolpersteine gibt es trotzdem noch! Das Umfliessen des Textes um ein Bild zum Beispiel.

Aufschliessen zu Jimdo, Weebly und Wix
Die treibende Kraft hinter WordPress ist das US Unternehmen Automaticc. Die Softwareschmiede hat in den letzten Wochen und Monaten enorm viel Energie investiert in die Fertigstellung der Version 5 mit Gutenberg. Aus gutem Grund: Das Unternehmen drohte von modernen Seitengeneratoren abgehängt zu werden. Die kommerzielle Version von WordPress, wordpress.com, drohte in Rückstand zu geraten. Mit Gutenberg und den neuen Themes hat Automaticc zwar noch nicht aufgeschlossen, aber einen entscheidenden Schritt gemacht.


Zugabe: 14 Jahre sorgloses Aktualisieren
Wer regelmässig mit CMS zu tun hat, kennt das leidige Problem: Eine neue Version steht zur Verfügung, die Aktualisierung der bestehenden Installation sorgt für Schwierigkeiten. WordPress bildet hier eine erfreuliche Ausnahme. In den allermeisten (!) Fällen genügt es, im Dashboard den Update-Button anzuklicken. Sogenannte Minor-Releases werden sogar automatisch installiert. Ich nutze WordPress seit Februar 2005. In all diesen Jahren hat es beim Update nie ein Problem gegeben! Nie? Doch einmal, als von der ISO Zeichenkodierung auf UTF-8 umgestellt wurde. Plötzlich wurden alle Umlaute als Sonderzeichen dargestellt. Noch am Tag des Updates veröffentlichte aber ein Entwickler ein Plugin, das dieses Problem schnell und sauber löste. Soviele Jahre sorgloses Aktualisieren, das ist eine softwaretechnische Meisterleistung!

WordPress: Streit um Gutenberg

WordPress ist mit Abstand das populärste Content Management System, mehr als 60% aller Webseiten, die auf einem CMS basieren, nutzen WordPress. Doch nun gibt es Streit um Gutenberg, den neuen Standard Editor. Dieser soll ab Version 5.0 zum Kern des Systems gehören. Nur wenige Anwender sind davon wirklich begeistert.

WordPress - Gutenberg EditorGutenberg: Jeder Abschnitt wird zum Block

Der Ton auf der Webseite des Gutenberg Projektes wird rauher: «Gutenberg hat meine Webseite zerstört», schreibt ein erboster Anwender in seiner Rezension. Ein anderer Tester findet den Blockeditor schrecklich und fordert wie hunderte andere, ihn nicht zum Standard zu machen: «Niemand hat darum gebeten, wir wollen es nicht. Niemand will es!» Zahlreiche Rezensionen mussten bisher von den Moderatoren gelöscht werden, weil der Tonfall nicht mehr angemessen war. Rund jede dritte Wortmeldung empfiehlt, Gutenberg weiterhin als Plugin anzubieten.

Blöcke ecken an
Was ist passiert? Die WordPress Entwickler arbeiten schon seit rund zwei Jahren an Gutenberg, einem vollkommen neuen Editor für Blog-Beiträge und Webseiten. Im Gegensatz zum bisherigen klassischen Editor folgt Gutenberg konsequent einem blockorientierten Paradigma. Jeder Absatz, jedes Bild und jede Aufzählung werden in einem eigenen Block gespeichert. Gerade bei Webseiten hat dies viele Vorteile, weil das Layout der einzelnen Seitenteile einfacher beeinflusst werden kann. Und die Idee ist ja nicht neu, viele «Page Builder« nutzen dasselbe Konzept. Aber: Was für den einen gut sein mag, gefällt dem anderen ganz und gar nicht. Besonders die Blogger, die einen einfachen und robusten Texteditor wünschen, laufen gegen Gutenberg Sturm. Denn damit wird der Schreibfluss zum Teil empfindlich gestört. Hier ein simples Beispiel:

Soll ein Bild in einen bestehenden Text eingefügt werden, musste im klassischen Editor nur der Cursor an die richtige Stelle gesetzt werden. Über die Medien-Schaltfläche wurde dann das Bild eingesetzt. Bei Gutenberg muss zuerst der Text in zwei Blöcke aufgeteilt werden. Dann wird eine neuer Bildblock dazwischen gesetzt. Wehe, das Bild steht an der falschen Stelle, dann wird der Bearbeitungsaufwand noch grösser. Ferner wird jeder (!) Absatz eines Beitrages automatisch in einem einzelnen Block gespeichert. Bei redigieren stolpert man dann immer wieder über die Blockgrenzen.

Gutenberg soll in Version 5 Standard werden
Auf der Plugin Seite gibt es bisher mehr als 800 Rezensionen. Viele davon wurden in der vergangenen Woche verfasst. Denn mit der Freigabe von WordPress 4.9.8 platzierten die Entwickler auf dem Dashboard einen prominenten Hinweis, der zum Testen von Gutenberg ermuntert. Ein einziger Klick installiert das Plugin und macht es zum Standardeditor. Seitdem hagelt es Kritik, der Rating-Durchschnitt ist auf 2.4 von maximal 5 Punkten abgesackt. So wie es aussieht, wollen die Verantwortlichen aber an ihrem Entscheid festhalten. Schon in der Version 5.0, die für September geplant ist, soll Gutenberg zum Kern von WordPress gehören. Wer den klassischen Editor weiterverwenden will, muss diesen als Plugin nachinstallieren und Gutenberg deaktivieren.

Noch ist es nicht soweit. Und es ist gut vorstellbar, dass das Team rund um Matt Mullenweg in diesem Moment etwas nervös ist. Erlebt doch die WordPress Community dieser Tage die schwerste Krise, die es in der 15-jährigen Geschichte bisher gab. Welche Optionen haben die Entscheidungsträger? Sie können einen Kompromiss wählen und beide Editoren, den klassischen und Gutenberg zur Auswahl anbieten. Oder sie können einen Marschhalt anordnen, damit mehr Zeit bleibt, um Gutenberg zu verbessern, so wie viele besorgte Anwender es fordern. Oder sie können hart bleiben und an ihrem Entscheid festhalten. Hoffentlich wählen sie nicht diesen Weg, denn der könnte steinig werden.