Eine Verzeichnis-Website mit dem Generatepress-Theme erstellen

Naveen Giri

3 years ago

Hier ist eine Schritt-für-Schritt-Anleitung zum Erstellen einer Verzeichniswebsite mit dem Generatepress Theme und dem Generatepress Blocks-Plugin:

Das Generatepress Theme installieren
Installiere und richte GeoDirectory ein
Installieren Sie das GenerateBlocks Plugin
Gestalten Sie die Verzeichnis-Website mit dem Generatepress Theme und dem Gutenberg Editor

Generatepress Theme in Kombination mit dem GeoDirectory-Plugin und einem GenerateBlocks Plugin bietet eine robuste und flexible Lösung für die Erstellung eines dynamischen Online-Verzeichnisses.

Dieses Trio ermöglicht es Nutzern, standortbasierte Funktionen nahtlos zu integrieren, Layout-Designs anzupassen und interaktive Inhaltsblöcke einzubinden – für ein intuitives und ansprechendes Nutzererlebnis.

Mit diesem integrierten Ansatz können Webentwickler und Designer mühelos eine professionelle Verzeichnis-Website erstellen, die auf spezifische Nischenmärkte oder breite Community-Bedürfnisse zugeschnitten ist.

Schauen wir uns das im Detail an.

In diesem Tutorial werden wir:

Theme und Plugins installieren und einrichten
Die Generatepress-Verzeichniswebsite gestalten

Theme und Plugins installieren.

1. Das Generatepress Theme installieren

Wir müssen ein Theme installieren, und für dieses Tutorial installierst du das Generatepress Theme.

Gehen Sie zu Darstellung >> Themes

Wählen Sie „Neu hinzufügen Installieren, und Aktivieren das Generatepress Theme.

2. Installieren GenerateBlocks Plugin

Das Standard-Gutenberg-Plugin reicht nicht aus, um eine Vorlage zu gestalten, daher installieren wir das GenerateBlocks Plugin erstellen.

Dieses Plugin bietet angepasste GenerateBlocks die besser als die Standard-Blöcke sind und Ihnen helfen, die Seitenvorlagen zu gestalten.

Gehen Sie zu Plugins >> Neu hinzufügen.

Suche nach GenerateBlocks. Installiere es und aktiviere es.

Sie können alle Schritte des Setup-Assistenten überspringen.

3. GeoDirectory installieren

Abschließend musst du GeoDirectory.

Gehen Sie zu Plugins >> Neu hinzufügen, suche nach GeoDirectory. Bitte installiere und aktiviere es – damit ist die Plugin-Installation abgeschlossen.

4. GeoDirectory Installations-Assistent

Für GeoDirectory müssen Sie den Setup-Assistenten abschließen, um den Google Maps API-Schlüssel zu konfigurieren und einige Beispieleinträge zu importieren.

Auswahl des Kartensystems (Google Maps oder OpenStreetMap)

Im ersten Schritt des Assistenten können Sie zwischen zwei Kartensystemen wählen: Google Maps und Open Street Maps (für das kein API-Schlüssel erforderlich ist).

In diesem Tutorial wählen wir OpenStreetMaps.

Falls Sie Google Maps auswählen möchten, führen Sie die folgenden zusätzlichen Schritte durch.

Klicken Sie auf die Schaltfläche „Schlüssel generieren Dokumentation um einen gültigen API-Schlüssel zu generieren.

Die wesentlichen Schritte sind:

Schlüssel aktivieren.
Ein neues Projekt erstellen oder ein vorhandenes auswählen.
Den Schlüssel abrufen.
Ein Abrechnungskonto aktivieren.
Den API-Schlüssel einschränken (damit er nur von der URL Ihrer Website verwendet werden kann)

Zu Punkt vier: Dies ist eine Voraussetzung. Sie werden jedoch nur belastet, wenn Sie den Schwellenwert überschreiten, der bei 200 $/Monat liegt.

Dieses kostenlose Guthaben reicht für 99 % aller Verzeichnisse mehr als aus.

Festlegen der Standardstadt

Standardstadt des Verzeichnisses festlegen

Danach legst du den Standardstandort fest. Dies ist die Stadt, für die das Verzeichnis erstellt wird.

Wir werden New York als Standardstadt festlegen.

Sie können jeden beliebigen Standort verwenden.

Wenn Sie Einträge in mehr als einer Stadt hinzufügen möchten, benötigen Sie das Location Manager-Add-on.

Zusatzfunktionen hinzufügen

In diesem Schritt installieren wir UsersWP, ein Benutzer-Login-Plugin das es Benutzern ermöglicht, sich auf Ihrer Website zu registrieren und anzumelden.

Dies ist erforderlich, damit Benutzer ihre Einträge hinzufügen und bearbeiten können. Außerdem werden Benutzerprofile erstellt, in denen sie ihre Einträge, Bewertungen und vieles mehr finden können.

Wir werden auch Ninja Forms installieren, damit alle Einträge ein Kontaktformular haben, das E-Mails direkt an die Eintragsinhaber sendet.

AyeCode Connect ist für dieses Tutorial nicht zwingend erforderlich. Es wird hauptsächlich benötigt, wenn Sie GeoDirectory-Premium-Add-ons hinzufügen und direkt über das WordPress-Dashboard installieren möchten.

Dummy-Daten hinzufügen

Der letzte Schritt zum Abschluss des Installationsassistenten besteht darin, einige Beispieleinträge hinzuzufügen. Dabei werden auch Eintragskategorien angelegt, die Sie später nach Bedarf bearbeiten können.

Sie fügen jetzt noch keine Sidebar-Widgets und Menüelemente hinzu, da wir das später erledigen werden.

Gestalten Sie die Generatepress Verzeichnis-Website

Nachdem wir das Theme und die Plugins installiert und die grundlegende Einrichtung von GeoDirectory abgeschlossen haben, können wir mit der Gestaltung unserer Verzeichnis-Website mit dem Generatepress Suite von Tools zu gestalten.

1. Generatepress Design der Verzeichnis-Startseite

Sie können eine neue Seite erstellen oder eine verwenden, die WordPress standardmäßig anlegt, wie z. B. die Beispielseite.

Gehen Sie zu Seiten, bearbeiten Sie die Beispielseite und benennen Sie sie in „Home

Gehe dann zu Darstellung > Customize > Startseiten-Einstellungen und wähle deine Startseite aus.

Das Logo

Zunächst das Wichtigste: Wir benötigen ein Logo für unsere Website.

Sie müssen keinen Designer beauftragen, um die erste Version Ihres Logos zu entwerfen.

Einer der größten Fehler beim Start eines neuen Verzeichnisses ist es, zu viel Zeit und Geld zu investieren, bevor man die Marktreife des Produkts getestet hat.

Mit einer App wie Canva können Sie in fünf Minuten ein Logo gestalten – kostengünstig und überraschend gut.

Erstellen Sie Ihren ersten Logo-Entwurf mit Canva.com

Für ein MVP (Minimum Viable Product) ist ein mit Canva gestaltetes Logo mehr als ausreichend.

Es gibt zahlreiche Logo-Vorlagen zur Auswahl, und es spielt keine Rolle, ob Ihr erstes Logo nicht so perfekt und einzigartig ist, wie Sie es sich vorstellen.

Wenn Ihr Projekt an Fahrt gewinnt, können Sie später jederzeit in eine Verbesserung oder einen kompletten Neuentwurf investieren.

Ein durchschnittliches Logo ist nie der Hauptgrund für das Scheitern eines Projekts.

Nachdem du dein Logo erstellt hast, gehe zu Darstellung > Customize > Header, klicken Sie auf Logo > Logo auswählen, und laden Sie Ihre PNG-Datei hoch. Zuschneiden überspringen (oder das Bild nach Bedarf zuschneiden), wählen Sie unter Logo-Layout die Option Logo aus und klicken Sie auf Veröffentlichen.

Nachdem Sie das Logo erstellt und hinzugefügt haben, gehen Sie zu Darstellung > Menüs, und erstellen Sie Ihr Menü.

Fügen Sie die benötigten Links hinzu (von der linken Spalte in die rechte Spalte) und speichern. Im Menü-Einstellungen > Abschnitt „Anzeigeort, du kannst die „Haupt„-Option auswählen.

If you want, you can make the same menu appear on the footer or create another menu to appear there.

In diesem Beispiel haben wir nur das Header-Navigationsmenü.

Wir haben sieben Hauptnavigationslinks und einige Unternavigationslinks hinzugefügt:

Home
Über uns
Blog
Orte und Orte hinzufügen
Profil
Anmelden
Logout

Der Login-Link (aus UsersWP-Endpunkten) wird nur für abgemeldete Benutzer angezeigt, während die Abmelde-, Konto- und Profillinks nur für angemeldete Benutzer sichtbar sind.

Die Typografie

Legen wir nun die Typografie für Schriftart und -größe des Website-Textes fest. Ich lege eine globale Schriftfamilie, Schriftstärke und Schriftgröße fest, die auf den gesamten Website-Text angewendet wird.

gehen wir zu Darstellung > Customiser > Typografie > Body. Wir werden die Schriftfamilie: Poppines Kategorie: sans-serif und Variante: 100, 100italic, 200, 200italic, 300, 300italic, regular, italic, 500, 500italic, 600, 600italic, 700, 700italic, 800, 800italic, 900, 900italic

Typografie-Schriftart und -Größe festlegen

Der Inhalt

Ich werde diese Seite von Grund auf mit dem GenerateBlocks Plugin erstellen.

wir benötigen einen Hero-Header auf der Startseite – dazu fügen wir einen Grid-Block hinzu, der vom GenerateBlocks Plugin erstellen.

Leere Startseite mit nur einem Abschnitt aus einer Spalte

wir werden die Blockausrichtung auf breit.

In den Grid-Einstellungen setzen Sie die Layout-Einstellung auf
Sidebar-Layout: Keine Sidebars
Footer-Widget: Standard
Inhalts-Container: Volle Breite
Element deaktivieren: Inhaltstitel
Grid-Element-Breite: 100

Überprüfe anschließend die Block-Einstellungen und lege die Hintergrundbild-URL fest.

Für den Hero-Bereich benötigen wir ein Bild, das wir kostenlos herunterladen von Pexels.com (Danke, @rachel-claire).

In der Abstandseinstellung Innenabstand (Padding) 100px an den oberen und unteren Außenabständen (Margins).

Fügen wir nun ein Header-Tag hinzu, um etwas Text einzufügen.

Text:: Finden Sie die besten Restaurants in Philadelphia
Größe: Klein
Erscheinungsbild: Klein Fett
Textfarbe: #FFFFFF

Innerhalb desselben Grids fügen wir den GD > Search Block mit einem Innenabstand (Padding) von oben und unten von 200px hinzu.

Jetzt fügen wir ein leeres Grid unterhalb des Hero-Headers hinzu und fügen den GD > Categories Block in dieses Grid ein.

Blockoptionen wie folgt festlegen
Design-Typ: Bildhintergrund
Zeilenelemente: 3
Kategoriebild verwenden aktivieren

Sie können einer Kategorie ein Bild zuweisen, indem Sie die Kategorie über wp-admin -> Orte -> Ortskategorien bearbeiten.

Jede Kategorie hat eine Option, um ein Standardbild festzulegen

Ich habe in Generateblocks keine funktionierende Einstellung gefunden, um das Grid in das Inhaltslayout umzuwandeln. Wir werden den home-container Klasse zum übergeordneten Kategorie-Grid hinzufügen.

Unterhalb des Hero-Bereichs fügen Sie eine weitere Grid hinzu, indem Sie auf das Plus-Symbol klicken, und fügen Sie den GD > Listings Block dort hinzu.

Jetzt nehmen wir einige notwendige Einstellungen in diesem GD > Listings Block vor. Wir setzen die Sortierung auf: Neueste

Einstellungen des GD Listings Blocks auf der Startseite

Ähnlich wie beim Kategorieblock werden wir den home-container Klasse zum übergeordneten Grid der zuletzt erstellten Einträge hinzufügen.

Fügen wir nun ein leeres Grid hinzu und fügen darin einen GD > Map-Block ein, wobei wir die Einstellungen auf Standard belassen.

Ähnlich wie bei den anderen werden wir den home-container Klasse zum GD > Karten-übergeordneten Raster hinzufügen.

Fügen Sie abschließend das folgende CSS im Theme-Customizer hinzu von Darstellung => Customize => Add CSS

.home-container{
	max-width:1200px;
	margin:auto;
}

Herzlichen Glückwunsch! Ihre Startseite ist fertig.

2. Generatepress Design der Eintrags- und Suchseite für Verzeichnis-Websites

Now you need to design two pages that are essential for any directory.

The listings page (general archive, categories, tags), and the search results page.

GeoDirectory erstellt diese standardmäßig mit einem allgemeinen Layout. In diesem Tutorial passen wir das Layout dieser Seiten etwas an.

Die Eintragsübersichts- und die Suchseite sind größtenteils identisch, daher erstellen wir das Layout einmal und kopieren es einfach auf die andere Seite.

Wir haben entschieden, dass das Layout der Listing-Seite die Einträge auf der linken Seite zeigt und auf der rechten Seite eine fixierte Karte mit den genauen Standorten der Einträge.

Eintragsübersichts- und Suchseite inspiriert vom Airbnb-Suchlayout

Das ist ganz einfach.

Eintragsübersichtsseite

Gehen Sie zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicken Sie auf „GD-Archiv-Seitenvorlage bearbeiten

Entfernen Sie den gesamten Inhalt aus dieser GD Archive Seitenvorlage.

wir werden die Seiteneinstellung auf Folgendes setzen
Sidebar-Layout: Keine Seitenleiste
Footer-Widget: Standard
Inhalts-Container: Volle Breite

Fügen Sie jetzt ein leeres Raster mit zwei Spalten hinzu.

Jetzt ziehen wir im linken Container archivseiten-bezogene GD-Widgets wie GD > Loop Action, GD > Loop, GD > Loop Pagination und GD > Search nach oben, damit der Benutzer über die Archivseite suchen kann.

In der rechten Spalte ziehen wir den GD > Map Block hinein.

Alle Einstellungen für den GD > Mapbelassen wir auf den Standardwerten. Geben wir ihm eine bestimmte Höhe – ich habe mich für eine Höhe von 150vh.

Um das Layout der Archivseite in voller Breite darzustellen, fügen wir das folgende CSS im Theme-Customizer hinzu von Darstellung => Customize => Add CSS

.geodir-archive .container.grid-container{
      max-width:100%;
}
.geodir-archive .wp-block-geodirectory-geodir-widget-loop .geodir-loop-container .geodir-listing-posts{
    overflow-y: scroll;
    max-height: 100vh;
}

Danach ist die Listing-Archiv-Seite fertig.

Eine weitere Option ist die Verwendung des GD > Simple Archive-Blocks, wie in diesem Tutorial erklärt, wie man Build a Directory Website with Elementor.

Für die Suchseite wiederholen wir denselben Vorgang.

Suchseite

Gehe zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicke auf GD-Suchseiten-Vorlage bearbeiten

Entfernen Sie den gesamten Inhalt aus dieser GD Search Seitenvorlage.

Kopiere den gesamten Inhalt der GD-Archivseite und füge ihn in die GD-Suchseite ein.

Unsere GD-Such- und Archivseite ist jetzt fertig.

3. Generatepress Einzelseiten-Design für die Verzeichnis-Website

Um die GD-Detailseite zu bearbeiten und anzupassen, können Sie zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicke auf GD-Detailseiten-Vorlage bearbeiten.

In dieser Vorlage finden Sie bereits von Geodirectory generierten Standardinhalt.

wir werden alle diese Standardinhalte entfernen und ein neues Raster hinzufügen.

Zuerst fügen wir oben auf der Listing-Detailseite einen Bild-Slider hinzu. Wir ziehen den GD > Post Image Block in diesen Container mit den folgenden Einstellungen

Bildlimit: 10
Anzeigelimit: 3
Ausgabetyp: Slider
Autostart: Aktivieren

Jetzt fügen wir darunter einen weiteren leeren Rasterblock mit einem zweispaltigen Layout hinzu.

wir fügen eine Klasse (single-details-container ) zu diesem Raster über die Blockeinstellungen hinzu.

Jetzt fügen wir alle erforderlichen GD-Detailseiten-Shortcodes nacheinander in die linke Spalte ein.

Dazu gehören GD > Single Taxonomies, GD > Single Tabs und GD > Single Next Prev.

In der rechten Spalte fügen wir GD > Author Action und GD > Output Location Block hinein.