So erstellen Sie eine Blog-Seite mit Gutenberg (basierend auf dem Gutenberry-Thema)

Last Updated on 11/10/2021 by MTE Leben

In diesem Tutorial finden Sie alles, was Sie zum Erstellen einer Blog-Seite mit dem Gutenberg-Editor und dem GutenBerry-Thema benötigen.

Erstellen einer Blog-Seite mit Gutenberg

Eine Blog-Seite ist eine Seite, auf der Ihre Besucher alle auf Ihrer Website vorhandenen Veröffentlichungen sehen. Es handelt sich um eine dynamische Seite, das heißt, sie zeigt die auf Ihrer Website hinzugefügten Veröffentlichungen von den neuesten bis zu den ersten an, sortiert nach Datum.

Es ist wichtig zu wissen, dass Sie im Moment die Darstellung der Publikationen gestalten können, jedoch der Beitragsauszug, das vorgestellte Bild, die Beitragsmeta und der Titel aus der Publikation gezogen werden.

Sie müssen sicherstellen, dass auf Ihrer Website Veröffentlichungen vorhanden sind und dass Sie das vorgestellte Bild und alle Informationen, die Sie auf der Blog-Seite in der Liste der Beiträge präsentieren möchten, zuvor festgelegt haben.

Um eine Blog-Seite auf Ihrer Website zu erstellen, müssen Sie zu Seiten > Neu hinzufügen gehen, und los geht's!

Zuallererst müssen Sie den Namen von . auswählen deine Seite. Wir werden sie „Meine erste Blog-Seite“ nennen, aber Ihr Seitenname muss eine kleine Einführung sein.

Sie können die Seite mit dem klassischen Gutenberg Posts-Block füllen. Wenn Sie jedoch Zeit sparen und mehr zusätzliche Einstellungen zum Anpassen Ihrer Blog-Seite erhalten möchten, können Sie das ZeGuten-Plugin verwenden. Es verfügt über 5 responsive Post-Layouts, um Ihre Seite attraktiver und ansprechender zu gestalten.

Erstellen einer Blog-Seite basierend auf Gutenberry

Nachdem Sie eine Blog-Seite erstellt haben, können Sie zu Dashboard > Einstellungen > Lesen navigieren und hier das Dropdown-Menü der Beitragsseite suchen. Geben Sie die soeben erstellte Seite an und klicken Sie auf die Schaltfläche Änderungen speichern.

Herzlichen Glückwunsch! Jetzt haben Sie die neu erstellte Seite als Ihre Blog-Seite zugewiesen. Es gibt jedoch noch so viele Möglichkeiten, es anzupassen und einzigartig zu machen.

Öffnen Sie die neu erstellte Blog-Seite im Customizer und greifen Sie auf die Registerkarte Blog-Einstellungen zu. Gehen Sie dann zur Registerkarte Blog, um zu sehen, was Sie tun können.

Standardmäßig werden Ihnen wahrscheinlich alle Veröffentlichungen auf Ihrer Website als Auflistung angezeigt. Um die Anzeige der Publikationen zu ändern, verwenden Sie:

Layout-Blog-Typ – hier können Sie ein Layout aus der Dropdown-Liste auswählen, damit Ihre Publikationen als Raster angezeigt werden.

Spalten – Wenn Sie ein Raster-Layout für Ihr Blog festgelegt haben, sehen Sie das Dropdown-Menü, um die Anzahl der Spalten auszuwählen, in denen die Beiträge angezeigt werden.

Es gibt auch die Einstellungen, die Ihnen bei der Entscheidung helfen, welche Metadaten für die Beiträge Sie präsentieren möchten: Beitragsautor, Veröffentlichungsdatum, Kategorien, Tags, Anzahl der Kommentare usw.

Mit der letzten Checkbox können Sie die Anzeige des Beitragsauszugs aktivieren.

Aktivieren Sie die Schaltfläche “Weiterlesen anzeigen”, damit die Besucher darauf klicken und zur einzelnen Beitragsseite navigieren können.

Außerdem müssen Sie den Label-Typ “Sticky” festlegen, um Ihre Posts als “Sticky” zu markieren, falls vorhanden.

Aktivieren der Navigation für die Blog-Seite

Wenn Sie viele Beiträge auf Ihrer Website haben (ja, Sie sind ein Blogger, sicher, dass Sie sie haben), wissen Sie, wie unwohl sich der Besucher fühlen kann, wenn er die Seite nach unten scrollen muss, während er nach einem bestimmten Beitrag sucht, den Sie haben vor einiger Zeit veröffentlicht.

Um den Vorgang zu vereinfachen, können Sie der Blog-Seite einen Navigationstyp hinzufügen. Dies kann eine Option sein, die es ermöglicht, von Seite zu Seite zu gehen, oder Navigationspfeile.

Während Sie sich im Customizer befinden, können Sie den Navigationstyp für die Blog-Seite im Dropdown-Menü Navigationstyp ändern.

Hier können Sie entweder Paginierung oder Navigation wählen.

Wenn Sie keine Paginierungselemente sehen, müssen Sie trotzdem die Anzahl der Beiträge festlegen, die pro Seite angezeigt werden sollen.

Gehen Sie zu Dashboard > Einstellungen > Lesen und definieren Sie den Wert, den Blog-Seiten höchstens anzeigen (er sollte geringer sein als die Anzahl der Beiträge, die Sie haben, damit Sie die Paginierungsoption sehen).

In den meisten Fällen reicht dies aus, um eine Blog-Seite zu erstellen. Wenn Sie jedoch eine statische Seite mit dynamischer Publikationsliste erstellen möchten, können Sie dies in Gutenberg tun. Lesen Sie weiter, um zu erfahren, wie.

Erstellen einer statischen Blog-Seite mit dynamischem Inhalt mit Gutenberg

Auch hier sollten Sie eine neue Seite erstellen. Und jetzt fangen wir an.

Fügen wir den Posts-Block zum Canvas der Seite hinzu! Klicken Sie einfach auf das „+“-Symbol links neben dem Text „Schreiben beginnen oder tippen / um einen Block auszuwählen“. Wählen Sie den Block “Posts” aus – Sie können ihn in der Kategorie ZeGuten-Blöcke finden.

Jetzt können Sie sehen, dass der Posts-Block die Veröffentlichungen auf Ihrer Site mit den Standardeinstellungen anzeigt. Lassen Sie uns sie ein wenig optimieren, um bessere Ergebnisse zu erzielen.

Die Shortcusts für Gutenberg können Sie übrigens ganz einfach nutzen, um Ihre Arbeit zu beschleunigen. Wenn Sie nicht wissen, wie Sie die Tastenkombinationen verwenden, lesen Sie diese Anleitung.

Einstellungen zum Blockieren von Beiträgen. Einstellen des Beitragslayouts in Gutenberg

Lassen Sie uns alle notwendigen Einstellungen vornehmen, um mit dem Design des Post-Layouts und dem Inhalt zu arbeiten, den Sie aus Ihren Posts ziehen möchten, um ihn im Blog anzuzeigen. Glücklicherweise können Sie im Gutenberg-Editor alles tun, was Sie brauchen, während Sie den Posts-Block verwenden. Es dauert nicht länger als einige Minuten.

Beitragsblock: Layoutoptionen

Suchen Sie die Leiste Blockeinstellungen auf der rechten Seite des Arbeitsbereichs der Seite. Wenn Sie es nicht sehen, bedeutet dies, dass Sie es zuvor geschlossen haben. Um es zurückzubekommen, klicken Sie auf das Zahnradsymbol in der oberen rechten Ecke. Klicken Sie dann auf den Posts-Block auf der Leinwand, um ihn zu aktivieren und auf seine Einstellungen zuzugreifen.

Der Posts-Block ermöglicht die Auswahl aus 3 verschiedenen Layout-Optionen:

• Posts-Liste – es ist ein sauberes Layout, in dem die Posts nacheinander angeordnet sind eine Spalte;
• Posts Grid – ein Layout, in dem Sie Posts in mehreren Spalten und Zeilen anzeigen können, indem Sie das Raster einstellen, um Publikationen zu präsentieren;
• Uneven Posts List – Verwenden Sie dieses Layout, um die Posts in der Schachreihenfolge anzuordnen. Hier haben Sie eine Spalte und die Beiträge werden nacheinander in Form einer Auflistung angezeigt, wobei die geraden Zeilen das vorgestellte Bild links und die ungleichmäßige Anzeige rechts zeigen.

Öffnen Sie die Post-Einstellungen unten, um die Publikationen auszuwählen, die Sie mit diesem Block abrufen möchten.

Hier können Sie einstellen:

• Kategorie – die Kategorie, aus der Sie die Publikationen anzeigen möchten.
• Anzahl der Artikel – Beschränken Sie die Veröffentlichungen auf eine bestimmte Anzahl und zeigen Sie nicht mehr als eine bestimmte Anzahl an. Das Maximum sind 100 Publikationen, aber Sie können sicherlich die Read More-Einstellungen verwenden, um den Block kürzer aussehen zu lassen.
• Spalten – verwenden Sie diesen Schalter, um die Anzahl der Spalten für Ihr Rasterlayout. Die maximale Spaltenanzahl beträgt 6.
• Titel-Tag auswählen – hier können Sie das HTML-Tag für den Titel einstellen (H1 – H6) . Stellen Sie sicher, dass Ihr Titel richtig eingestellt ist, um in den Suchergebnissen höher zu rangieren.
• Ordnen nach – diese Option ermöglicht die Sortierung der Publikationen von der ältesten zur neuesten , vom neuesten zum ältesten, und verwenden Sie die alphabetische Reihenfolge, um eine Reihenfolge festzulegen.

Es gibt auch Optionen für:

• Anzeigen von empfohlenen Bildern – Sie müssen sicherstellen, dass Sie Ihre Veröffentlichungen mit empfohlenen Bildern versehen, um zu sehen sie;
• Anzeige des Beitragsdatums – eine Option, um das Datum anzuzeigen, an dem der Beitrag veröffentlicht wurde;
• Anzeige der Beitragskategorie – dies ermöglicht dem Besucher zu sehen, zu welcher Kategorie der Beitrag gehört;
• Beitragsauszug anzeigen – aktivieren Sie diese Option, um einen Auszug aus Ihrem Beitrag anzuzeigen (es kann ein benutzerdefinierter oder ein aus Ihrem Inhalt generierter Auszug sein).
• Beitragsautor anzeigen – aktivieren Sie diesen Schalter, um anzuzeigen, wer diese Publikation geschrieben hat.

Weitere Einstellungen

Solange Sie möchten, dass die Besucher Ihre Beiträge öffnen und mit dem Lesen fortfahren, können Sie einen Weiterlesen-Link anzeigen und die Anzeige anpassen, den Standardtext durch Ihren eigenen ersetzen usw.

Sie können auch entscheiden, ob Sie die Read More-Option für jeden Beitrag als Text oder als Schaltfläche anzeigen möchten.

Der Posts-Block eignet sich gut für die Arbeit mit dynamischen Veröffentlichungen, ermöglicht jedoch noch nicht, die volle Leistung benutzerdefinierter Abfragen zu nutzen. Dennoch ist es ein unübertroffener Vorteil, wenn Sie mit den statischen Seiten Ihrer Blogging-Website arbeiten.

Bitte beachten Sie, dass es noch keine Paginierungsoptionen gibt. Wenn Sie also alle Ihre Beiträge anzeigen möchten, müssen Sie die Anzahl der Beiträge auf Maximum setzen. Sie können die neu erstellte Seite auch in den Einstellungen als Ihre Hauptblogseite zuweisen oder die Dinge so beibehalten, wie sie sind, und sie nur im Menü als Ihren Blog anzeigen lassen (wo Sie sie verlinken sollten), während Sie den Blog beibehalten Seite als Ihr Post-Archiv.

Die andere Möglichkeit, diese Aufgabe zu lösen, besteht darin, am Ende der Beitragsliste einen Link zur Beitragsarchivseite (einem echten Blog, den Sie im ersten Teil dieses Tutorials erstellt haben) hinzuzufügen, damit die Besucher auf alle Publikationen zugreifen können.

Herzlichen Glückwunsch! Sie haben Ihre erste eigene Blogseite erstellt und gestaltet! Bitte abonnieren Sie unseren Newsletter, um noch mehr Tipps zur Arbeit mit Gutenberg und Gutenberry zu erhalten!