Eine Verzeichnis-Website mit dem OllieWP-Theme erstellen

Hier ist eine Schritt-für-Schritt-Anleitung zum Erstellen einer Verzeichnis-Website mit dem Ollie-Theme für WordPress:

1. Das Ollie-Theme installieren
2. Installiere und richte GeoDirectory ein
3. Die Verzeichnis-Website mit dem OllieWP-Theme und dem Gutenberg gestalten Editor

GeoDirectory ist vollständig kompatibel mit FSE-Block-Themes wie Ollie, sodass wir in diesem Fall weder einen Page Builder noch ein zusätzliches Blocks-Plugin benötigen.

GeoDirectory bietet eine robuste und flexible Lösung zur Erstellung eines dynamischen Online-Verzeichnisses mit beliebigen Themes oder Page Buildern.

In diesem Tutorial zeigen wir, wie man eine Verzeichnis-Website mit dem OllieWP Theme in Kombination mit dem GeoDirectory-Plugin erstellt.

Dieses Duo 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
  1. Das OllieWP-Theme installieren
  2. GeoDirectory installieren
  3. GeoDirectory Installations-Assistent
     • Festlegen der Standardstadt
     • Zusatzfunktionen hinzufügen
     • Dummy-Daten hinzufügen
• Die OllieWP-Verzeichnis-Website gestalten
  1. Das Design der Startseite
     • Das Logo
     • Das Navigationsmenü
     • Der Inhalt
  2. Das Design der Listings- und Suchseite
  3. Das Design der einzelnen Listing-Seite

Theme und Plugins installieren.

1. Das OllieWP-Theme installieren

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

Gehen Sie zu Darstellung >> Themes

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

2. Installiere GeoDirectory

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.

3. 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:

1. Schlüssel aktivieren.
2. Ein neues Projekt erstellen oder ein vorhandenes auswählen.
3. Den Schlüssel abrufen.
4. Ein Abrechnungskonto aktivieren.
5. 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

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

Wir werden Philadelphia 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 Eintrags­kategorien 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 OllieWP 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 OllieWP Suite von Tools zu gestalten.

1. OllieWP 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 > Editor > Seiten > Home und klicke auf die Schaltfläche „Bearbeiten".

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.

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.

Das Navigationsmenü

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

Klicke auf die Menüs oben und entferne alle vorhandenen.

Fügen wir jetzt einen Spaltenblock mit einem Zwei-Spalten-Layout hinzu.

Füge in der linken Spalte den Website-Logo-Block hinzu.

Klicke auf den Haupt-Header-Container und lege in den Block-Einstellungen fest: Hintergrund: #FFFFF

Füge in der rechten Spalte das Navigationsmenü hinzu.

Wir haben folgende Hauptnavigations-Links und einige Unternavigations-Links hinzugefügt:

1. Home
2. Über uns
3. Blog
4. Orte und Orte hinzufügen
5. Profil
6. Login/out

Der Login/out-Block zeigt nur Login- und Logout-Links basierend auf dem Anmeldestatus des Nutzers an.

Der Inhalt

Ich werde diese Seite von Grund auf mit dem OllieWP und Gutenberg-Blöcken.

Gehen Sie zu Darstellung > Editor > Design > Seiten und klicke auf die Schaltfläche „Startseite bearbeiten".

Wir benötigen einen Hero-Header auf der Startseite – dafür entfernen wir alle Inhalte dieser Seite und fügen einen Abdecken Block hinein.

Ü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).

wir werden folgende Einstellungen in diesem Cover-Block hinzufügen

Inhalt: 1200
Breit: 100
Deckkraft: 50
Innenabstand & Außenabstand: 0
Mindesthöhe des Covers: 600

Jetzt fügen wir ein Header-Tag in diesem Cover-Block mit dem
Text: Finden Sie das beste Restaurant in Philadelphia

wir werden dem Header-Tag außerdem eine zusätzliche Klasse geben ( heading-text-center ), um etwas Stil hinzuzufügen.

Jetzt fügen wir den folgenden Stil im Theme-Customizer hinzu.

.heading-text-center{
    text-align:center;
}

Jetzt fügen wir den GD > search Block unterhalb dieser Überschrift hinzu.

darunter fügen wir mit einem Spacer-Block etwas Abstand mit einer Höhe von: hinzu 60

Jetzt fügen wir eine leere Spalte hinzu und platzieren den GD > Categories Block darin.

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 -> places -> Place Categories.

Jede Kategorie hat eine Option, um ein Standardbild festzulegen

Unterhalb des Hero-Bereichs fügen Sie eine weitere Spalte 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

Jetzt fügen wir eine leere Spalte mit Inhalt und Breite auf 100 hinzu.

Füge das GD > Map Block darin hinzufügen und die Einstellungen auf Standard belassen.

Klicken Sie auf die Fußzeile und OllieWP bietet bereits einige vorgefertigte Footer-Vorlagen an. Ich wähle eine davon aus.

Herzlichen Glückwunsch! Ihre Startseite ist fertig.

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

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

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.

Das ist ganz einfach.

Eintragsübersichtsseite

Gehe zu Appearance > Editor > Design > Templates und klicke auf Edit GD Archive Seitenvorlage

Entfernen Sie den gesamten Inhalt aus dieser GD Archive Seitenvorlage.

Jetzt fügen wir eine leere Zeile hinzu.

Füge darin ein zweispaltiges Layout ein

Im linken Container ziehen wir nun GD-Archiv-seitenbezogene Widgets wie GD > Loop Action, GD > Loop, GD > Loop Pagination, und GD > Search oben, damit der Benutzer auf der 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 100vh.

Füge den folgenden Stil im Theme-Customizer hinzu unter  Darstellung => Customize => Add CSS

.geodir-archive .geodir-listings .geodir_location_listing{
    overflow-y: scroll;
    max-height: 100vh;
    padding-right: 15px;
}

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. OllieWP Einzelseiten-Design für die Verzeichnis-Website

Um die GD-Detailseite zu bearbeiten und anzupassen, können Sie zu Appearance > Editor > Design > Templates und klicke auf Edit GD Single Seitenvorlage.

Eine leere Spalte 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 eine leere Zeile mit
Inhalt: 1200
Breit: 100

füge zwei Spalten darin 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.

Nachdem wir das erledigt haben, ist unsere Listing-Detailseite fertiggestellt.

Premium-Funktionen zu Ihrem hinzufügen OllieWP Verzeichnis-Website

Wenn Sie möchten, können Sie Ihrem Verzeichnis jetzt Premium-Funktionen hinzufügen, wie zum Beispiel:

1. Kostenpflichtige Einträge: mit dem GeoDirectory Listing Price Manager Add-on können Sie Preise für die Einreichung von Einträgen festlegen. Für jede Preisstufe können Sie Funktionen aktivieren/deaktivieren, wie z. B.: Einschränkung der Anzahl der Bilder für kostenlose Einträge bei gleichzeitig mehr Bildern für kostenpflichtige Einträge. Mehr oder weniger Tags und Kategorien erlauben. Bestimmte benutzerdefinierte Felder aktivieren oder deaktivieren. Längere oder kürzere Beschreibungen einreichen.
2. Inserate beanspruchen: Dies ist eine grundlegende Funktion für ein Verzeichnis, bei dem der Administrator die Datenbank erstellt und Unternehmensinhaber einlädt, die Kontrolle über ihre kostenlosen Einträge zu übernehmen. Der Prozess zur Übernahme eines Eintrags kann das Upgrade auf einen kostenpflichtigen Eintrag erfordern, um die Eigentümerschaft zu übernehmen.
3. Werbung: Werbung verkaufen ist eine weitere Form der Monetarisierung eines Online-Verzeichnisses. Wenn Sie viel Traffic haben, können Sie Werbenetzwerke nutzen. Andernfalls können Sie Werbeanzeigen direkt verkaufen, indem Sie Unternehmen ermöglichen, Banner in bestimmten Bereichen Ihrer Website zu platzieren, oder Einträge als Anzeigen erscheinen zu lassen, beispielsweise über den organischen Suchergebnissen.

Das sind nur drei Beispiele. Ein Verzeichnis-Website bietet jedoch viele Möglichkeiten, online Geld zu verdienen.

Sie können einen globalen Marktplatz für handgefertigte Artikel erstellen, Veranstaltungstickets verkaufen oder Rabattgutscheine anbieten.

Starte dein Verzeichnis-Website-Projekt mit diesem Tipp: Starte noch heute eine Verzeichnis-Website.

Die Möglichkeiten sind grenzenlos.