WordPress Gutenberg-Tutorial zum Erstellen einer benutzerdefinierten Website

Dies ist ein WordPress Gutenberg-Tutorial, das von Webentwicklern geschrieben wurde, die über umfangreiche Erfahrung in der Erstellung von WordPress-Websites mit dem neuen Blockeditor verfügen.

In diesem Leitfaden zeigen wir Ihnen, wie Sie eine komplexe Website erstellen, die Inhaltsvorlagen, Archive und eine benutzerdefinierte Suche enthält. Wir werden den WordPress-Blockeditor, bekannt als Gutenberg- und Toolset-Blöcke, verwenden, um die Website zu erstellen.

Warum Gutenberg jetzt eine großartige Möglichkeit ist, Websites zu erstellen

Gutenberg gibt es seit fast einem Jahr und ist ausgereift genug, dass es jetzt eine großartige und zuverlässige Möglichkeit ist, genau die Website zu entwerfen, die Sie geplant haben.

Gutenberg verwendet Blöcke, um Ihre Seiten zu erstellen. Blöcke sind Elemente, die verschiedene Arten von Inhalten enthalten, sodass Sie Ihre Layouts erstellen können.

Der Blockeditor befindet sich noch in der Entwicklung, ist aber bereits unglaublich intuitiv und flexibel. Sie müssen kein Programmierexperte sein, um Inhalte zu erstellen. Wenn Sie es außerdem mit Plugins wie Toolset Blocks kombinieren, können Sie ganz einfach komplexe Websites erstellen, die großartig aussehen.

Gutenberg ist auch auf Mobilgeräten viel einfacher zu bedienen als sein Vorgänger. Angesichts der zunehmenden Arbeit, die wir mit unseren Mobiltelefonen erledigen, ist dies ein wichtiger Schritt in die richtige Richtung.

Die besten Thementypen für Gutenberg

Es gibt eine Reihe von Premium-WordPress-Themes, die mit dem Gutenberg Block Editor kompatibel sind und auch andere Premium-Plugins unterstützen.

Sie können die besten Themen schnell durchsehen, indem Sie sich unsere Liste der WordPress-Themen ansehen, die mit Gutenberg kompatibel sind.

Das beste Block-Plugin zur Verwendung mit Gutenberg

Seit dem Start von Gutenberg vor mehr als einem Jahr wurden eine Reihe hervorragender Plugins veröffentlicht, die den neuen WordPress-Editor ergänzen.

Für unser WordPress-Gutenberg-Tutorial verwenden wir Toolset-Blöcke zusammen mit Gutenberg, um unsere WordPress-Website zu erstellen. Toolset Blocks bietet eine Reihe von Vorteilen, die es sowohl Programmierern als auch Nicht-Programmierern erleichtern, ihre Websites schnell zu entwerfen und zu implementieren:

• Ihr Arbeitsablauf wird viel einfacher . Sie brauchen Ihre Seiten jetzt nicht mehr zu entwerfen und dann umzusetzen. Sie können sie einfach auf WordPress erstellen und sofort sehen, wie sie aussehen werden.
• Sie müssen nicht zwischen Backend und Frontend wechseln . Stattdessen können Sie Ihre Vorlagen einfach im Backend entwerfen und sofort sehen, wie sie aussehen werden.
• Nicht-Entwickler können ihre Traum-Websites erstellen . Sie müssen kein Programmierexperte mehr sein, um die gewünschte Website zu erstellen. Mit Blöcken können Sie komplexe Elemente ohne HTML oder CSS einfach selbst hinzufügen.
• Verbringen Sie weniger Zeit mit dem Lesen von Dokumentationen . Die einfache und intuitive Natur von Toolset-Blöcken bedeutet, dass Sie keine Berge von Dokumentation lesen müssen, um zu verstehen, wie bestimmte Elemente erstellt werden. Viele der Blöcke beschreiben, was Sie erreichen können und können leicht verwendet und damit experimentiert werden.
• Keine weitere Integration mit Plugins von Drittanbietern . Mit dem klassischen WordPress-Editor hätten Sie einen Seitenersteller und zusätzliche kompatible Plugins installieren müssen. Dies könnte Ihre Website aufblähen und erheblich verlangsamen. Sie verlassen sich auch darauf, dass Dritte ihre Plugins aktualisieren und sicher halten. Toolset Blocks ist in Gutenberg und WordPress integriert und verursacht daher nicht die gleichen Probleme.
• Befolgen Sie den gleichen Arbeitsablauf wie der WordPress-Kern . Sie müssen sich keine Gedanken darüber machen, wie Sie mit dem neuen WordPress-Editor arbeiten.

WordPress Gutenberg-Tutorial zum Erstellen einer benutzerdefinierten Website mit Blöcken

Wir können jetzt mit dem Erstellen unserer benutzerdefinierten Website beginnen. Als Beispiel erstellen wir eine Demo-Website, mit der Sie nach dem besten Fitnessstudio oder Personal Trainer in Ihrer Nähe suchen können.

Folgendes werden wir in diesem WordPress Gutenberg-Tutorial behandeln:

• Blöcke hinzufügen, bearbeiten, verschieben und löschen
• Zeigen Sie Inhalte nebeneinander an
• Navigieren Sie durch Ihre Blöcke
• Anzeigen von Feldern in Ihren Blockeditor-Designs
• Anzeigen einer Bildergalerie
• Styling-Toolset-Blöcke im Editor
• Typografische Steuerelemente
• Erstellen einer Vorlage
• Erstellen Sie Ihre Archivseiten
• Erstellen benutzerdefinierter Inhaltslisten
• Hinzufügen einer benutzerdefinierten Suche

Lass uns anfangen!

Blöcke hinzufügen, bearbeiten, verschieben und löschen

Lassen Sie uns zuerst die Grundlagen zum Erstellen und Entfernen Ihrer Blöcke durchgehen. Blöcke sind eine völlig neue Art, Websites zu erstellen, aber es sollte nur ein paar Minuten dauern, sich daran zu gewöhnen.

1. Klicken Sie auf einer Seite oder einem Beitrag auf die Schaltfläche +.
2. Suchen Sie nach dem Block, den Sie verwenden möchten, und klicken Sie darauf, um ihn einzufügen.

3. Geben Sie Ihre Inhaltsinformationen für den Block ein. Hier haben wir beispielsweise den Block „Überschrift“ hinzugefügt und werden einen Titel dafür einfügen.
4. Auf der linken Seite jedes Blocks sehen Sie eine Reihe von Steuerelementen, mit denen Sie Ihre Blöcke verschieben können.

5. Verwenden Sie die rechte Seitenleiste, um die Optionen für den ausgewählten Block zu ändern. Sie können beispielsweise die Schriftfarbe, die Bildgröße oder die Textausrichtung ändern.
6. Wenn Sie auf die Drei-Punkte-Option klicken, sehen Sie zusätzliche Optionen wie den Block entfernen

So zeigen Sie Ihre Inhalte nebeneinander an

Sie können Ihre Inhalte einfach nebeneinander auf Ihrer Seite anzeigen, indem Sie den Spaltenblock verwenden.

1. Wählen Sie die Schaltfläche +.
2. Suchen Sie nach dem Spaltenblock und fügen Sie ihn ein.

3. Sie sehen nun zwei Spalten, zu denen Sie ganz normal Blöcke hinzufügen können.

4. Erhöhen Sie die Anzahl der Spalten, indem Sie den Spaltenblock auswählen und die Zahl auf der rechten Leiste umschalten.

Navigieren Sie durch Ihre Blöcke

Während Sie Ihre Website erstellen, werden einige Ihrer Designs und Vorlagen viele Blöcke enthalten. Eine der einfachsten Möglichkeiten, den zu bearbeitenden Block auszuwählen, besteht darin, die Blocknavigationsschaltfläche oben im Editor zu verwenden und den Block auszuwählen, mit dem Sie arbeiten möchten.

Anzeigen von Feldern in Ihren Blockeditor-Designs

Sie können Informationen aus Beitragsfeldern (Titel, Text usw.) oder aus benutzerdefinierten Feldern anzeigen, die Sie möglicherweise mit Toolset-Blöcken erstellt haben.

Es gibt drei Möglichkeiten, wie Sie Ihre Felder anzeigen können, die wir im Folgenden als Teil des WordPress Gutenberg-Tutorials skizzieren:

1. Legen Sie den Blockinhalt so fest, dass er aus Feldwerten stammt

Jeder Block in der Toolset-Blockbibliothek ermöglicht es Ihnen, seinen Inhalt aus Feldern festzulegen. Sie können beispielsweise festlegen, dass jeder Überschriftentext aus einem Beitragsfeld oder aus einem benutzerdefinierten Toolset-Feld stammt.

Sehen wir uns unten an, wie es funktioniert, indem wir Überschriftentext aus einem Beitragsfeld zum Toolset-Überschriftenblock für unsere Personal Trainer hinzufügen.

1. Erstellen Sie eine neue Inhaltsvorlage und wählen Sie aus, welchen benutzerdefinierten Beitragstyp Sie anzeigen möchten.
2. Wählen Sie die Schaltfläche +.
3. Fügen Sie den Toolset Heading-Block hinzu .

4. Aktivieren Sie den dynamischen Überschriftentext.

5. Wählen Sie das Beitragsfeld aus, das Sie anzeigen möchten. Unten habe ich den Beitragstitel ausgewählt.

Sie können nun den korrekten Titel für jeden Beitrag sehen, der sich auf einen bestimmten benutzerdefinierten Beitragstyp bezieht.

2. Felder als einzelne Blöcke anzeigen

Sie können jedes Post-Feld oder einzelne benutzerdefinierte Feld, das mit Toolset erstellt wurde, als Block anzeigen. Unten fügen wir zum Beispiel den Hauptbeitragsinhalt zu unserer Vorlage für unsere Fitnessstudios hinzu.

1. Wählen Sie den Block Einzelfeld aus .
2. Wählen Sie in der rechten Seitenleiste unter Feldtyp das Standardfeld aus .
3. Wählen Sie unter Beitragsfeld die Option Beitragsinhalt (Text) aus .

Die Beschreibung für jedes der Fitnessstudios erscheint nun in den jeweiligen Beiträgen.

3. Kombinieren Sie Felder mit Text in einem Block

Möglicherweise müssen Sie Ihren Designs eine Mischung aus Feldern und Texten hinzufügen. Beispielsweise müssen Sie möglicherweise Beschriftungen neben Ihren benutzerdefinierten Feldern hinzufügen.

1. Wählen Sie den Block Felder und Text aus.

2. Geben Sie das Label ein, das Sie hinzufügen möchten. Zum Beispiel habe ich „Bewertung“ hinzugefügt, weil ich die Ergebnisse für das benutzerdefinierte Feld Bewertung anzeigen möchte, das die Punktzahl für jedes Fitnessstudio von 5 anzeigt.

3. Wählen Sie aus den Symbolen aus, welche Art von Inhalt Sie hinzufügen möchten. Sie können ein Feld, ein Formular oder eine bedingte Ausgabe hinzufügen. In unserem Fall möchten wir ein Feld hinzufügen.

4. Wählen Sie den Inhalt aus, den Sie hinzufügen möchten (in meinem Fall ist es das Bewertungsfeld ) und klicken Sie auf Shortcode einfügen .

Zeigen Sie eine Bildergalerie an

Sie können Ihren Beiträgen auch mehrere Bilder hinzufügen, indem Sie Blöcke verwenden.

1. Wählen Sie den Block Wiederholungsfeld/Galerie aus.

2. Wählen Sie die benutzerdefinierte Feldgruppe aus, die Sie anzeigen möchten.
3. Wählen Sie das benutzerdefinierte Feld aus, das Sie anzeigen möchten.

Gestalten Sie Ihre Blöcke im Editor

Wenn Sie die Website erstellen, die Sie sich vorgestellt haben, müssen Sie Ihre Blöcke gestalten. Beispielsweise möchten Sie möglicherweise die Schriftart, die Farben, den Hintergrund oder die Ränder Ihrer Blöcke ändern.

Es gibt zwei Möglichkeiten, wie Sie Ihre Blöcke gestalten können:

1. Artikel über die Benutzeroberfläche gestalten

1. Wählen Sie den Block aus, den Sie gestalten möchten. Ich habe zum Beispiel den Bewertungsblock ausgewählt, den ich zuvor hinzugefügt habe.
2. Erweitern Sie den Abschnitt Stileinstellungen in der Seitenleiste.
3. Hier können Sie Ihre Hintergrundfarbe, Polsterung, Rahmen und vieles mehr anpassen.

Natürlich bietet jeder Block unterschiedliche Styling-Optionen. Beispielsweise enthält der Bildblock eine Reihe zusätzlicher Anpassungsfunktionen, z. B. die Möglichkeit, die Position des Bildes, die Unschärfe oder die Drehung des Bildes anzupassen.

2. Verwenden des Container-Blocks

Der Container-Block ist ein Block, den Sie nur mit Toolset-Blöcken finden können. Verwenden Sie den Container-Block, um bestimmte Blöcke zu gruppieren und jedem von ihnen bestimmte Stile zuzuweisen, die für jeden der Beiträge angezeigt werden.

Ich habe zum Beispiel einen Container-Block hinzugefügt, um alle relevanten Informationen für einen Personal Trainer zusammen in einem einheitlichen Abschnitt anzuzeigen, einschließlich Bild, Titel, Bewertung und vielem mehr. Ich kann den Container-Block jetzt so gestalten, dass jeder meiner Personal Trainer-Beiträge die gleichen Stile aufweist.

Auch hier kann ich dies tun, indem ich die Seitenleiste auf der rechten Seite verwende.

Typografische Steuerelemente

Mit Toolset-Blöcken können Sie Ihren Text mithilfe des Abschnitts „Typografie“ ganz einfach gestalten und formatieren.

Hier ist eine Liste dessen, was Sie anpassen können:

• Schriftart – Wählen Sie aus einer riesigen Auswahl an Schriftarten
• Schriftgröße, Zeilenhöhe und Buchstabenabstand
• Schriftstil
• Texttransformation – Großbuchstaben, Großbuchstaben, Kleinbuchstaben
• Textfarbe
• Textschatten

So erstellen Sie Vorlagen zum Anzeigen benutzerdefinierter Beiträge

Eine der wichtigsten Funktionen, die Sie für eine benutzerdefinierte Website erstellen müssen, ist die Vorlage. Wenn Sie eine Vorlage erstellen, bedeutet dies, dass alle Beiträge für denselben benutzerdefinierten Beitragstyp dasselbe Layout und Design haben.

Beispielsweise können wir eine Vorlage für jedes der Fitnessstudios entwerfen, die wir als Teil unseres benutzerdefinierten Beitragstyps „Fitnessstudios“ anzeigen möchten.

1. Gehen Sie zu Toolset->Dashboard und klicken Sie auf die Option Inhaltsvorlage erstellen für den Beitragstyp, für den Sie eine Vorlage entwerfen möchten.

2. Genau wie wir es zuvor getan haben, können Sie damit beginnen, Felder zu Ihrer Vorlage hinzuzufügen. Unten habe ich eine Reihe verschiedener Blöcke hinzugefügt, darunter den Block Überschrift, Bild und Einzelfeld, die alle Felder enthalten.

3. Sobald Sie Ihre Vorlage gespeichert und veröffentlicht haben, zeigt jeder Ihrer Beiträge für diesen benutzerdefinierten Beitragstyp das gleiche Layout und den gleichen Stil.

Erstellen Sie Ihre Archivseiten

Archive sind die Inhaltsliste für jeden benutzerdefinierten Beitragstyp, den WordPress für Sie generiert. Sie können Toolset Blocks und Gutenberg verwenden, um das Aussehen jeder Ihrer Archivseiten anzupassen.

Im Folgenden habe ich als Teil des WordPress-Gutenberg-Tutorials ein Archiv für meinen benutzerdefinierten Beitragstyp „Fitnessstudios“ erstellt.

1. Gehen Sie zu Toolset->Dashboard und klicken Sie auf die Option Archiv erstellen neben dem Beitragstyp, für den Sie ein Archiv erstellen möchten.

2. Im Blockeditor können Sie nun die verschiedenen Elemente hinzufügen, die Sie für jeden Ihrer Beiträge anzeigen möchten. Beispielsweise können Sie alle Ihre Standard- und benutzerdefinierten Felder (wie die Bewertungen, Adressen und Beitragstitel, die ich für meine benutzerdefinierten Beitragstypen „Fitnessstudios“ erstellt habe) mithilfe von Toolset-Blöcken anzeigen.

3. Um die Anzahl der Spalten zu ändern, klicken Sie auf die Option Blocknavigation und wählen Sie die WordPress-Archivschleife aus.
4. Unter Loop Style können Sie die Anzahl der Spalten anpassen.

5. Unter dem WordPress-Archiv-Block können Sie auch eine Reihe von Änderungen an den Standardeinstellungen für Archive vornehmen, z. B. die Paginierung, die Reihenfolge und vieles mehr.

6. Sie können auch benutzerdefinierte Texte und andere Blöcke vor oder nach der Hauptarchivschleife hinzufügen, die Ihre Beiträge anzeigen. Klicken Sie einfach auf das +-Symbol vor oder nach der Schleife, um Ihre Blöcke oder Ihren Text hinzuzufügen.

Zeigen Sie benutzerdefinierte Inhaltslisten an

Sie können Toolset Blocks und Gutenberg verwenden, um jeden Ihrer Beiträge als Liste in beliebiger Reihenfolge anzuzeigen. Sie können die Liste auch beliebig gestalten, z. B. in einem Raster, einfachem HTML, einer Tabelle oder auf andere Weise. In Toolset wird diese Art von Liste Ansicht genannt.

Diese Liste kann dann zu jeder Seite hinzugefügt werden. Zum Beispiel habe ich unten eine Liste mit vorgestellten Fitnessstudios zur Homepage hinzugefügt.

1. Klicken Sie auf der Seite, der Sie Ihre Ansicht hinzufügen möchten, auf die Schaltfläche +.
2. Fügen Sie den Views -Block hinzu und benennen Sie ihn.
3. Wählen Sie den Inhalt aus, den Ihre Ansicht anzeigen soll. Zum Beispiel möchte ich meine Fitnessstudios anzeigen.

4. Fügen Sie die Blöcke hinzu, die Sie als Teil Ihrer Ansicht anzeigen möchten.
5. Sie können die Reihenfolge bearbeiten, welche Inhalte angezeigt werden und mehr, wenn Sie auf Navigation blockieren klicken, Ihre Ansicht auswählen und die Seitenleiste verwenden.

6. Unter Ansichtsschleife können Sie eine Reihe von Einstellungen für die gesamte Ansicht ändern, einschließlich der Anzahl der Spalten.

Fügen Sie eine benutzerdefinierte Suche hinzu

Sie können Ihrer Ansicht Ihre eigene Suche hinzufügen, die es Ihren Benutzern ermöglicht, die Inhalte einzugrenzen, an denen sie im Frontend interessiert sind. Sie können beispielsweise eine Suche für Ihre Benutzer erstellen, um das beste Fitnessstudio in ihrer Nähe zu finden.

1. Fügen Sie den View -Block auf Ihrer Seite ein.
2. Aktivieren Sie die Suchoption im Assistenten zum Erstellen von Ansichten.

3. Im Bearbeitungsbereich Ansichten können Sie dann Suchfelder, Suchschaltflächen und vieles mehr hinzufügen.

4. Sie können die rechte Seitenleiste verwenden, um die Optionen für dieses Suchfeld zu optimieren. Dazu gehören die Hauptfeldeinstellungen sowie Beschriftungs- und Stiloptionen.

So sieht unsere benutzerdefinierte Suche nach dem besten Fitnessstudio im Frontend aus.

Beginnen Sie noch heute mit der Erstellung Ihrer individuellen Website!

Jetzt, da Sie die Grundlagen kennen, nachdem Sie dieses WordPress Gutenberg-Tutorial gelesen haben, können Sie mit dem Entwerfen und Erstellen Ihrer eigenen benutzerdefinierten Website beginnen. Sie können WordPress und Toolset Blocks noch heute herunterladen, um zu sehen, wie einfach es für Sie ist, Ihre eigene Website zu erstellen.

Wenn Sie irgendwelche Gedanken oder Fragen haben, lassen Sie es uns bitte in den Kommentaren unten wissen!