So erstellen Sie eine herausragende Verzeichnis-Website mit dem Blockstrap-Theme und seinem Directory Child-Theme
Kürzlich haben wir Blockstrap entwickelt – ein Plugin (das die Seitenbausteine bereitstellt) und gleichzeitig ein Block-Theme (FSE – Full Site Editing), das die Leistungsfähigkeit des neuen Site-Editors von WordPress mit Bootstrap 5 verbindet.
Wir haben Blockstrap als Framework für unsere neue Generation von Directory-Themes entwickelt, die bald ein allgemeines Business-Verzeichnis und ein Events-Theme, ein Immobilien-Theme, ein Jobboard-Theme, ein Kleinanzeigen-Theme und viele weitere Directory-Templates für WordPress umfassen werden,
All diese Themes sind speziell dafür konzipiert, eine pixelgenaue Verzeichnis-Website mit GeoDirectory zu erstellen.
In diesem Tutorial findest du eine Schritt-für-Schritt-Anleitung zum Erstellen einer Verzeichnis-Website mit dem Blockstrap-Theme, dem Directory-Child-Theme und unserem GeoDirectory-Plugin:
- Installiere das Blockstrap-/Directory-Theme
- Installiere und richte GeoDirectory ein
- Gestalte die Verzeichnis-Website mit dem Block-Theme-Builder
In dieser Anleitung zeigen wir dir, wie du mit dem Directory-Theme und dem GeoDirectory-Plugin ein ansprechendes Online-Verzeichnis erstellst.
Mit diesem Setup kannst du ganz einfach standortbasierte Funktionen hinzufügen, deine Website großartig aussehen lassen und verschiedene Arten von Inhalten einbinden, die sich dynamisch ändern.
Für den Moment halten wir die Dinge jedoch einfach und leicht verständlich.
In diesem Tutorial behandeln wir:
- Theme und Plugins installieren und einrichten
- Die Blockstrap-/Directory-Verzeichnis-Website gestalten
Theme und Plugins installieren.
1. Installiere das Blockstrap-Theme und sein Directory-Child-Theme
Zuerst installieren wir das Directory Theme. Da es ein Child-Theme von Blockstrap ist, wird das Haupttheme automatisch ebenfalls installiert.
Die Installation des Blockstrap-Themes fordert dich auch dazu auf, das Blockstrap-Plugin zu installieren.
Das Blockstrap-Plugin ist unser Page-Builder und wird benötigt, um die Sammlung von Blockstrap-Blöcken hinzuzufügen und das Design deiner Verzeichnis-Website.
Falls du dich über die drei 1-Stern-Bewertungen für das Theme wunderst: Bitte beachte, dass diese Bewertungen eine sehr alte Version dieses Themes betreffen, die von anderen Entwicklern erstellt wurde – nicht die aktuelle Version. Wir haben das ursprüngliche „Directory"-Theme und seine URL (wordpress.org/themes/directory/) erworben, weil uns das Konzept gefiel und wir es für unser neues Produkt nutzen wollten. Leider bedeutete das auch, dass wir die alten negativen Bewertungen geerbt haben.
Du kannst auf deiner WordPress-Website und von
WP-Admin >> Darstellung >> Themes >> Add Newaus: Suche nach Directory und installiere die erste Theme-Option.
2. Installiere GeoDirectory
Folge diesen Schritten:
- Gehe zu „Plugins" und dann zu „Neu hinzufügen".
- Suche nach GeoDirectory.
- Installiere und aktiviere es.
Das war's! Die Plugins sind jetzt alle eingerichtet.
3. GeoDirectory Installations-Assistent
Für GeoDirectory musst du den Einrichtungsassistenten abschließen, um den Google Maps API-Schlüssel zu konfigurieren und einige Beispiel-Listings zu importieren.
Auswahl des Kartensystems (Google Maps oder OpenStreetMap)
Im ersten Schritt der Einrichtung wählst du zwischen zwei Kartensystemen: Google Maps und OpenStreetMaps. In dieser Anleitung verwenden wir OpenStreetMaps.
Falls du Google Maps bevorzugst, sind einige zusätzliche Schritte erforderlich:
- Klicke auf die Schaltfläche „Schlüssel generieren" und folge den hier angegebenen Anweisungen, um einen gültigen API-Schlüssel zu erstellen.
- Dies sind die wichtigsten Schritte:
- Schlüssel aktivieren.
- Erstelle ein neues Projekt oder wähle ein vorhandenes aus.
- Den Schlüssel abrufen.
- Ein Abrechnungskonto einrichten.
- Den API-Schlüssel einschränken (damit er nur von der URL deiner Website aus funktioniert).
Schritt vier ist entscheidend, aber du zahlst nur, wenn du 200 $ pro Monat überschreitest. Das kostenlose Guthaben deckt jedoch in der Regel den Bedarf der meisten Verzeichnisse.
Kommen wir nun zur Einstellung der Standardstadt.
Festlegen der Standardstadt
Anschließend wählen Sie den Standardstandort aus, also die Hauptstadt, die im Verzeichnis angezeigt wird.
Wir haben uns für Philadelphia als Standardstadt entschieden, aber Sie können natürlich jeden beliebigen Ort wählen.
Wenn Sie ein Verzeichnis erstellen, das mehrere Städte umfasst, benötigen Sie das Location Manager Add-on.
Zusatzfunktionen hinzufügen
In diesem Schritt richten wir UsersWP ein, ein Plugin für die Benutzerregistrierung. Damit können sich Benutzer auf Ihrer Website registrieren und anmelden.
UsersWP ist unverzichtbar, damit Benutzer ihre Einträge verwalten, Profile erstellen und auf Funktionen wie Bewertungen zugreifen können.
Außerdem installieren wir Ninja Forms, das allen Einträgen Kontaktformulare hinzufügt. Diese Formulare senden E-Mails direkt an die Inhaber der Einträge. (HINWEIS: BlockStrap verfügt über ein einfaches Kontaktformular, das hierfür verwendet werden kann. Ninja Forms ist nützlich für komplexere Formulare)
Beachten Sie, dass AyeCode Connect für dieses Tutorial nicht erforderlich ist, es sei denn, Sie möchten Premium-GeoDirectory-Add-ons direkt über Ihr WordPress-Dashboard hinzufügen.
Dummy-Daten hinzufügen
Der letzte Schritt im Installationsassistenten besteht darin, einige Beispieleinträge hinzuzufügen. Dabei werden auch Kategorien für die Einträge erstellt, die Sie jedoch jederzeit nach Belieben ändern können.
Gestalten Sie die Blockstrap/Directory Theme Verzeichnis-Website
Nachdem wir das Theme und die Plugins installiert sowie die grundlegende Einrichtung von GeoDirectory abgeschlossen haben, können wir mit der Gestaltung unserer Verzeichnis-Website beginnen.
Unser Blockstrap's Child-Theme namens Directory Theme bietet bereits eine vorgefertigte Block-Vorlage für GeoDirectory-Seiten.
In diesem Artikel passen wir diese vorgefertigten Vorlagen direkt an.
1. Blockstrap/Directory Startseiten-Design
So passen Sie das Startseiten-Design an.
Gehen Sie zu Darstellung >> Editor >> Auf Vorlagen klicken
Wählen Sie jetzt die Vorlage für die Startseite aus und klicken Sie auf das Bearbeiten-Symbol.
Bevor wir die Startseiten-Vorlage bearbeiten, erstellen wir zunächst ein Logo für die Website.
1. Das Logo
Zuallererst benötigen wir ein Logo für unsere Website.
Sie müssen keinen Designer beauftragen, um die erste Version Ihres Logos zu erstellen.
Einer der größten Fehler, den Sie beim Start eines neuen Verzeichnisses machen können, ist, zu viel Zeit und Geld zu investieren, bevor Sie getestet haben, ob Menschen das, was Sie aufbauen möchten, überhaupt brauchen.
Mit einer App wie Canva können Sie in nur fünf Minuten ein Logo erstellen – die App ist großartig und kostenlos (oder günstig für das, was sie bietet, wenn Sie sich für einen Premium-Plan entscheiden).
Für eine Basisversion Ihres Produkts (auch MVP oder Minimum Viable Product genannt) ist ein mit Canva erstelltes Logo völlig ausreichend.
Es gibt zahlreiche Logo-Vorlagen zur Auswahl, und es ist völlig in Ordnung, wenn Ihr erstes Logo nicht perfekt oder besonders einzigartig ist.
Wenn Ihr Projekt gut läuft, können Sie das Logo jederzeit verbessern oder später komplett erneuern.
Ein einfaches Logo ist selten der Grund, warum ein Projekt scheitert.
Wir verwenden dieses Logo, wenn wir den Header der Website erstellen.
Der Header
Jetzt fügen wir dieses Logo-Bild hinzu, indem wir den entsprechenden Block auf der linken Seite auswählen, wie im Screenshot unten gezeigt.
Jetzt fügen wir einige erforderliche Menüpunkte hinzu, zum Beispiel Home, Places, und Blog, Kontakt und Über uns in unserem Fall.
Sie können den BS > Nav item Block verwenden, um den neuen Menüpunkt hinzuzufügen.
PROFI-TIPP: Wenn Sie sich für einen transparenten Header auf der Startseite entscheiden, müssen Sie das Logo sowohl zum regulären Header als auch zum transparenten Header hinzufügen.
Der Inhalt
So sieht die Standard-Startseite mit dem Blockstrap's Directory Child Theme.
Sie wirkt bereits in sich vollständig, aber wir werden einige kleinere Änderungen vornehmen.
Das gd_location Shortcodes gehören zum Geodirectory Location Manager Add-on. Da wir dieses Add-on momentan nicht verwenden, entferne ich die Shortcodes, die Sie im Screenshot unten sehen.
So sieht unsere Startseite jetzt aus.
Wenn Sie einen neuen Abschnitt hinzufügen oder Änderungen an Seiteninhalten vornehmen möchten, können Sie die Blockstrap-Theme integrierten Blöcke verwenden, die mit BS >
2. Blockstrap/Directory Design der Website-Listings und Suchseite
Wie bereits erwähnt, verfügen die Blockstrap- und Directory-Themes bereits über vorgefertigte Vorlagen für GD-Seiten.
Alle diese Vorlagen sind in sich vollständig, sodass wir keine Änderungen an ihnen vornehmen müssen.
Da innere Seiten einen Hero-Header verwenden, müssen wir den Header-Bereich der Archivseite anpassen und ihn mit dem neuen Logo und den Menüpunkten aktualisieren.
Gehen Sie zu Darstellung >> Editor >> Auf Vorlagen klicken >> Wählen Sie GD Archive für das Layout der Archivseite.
Ähnlich wie auf der Startseite laden wir hier auf der GD-Archivseite das neue Logo und die Menüpunkte hoch.
So sieht die GD-Archivseite mit dem Standarddesign aus.
Wählen Sie ebenso für die GD Search Seite die GD Search Archive Vorlage aus und nehmen Sie die erforderlichen Änderungen daran vor.
Für diesen Artikel behalte ich das Standardlayout bei.
3. Blockstrap/Directory Design der einzelnen Listing-Seite der Website
Um die GD Detail Seite die GD Single Seitenvorlage anzupassen und die erforderlichen Änderungen daran vorzunehmen.
So sieht die Standardvorlage der GD-Detailseite aus – sie wirkt vollständig und enthält alle erforderlichen Elemente. Daher werde ich sie nicht bearbeiten.
Premium-Funktionen zu Ihrem hinzufügen Blockstrap/Directory Website
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 festlegen, wie viel es kostet, ein Listing hinzuzufügen. Sie können unterschiedliche Preise für verschiedene Optionen festlegen. Beispielsweise können Sie für kostenpflichtige Listings mehr Funktionen anbieten, wie das Hochladen mehrerer Bilder, während Sie Funktionen für kostenlose Listings einschränken. Sie können auch bestimmen, welche speziellen Felder verfügbar sind und wie lang die Beschreibungen sein dürfen.
- Inserate beanspruchen: Diese Funktion ist für ein Verzeichnis besonders wichtig. So funktioniert es: Zunächst richtet der Administrator die Datenbank ein. Anschließend lädt er Unternehmensinhaber ein, ihre kostenlosen Listings zu verwalten. Wenn ein Unternehmensinhaber die volle Kontrolle möchte, muss er möglicherweise zunächst auf ein kostenpflichtiges Listing upgraden.
- Werbung: Werbung verkaufen ist eine weitere Form der Monetarisierung eines Online-Verzeichnisses. Wenn Ihre Website viele Besucher hat, können Sie Werbenetzwerke nutzen. Andernfalls können Sie Werbung direkt verkaufen. Das bedeutet, dass Unternehmen dafür bezahlen können, Banner in bestimmten Bereichen Ihrer Website anzuzeigen, oder ihre Listings als Anzeigen erscheinen können, beispielsweise ganz oben in den Suchergebnissen.
Das sind nur drei Beispiele. Ein Verzeichnis-Website bietet jedoch viele Möglichkeiten, online Geld zu verdienen.
Sie können einen weltweiten Marktplatz für handgefertigte Artikel erstellen, Tickets für Veranstaltungen verkaufen oder Rabattgutscheine anbieten.
Wenn Sie loslegen möchten, schauen Sie sich diese Ressource an: So erstellen Sie eine Verzeichnis-Website von Grund auf.
Dieses Tutorial ist vielseitig und kann an jedes Theme oder jeden Page Builder angepasst werden.
Die Möglichkeiten, was Sie mit Ihrer Website tun können, sind grenzenlos.
Fazit
Wir haben eine große Anzahl von Tutorials zum Aufbau eines Verzeichnisses mit den bekanntesten Themes und Page Buildern veröffentlicht.
Wenn Sie eines davon gelesen haben, werden Sie feststellen, dass das Arbeiten mit dem Blockstrap-Framework und dem dazugehörigen Directory-Child-Theme einfacher ist.
Das Ergebnis sieht deutlich besser aus.
Und last but not least: Wenn Sie eine Blockstrap-Verzeichnis-Website testen, werden Sie auch feststellen, dass sie wesentlich schneller ist als alle anderen, für die wir bisher Tutorials erstellt haben.
Das Beste daran: Sowohl das Blockstrap-Theme und Plugin als auch das Directory-Child-Theme sind 100 % kostenlos!
Worauf warten Sie noch? Starten Sie jetzt Ihre Verzeichnis-Website mit Blockstrap und dem GeoDirectory-Plugin und verdienen Sie online Geld!
Newsletter – Bleiben Sie auf dem Laufenden!
Erhalten Sie die neuesten Nachrichten, Tipps und exklusive Inhalte direkt in Ihrem Posteingang.