Eine Verzeichnis-Website mit dem OceanWP-Theme erstellen
So erstellst du eine Verzeichnis-Website mit OceanWP?
Hier ist eine Schritt-für-Schritt-Anleitung zum Aufbau einer Verzeichnis-Website mit dem OceanWP Theme:
- Installiere das OceanWP Theme
- Installiere und richte GeoDirectory ein
- Installiere das Spectra Gutenberg Blocks Plugin
- Gestalte die Verzeichnis-Website mit dem OceanWP Theme und dem Gutenberg Editor
Das OceanWP Theme in Kombination mit dem GeoDirectory Plugin und einem Gutenberg Blocks 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.
1. Das OceanWP Theme installieren
Wir müssen ein Theme installieren, und für dieses Tutorial installierst du das OceanWP Theme.
Gehen Sie zu Darstellung >> Themes
Wählen Sie „Neu hinzufügen Installieren, und Aktivieren das OceanWP Theme.
2. Spectra Blocks Plugin installieren
Das Standard-Gutenberg-Plugin reicht nicht aus, um ein Template zu gestalten, daher installieren wir das Spectra Blocks Plugin. (Schau dir dieses Tutorial an, wenn du stattdessen eine Verzeichnis-Website mit dem Astra Theme und dem Spectra Plugin erstellen möchtest)
Dieses Plugin bietet angepasste Gutenberg-Blöcke, die besser als die Standard-Blöcke sind und dir helfen, die Seitenvorlagen zu gestalten.
Gehen Sie zu Plugins >> Neu hinzufügen.
Suche nach Spectra Blocks. Installiere 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
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.
Die OceanWP-Verzeichnis-Website gestalten
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 OceanWP Theme beginnen.
1. Design der Startseite der OceanWP-Verzeichnis-Website
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.
Für ein erstes MVP (Minimum Viable Product) ist ein mit Canva erstelltes Logo völlig ausreichend.
Canva bietet eine Fülle von Logo-Vorlagen, und es ist völlig in Ordnung, wenn Ihr erstes Logo nicht Perfektion oder Originalität verkörpert.
Während Ihr Projekt Fahrt aufnimmt, haben Sie jederzeit die Möglichkeit, Ihr Logo zu verfeinern oder vollständig zu überarbeiten.
Denken Sie daran: Der Erfolg eines Projekts hängt nicht von der Perfektion seines Logos ab.
Gehen Sie jetzt zu Darstellung > Customize > Header > Logo, klicken Sie auf Logo auswählen und laden Sie Ihre PNG-Datei hoch. Überspringen Sie das Zuschneiden (oder schneiden Sie das Bild nach Bedarf zu) und klicken Sie auf Veröffentlichen. Sie können auch die maximale Höhe und Breite des Logos festlegen, wenn Ihr Logo größer ist.
Das Navigationsmenü
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
- Suchseite
- Anmelden
- Account > Profile > Forgot Password > 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: Red Hat Text und Schriftgewicht: Normal: 400
und in den Einstellungen Appearance > Customiser > Typography > Hauptmenü werden wir Schriftgewicht: Medium 500, Schriftgröße: 13px
Jetzt gehen wir zu Appearance > Customiser > General Options > General Styling Primärfarbe: #ff914d und Primärfarbe beim Hover: #ff731c
Der Inhalt
Ich werde diese Seite von Grund auf mit dem Spectra Blocks-Plugin aufbauen.
Wir benötigen einen Hero-Header auf der Startseite – dazu fügen wir einen Container-Block hinzu, der vom Spectra Blocks-Plugin bereitgestellt wird.
aus.
Für den Hero-Bereich benötigen wir ein Bild, das wir kostenlos herunterladen von Pexels.com (Danke, @Kelly).
Klicken Sie auf den hinzugefügten Abschnitt und wählen Sie in der Option Inhaltsbreite die Option Volle Breite aus, wie im folgenden Screenshot beschrieben.
Wählen Sie im Style-Tab der Container-Block-Einstellungen Repeat zu No Repeat und Size zu Abdecken.
Ein Überschriften-Element per Drag-and-Drop in das Hero-Bild ziehen.
Jetzt ist es an der Zeit, unserem Homepage-Hero-Bild einen Titel zu geben.
Ändern Sie im Tab „Stil#FFFFFF) um den Kontrast und die Lesbarkeit zu verbessern.
In diesem Tutorial verwende ich etwas Einfaches wie „Finde die besten Restaurants in New York
Vergiss nicht, den Text mit der Ausrichtungsoption zu zentrieren.
Um die GD-Suche in der Homepage-Kopfzeile hinzuzufügen, ziehen Sie den GD > Search Block in den Hero-Container.
Füge diesem Hero-Container als Nächstes eine Mindesthöhe hinzu. Ich werde sie auf 650 x 600 px in Breite und Höhe festlegen und außerdem die Containerbreite anpassen: Boxed und Inhaltsbreite: Boxed.
Es ist Zeit, diesen Seitentitel und den zusätzlichen Abstand im Header-Bereich zu entfernen.
Klicken Sie auf das O-Symbol oben rechts auf der Seite und klicken Sie einfach darauf. Stellen Sie darin im Bereich „Allgemein padding: deaktiviert ein und wählen Sie unter „Titel Titel: deaktiviert
Es ist Zeit, einige weitere erforderliche Abschnitte auf der Startseite hinzuzufügen. Ich werde jetzt einen Bereich für aktuelle Einträge hinzufügen.
Unterhalb des Hero-Bereichs fügen Sie eine weitere container 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 einen CTA hinzu, um Geschäftsinhaber dazu zu bewegen, ihre Unternehmen einzutragen. Wir fügen einen leeren Container hinzu und nehmen Einstellungen in den Stiloptionen vor.
Lassen Sie uns einen Hintergrund festlegen.
Lassen Sie uns nun die Container-Stile hinzufügen:
Overlay-Typ: Farbe
Bild-Overlay-Farbe: #FF6900
Overlay-Deckkraft: 0.3
Container-Breite: Volle Breite
Inhaltsbreite: Boxed
Jetzt fügen wir auch einen Call To Action Block von Spectra in diesen Container ein.
Typografie für den CTA-Bereich.
Farbe: #fffff
Schriftgröße: 32px
Lassen Sie uns dem Button etwas Stil verleihen.
Textfarbe: #000000
Hintergrundfarbe: #FFFFFF
Radius: 30px alle Seiten
Innenabstand (Padding): 10px, 30px, 10px, 30px
Lassen Sie uns den Button-Text ändern in Eintrag hinzufügen und den Link zur Seite „Eintrag hinzufügen
Unser CTA-Bereich ist nun fertig. Wir fügen noch einen weiteren Bereich hinzu – den GD > Categories Bereich darunter.
Die Einstellungen lauten wie folgt
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
Und damit kommen wir nun zum letzten Bereich für die Anzeige von Social-Media-Links. Wir nennen ihn STAY IN TOUCH.
Fügen Sie einen neuen leeren Container mit Hintergrund hinzu #000000.
Jetzt fügen wir eine Überschrift in diesem Container hinzu mit Ausrichtung: Zentriert und Überschrift: H3
Ich füge den Text hinzu „Stay in Touch
Farbe: #ffffff
Schriftgröße: 24px
Fügen wir nun darunter einen Absatz hinzu, um etwas Text einzufügen.
Stil hinzufügen
Textfarbe: #ffffff
Größe: Klein
Jetzt fügen wir darunter den Social-Icons-Block hinzu.
Fügen Sie in diesem Social-Icons-Block den folgenden Stil hinzu
Größe: 15px
Hintergrundgröße: 10px
Rahmenradius: 100
Farbe: #ffffff
Herzlichen Glückwunsch! Ihre Startseite ist fertig.
2. OceanWP Verzeichnis-Website Listings- und Suchseiten-Design
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
Gehen Sie zu Geodirectory > Einstellungen > Allgemein > Seiten > Klicken Sie auf „GD-Archiv-Seitenvorlage bearbeiten
Entfernen Sie den gesamten Inhalt aus dieser GD Archive Seitenvorlage.
Fügen Sie jetzt einen Container 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 100vh.
Stellen Sie nun einfach den Hauptcontainer auf volle Breite ein, indem Sie die nachstehenden Anweisungen im Bild unten befolgen.
Jetzt setzen wir das Archivseiten-Template auf volle Breite
Wir werden außerdem den Header-Stil-Bereich für alle Seiten über Theme Customizer > Allgemeine Optionen > Allgemeine Einstellungen anpassen.
mit Stil
Überschriftenstil: Zentriert
Innenabstand (Padding): 20px
Hintergrundfarbe: #1e73be
Textfarbe: #ffffff
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. OceanWP Verzeichnis-Website Einzelnes Listing-Seiten-Design
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 einen neuen Container hinzufügen.
Zuerst fügen wir oben auf der Listing-Detailseite einen Bild-Slider hinzu. Wir ziehen den GD > Post Image Block in diesem Container.
Passen Sie im GD > Bild-Block die folgenden Einstellungen an.
Bildlimit: 50
Limit anzeigen: 2
Fügen wir nun einen weiteren Container unterhalb dieses Containers hinzu, in dem wir weitere erforderliche Blöcke der Geodirectory-Detailseite.
Fügen wir nun alle erforderlichen GD-Detailseiten-Shortcodes hier nacheinander hinzu. Dazu gehören GD > Single Taxonomies, GD > Single Tabs, GD > Single Next Prev.
Jetzt ist es an der Zeit, einige Sidebar-Widgets hinzuzufügen. Dazu gehen wir zu wp-admin > Darstellung > Widgets.
Füge das Widget GD > Autoren-Aktion in der Haupt-Sidebar hinzu. Dieses Widget bietet eine Bearbeiten, Löschen -Option für den Eintrag.
Ein weiteres Widget hinzufügen GD > Output Location. Dieses Widget zeigt alle wichtigen Eintragsdetails an, die für die Anzeige auf der Detailseite markiert wurden.
Danach ist unsere Listing-Detailseite fertiggestellt.
Premium-Funktionen zu deiner OceanWP-Verzeichnis-Website hinzufügen
Wenn Sie möchten, können Sie Ihrem Verzeichnis jetzt Premium-Funktionen hinzufügen, wie zum Beispiel:
- 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.
- 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.
- 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.
Hebe deine Verzeichnis-Website mit dieser Anleitung von der Masse ab: Eine professionelle Verzeichnis-Website erstellen.
Die Möglichkeiten sind grenzenlos.
Newsletter – Bleiben Sie auf dem Laufenden!
Erhalten Sie die neuesten Nachrichten, Tipps und exklusive Inhalte direkt in Ihrem Posteingang.
