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

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 werden der Beitragsauszug, das vorgestellte Bild, die Beitragsmeta und der Titel aus der Publikation gezogen.

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, gehen Sie zu Seiten > Neu hinzufügen, und los geht's!
In erster Linie müssen Sie den Namen Ihrer Seite auswählen. Wir werden es „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 Etikettentyp "Sticky" festlegen, um Ihre Beiträge als "Sticky" zu markieren, falls vorhanden.

Aktivieren der Navigation für die Blogseite

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 Pagination 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 Blogseite mit dynamischem Inhalt mit Gutenberg

Auch hier sollten Sie eine neue Seite erstellen. Und jetzt legen wir los.

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 „Beiträge“ aus – Sie finden ihn in der Kategorie ZeGuten-Blöcke.

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, können Sie diese Anleitung lesen.

Postet Blockeinstellungen. 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:

• Beitragsliste – es ist ein sauberes Layout, bei dem Beiträge einzeln in einer Spalte angeordnet sind;
• Posts Grid – ein Layout, in dem Sie Posts in mehreren Spalten und Zeilen anzeigen können und das Raster so einstellen, dass Veröffentlichungen präsentiert werden;
• Liste der ungleichen Posts – 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 mithilfe dieses Blocks abrufen möchten.

Hier können Sie einstellen:

• Kategorie – die Kategorie, aus der Sie die Veröffentlichungen anzeigen möchten.
• Anzahl der Elemente – Beschränken Sie die Veröffentlichungen auf eine bestimmte Anzahl und zeigen Sie nicht mehr als eine bestimmte Anzahl an. Das Maximum sind 100 Veröffentlichungen, 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 festzulegen. Die maximale Spaltenanzahl beträgt 6.
• Titel-Tag auswählen – hier können Sie das HTML-Tag einstellen, das für den Titel verwendet werden soll (H1 – H6). Stellen Sie sicher, dass Ihr Titel richtig eingestellt ist, um in den Suchergebnissen höher zu erscheinen.
• Sortieren nach – Mit dieser Option können Sie die Veröffentlichungen vom ältesten zum neuesten, vom neuesten zum ältesten sortieren und die alphabetische Reihenfolge verwenden, um eine Reihenfolge festzulegen.

Es gibt auch Optionen für:

• Anzeige von Sonderbildern – Sie müssen sicherstellen, dass Sie Ihre Publikationen mit Sonderbildern versehen haben, um sie zu sehen;
• Anzeige des Beitragsdatums – eine Option zum Anzeigen des Datums, 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). Sie können auch die Länge des Auszugsinhalts festlegen, indem Sie die Anzahl der Wörter reduzieren;
• Beitragsautor anzeigen – aktivieren Sie diesen Schalter, um anzuzeigen, wer diese Publikation verfasst hat.

Lesen Sie mehr 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 Haupt-Blog-Seite zuweisen oder die Dinge so beibehalten, wie sie sind, und sie nur im Menü als Ihr Blog anzeigen lassen (wo Sie es verlinken sollten), während Sie das 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!