Schritt für Schritt zum eigenen Branchenverzeichnis mit WordPress

In diesem Beitrag erkläre ich dir Schritt für Schritt, wie du ein Branchenverzeichnis mit WordPress erstellst und einrichtest. Außerdem zeige ich dir, wie du deine Webseite mit Sicherheitsmechanismen gegen Angriffe schützt.

Man könnte fast sagen, es handelt sich um ein WYSIWYG-Tutorial, denn am Ende bekommst du das, was du hier auf dieser Webseite (jedenfalls in Teilen) siehst. Optisch und inhaltlich hängt es natürlich davon ab, welches Template du später einsetzt, welche Plugins du verwendest und wieviel Hand du an das CSS anlegen möchtest.

Das eingesetzte Map-Plugin WP Store Locator gehört nicht zum Business Directory Plugin. Dazu mache ich ggfs. ein weiteres Tutorial. Ich verzichte hier auch darauf, weil es ein Premium-Plugin der Map-Funktionalität für das Business Directory Plugin gibt. Es ist allerdings kostenpflichtig, weswegen ich es jetzt nicht behandele.

Grundsätzlich werden hier ausschließlich kostenlose Resourcen zum Einsatz kommen, auch wenn es kostenpflichtige Varianten gibt. Du brauchst also neben dem Webhosting keinen Cent zu berappen, um dieses Tutorial umzusetzen. Für kostenpflichtige Varianten kannst du dich später noch entscheiden, falls du den Funktionsumfang und die Features deiner Seite erweitern möchtest.

Und während ich Stunden um Stunden mit dem Finden, Konfigurieren und Evaluieren von brauchbaren Plugins verbracht habe und mit der Erstellung des Tutorials noch einige Stunden hinzugekommen sind, kannst du direkt loslegen 🙂

Für wen ist dieses Tutorial gedacht?

Der erste Teil richtet sich an blutige Anfänger im Umgang mit WordPress. Ein rudimentäres Basiswissen im Umgang mit WordPress wäre gut, ist aber nicht Voraussetzung, um das Tutorial umzusetzen. Wenn du dich noch nicht mit WordPress beschäftigt hast, ist das auch kein Beinbruch, denn es ist recht einfach und intuitiv und dadurch recht schnell zu erlernen.

Der zweite Teil ist für alle, die WordPress bereits eingerichtet haben und es um ein Branchenverzeichnis erweitern möchten. Dazu gehörst auch du als Anfänger, denn wenn du den ersten Teil abgearbeitet hast, läuft ja auch deine WordPress Installation 🙂

In einem weiteren Tutorial werde ich dir dann noch zeigen, wie du mit deinem Branchenverzeichnis vielleicht auch etwas Geld verdienen kannst, indem du Werbung schaltest. Dazu aber wie gesagt in einem anderen Beitrag mehr.

Begriffe, wie Plugin und Hosting sind für dich keine absoluten Fremdwörter und ein FTP-Programm deiner Wahl ist bereits auf deinem Rechner installiert? Prima! Wenn nicht, auch nicht schlimm. Wir verweisen innerhalb des Tutorials auf alle notwendigen Ressourcen und wo du sie bekommen kannst. Natürlich können wir hier nicht bei allen Produkten ins Detail gehen.

Ok soweit? Los geht’s!

Vorbereitungen

Zunächst brauchen wir einen Webserver, auf dem wir unser Branchenverzeichnis installieren wollen. Der Webserver sollte natürlich 24/7 durchlaufen und nicht aus dem letzten Loch pfeifen. Daher besorgst du dir ein Hosting-Paket bei einem ordentlichen Provider. Hier sind drei Provider, die Webhosting anbieten:

Teilt mir gerne eure Erfahrungen mit anderen Hostern mit, ich nehme sie dann gern in den Artikel auf.

Ach übrigens: Du kannst auch bei uns ein entsprechendes Hostingpaket bekommen. Wir bieten Pakete mit Datenbank bereits ab 6,90€ (inkl. MwSt.) im Monat. Datensicherung auf externen Server und viele weitere Features sind ebenfalls inbegriffen. Geeignet für WordPress sind alle Pakete ab „M“. Kannst ja mal schauen.

Du hast bereits ein Hosting-Paket inklusive einer Domain und dich in der Serververwaltungsoberfläche angemeldet?

Klasse! Dann richte nun die Datenbank ein. Je nach Anbieter sind die Schritte unterschiedlich, aber ich bin sicher, das bekommst du hin. Wenn du die Datenbank eingerichtet hast, notiere dir diese vier Werte:

  • den Hostnamen des Datenbankservers
  • den Datenbanknamen
  • den Datenbankbenutzer
  • das Passwort des Datenbankbenutzers

Du wirst sie später für die Installation von WordPress benötigen.

WordPress herunterladen und installieren

Lade dir nun das aktuelle Installationspaket von WordPress. Dazu gehst du auf die Seite https://de.wordpress.org/ und klickst auf den Button „WordPress x.xx herunterladen“.

Oder klicke hier, um die aktuellste ZIP-Datei direkt herunterzuladen. Speichere die Datei in jedem Fall auf deiner Festplatte.

Wenn du kein FTP-Programm hast, kannst du dir bei der Gelegenheit z.B. Core FTP herunterladen.

Nun hast du zwei Möglichkeiten:

Möglichkeit A: ZIP auf den Webserver hochladen und per SSH auf dem Webserver entpacken.

Bei dieser Variante setze ich voraus, dass du dich mit der SSH-Kommandozeile auskennst. Es gibt viele verschiedene Umgebungen, weswegen ich hier nicht näher auf die Details eingehen werde.

Starte dein bevorzugtes FTP-Programm und verbinde dich mit deinem Webserver. Die FTP-Zugangsdaten kannst du in deiner Hostingverwaltung einsehen/generieren.

Lade das ZIP direkt in den root-Ordner deiner Webseite (meißt unter \httpdocs\ oder \htdocs\) hoch.

Verbinde dich anschließend per SSH auf deinen Webserver und entpacke die Dateien. Ändere nun in deinem Webserver-Verwaltungstool oder per SSH die Document-Root auf \httpdocs\wordpress, wobei \httpdocs deinem tatsächlichen Document-Root entsprechen muss! Wenn du die Document-Root nicht änderst, wird deine WordPress-Installation unter www.deine-domain.de/wordpress/ zu finden sein und das ist nicht schön.

Möglichkeit B: ZIP auf deinem PC entpacken und Dateien auf deinen Webserver hochladen.

Entpacke die zuvor heruntergeladene ZIP-Datei auf deine Festplatte.

Wechsele in deinem FTP-Programm in das entpackte Verzeichnis \wordpress\ und markiere alle Dateien und Verzeichnisse. Lade die Auswahl direkt in den root-Ordner deiner Webseite (meißt unter \httpdocs\ oder \htdocs\) hoch.

Diese Variante ist etwas einfacher, da du dich nicht mit der SSH-Kommandozeile befassen musst. Dafür dauert es aber etwas länger, die einzelnen Dateien zu übertragen, denn es sind derzeit ca. 25.000…

Hinweis
Das root-Verzeichnis deiner Webseite ist nicht das root-Verzeichnis des Servers! Das root-Verzeichnis deiner Webseite ist der Ort, der die Startseite (i.d.R. index.php oder index.html) deiner Webseite beinhaltet.

Wenn du also die WordPress-Dateien auf deinem Webserver liegen hast, öffne den Browser deiner Wahl und gib den URL – also z.B. www.meine-domain.de – in die Adresszeile ein. Wenn du bis hierhin alles richtig gemacht hast, solltest du nun den Installationsassistenten von WordPress sehen:

Screenshot Willkommensseite WordPress Assitent
Der Willkommensbildschirm von WordPress beim ersten Aufruf

Hat alles geklappt? Prima, dann geht es nun mit einem Klick auf „Los geht’s!“ weiter zur Eingabe der Daten, die du zuvor notiert hattest:

Screenshot WordPress Einrichtungsassistent
Der Einrichtungsassistent fragt nach den Angaben zur Datenbank

Trage hier die Daten ein, die du dir bei der Einrichtung der Datenbank weiter oben notiert hast.

Hinweis
Der Datenbankserver läuft i.d.R. auf dem gleichen Server, wie auch dein Webserver. Daher wird hier einfach localhost eingetragen. Wenn der Datenbankserver nicht auf dem gleichen Server liegt, gib hier den gesamten URL des Datenbankservers an, z.B. db0815.deinhoster.de

Was den Tabellen-Präfix betrifft, so kannst du ihn so belassen, wie er vorgeschlagen wurde. Der Tabellenpräfix dient lediglich zur Unterscheidung bei mehreren WordPress Installationen in der selben Datenbank.

Hast du deine Daten in das Formular eingegeben, überprüfe sie noch einmal und klicke anschließend auf „Senden“.

Wenn die eingegebenen Daten korrekt waren, erscheint folgender Hinweis, der dir sagen soll, dass du nun die Installation ausführen kannst:

Screenshot WordPress Einrichtungsassistent fragt nach Bestätigung
Bevor tatsächlich irgendwelche Daten geschrieben werden, fragt der Assistent noch ein letztes Mal nach

Wie nicht anders zu erwarten, kannst du nun per Klick auf die Schaltfläche die Installation starten.

Es erscheint das Formular zur Eingabe der Webseiten-Daten:

Screenhot WordPress Einrichtungsassistent
Der Assistent fragt nach spezifischen Daten der Webseite und des Administrators

Hier gibst du alle entsprechenden Informationen ein. Wähle auf jeden Fall ein starkes Passwort, denn die Angriffe auf Webseiten nehmen ständig zu! Einer der Gründe, warum ich in diesem Tutorial auch auf die Sicherheitsaspekte eingehen werde, aber erst weiter unten.

So lange die Webseite noch im Bau befindlich ist, kannst du den Haken bei „Suchmaschinen davon abhalten, diese Webseite zu indexieren“ setzen. Suchmaschinen werden deine Seite dann nicht bearbeiten – zumindest, wenn sie sich an die robots.txt-Datei halten, die für die Anweisungen der Suchroboter zuständig ist. Einige unseriöse Crawler kümmern sich aber nicht darum und durchsuchen deine Seite trotzdem… Solltest du jetzt und hier den Haken setzen, vergiss nicht, diese Einstellung in WordPress später wieder zu deaktivieren!

Ok, klicke also auf „WordPress installieren“, um die Installation durchzuführen. Hat alles hingehauen, erscheint folgendes:

Screenshot WordPress Installation erfolgreich
Erfolgsmeldung des Installationsassitenten

Du kannst dich nun an deiner Webseite anmelden, indem du auf die Schaltfläche klickst.

Soviel zur nackten Installation von WordPress.

Die Basiskonfiguration von WordPress

Screenshot "zum Frontend wechseln"
Mit einem Klick auf den Namen deiner Webseite gelangst du zum Frontend

Du bist nun im Admin-Bereich (nachfolgend als Backend bezeichnet) angekommen. Das Dashboard ist noch recht überschaubar, da noch kein Template oder Plugins installiert wurden. Klaro.

Bevor wir dazu kommen, nehmen wir erstmal die Mindestkonfiguration unseres Systems vor. Aber zu allererst werfen wir mal einen Blick auf das Out-of-the-Box-Aussehen deiner Webseite, in dem wir in das Frontend wechseln. Klicke dazu oben links in der Admin-Bar auf den Namen deiner Webseite.

Nun siehst du deine Webseite so, wie sie die Besucher sehen können. Bis auf den Unterschied, dass du eine Admin-Bar oberhalb der Seite siehst. Ok, das ist natürlich noch weit entfernt von dem, was wir erreichen wollen, aber es ist ein Anfang, stimmts? Denn immerhin hast du nun ein funktionierendes Blogsystem online 🙂

In der Admin-Bar kannst du auch wieder zurück in das Backend wechseln. Klicke dazu wieder an der gleichen Stelle auf den Namen deiner Webseite.

Du bist zurück im Backend? Dann machen wir uns nun an die Basiseinstellungen.

Klicke dazu im Menü links auf Einstellungen -> Allgemein. Hier kannst du noch einen optionalen Subtitle für deine Webseite eingeben. Auf jeden Fall solltest du den Standard-Text Eine weitere WordPress Seite entfernen. Außerdem kannst du hier entscheiden, ob sich Benutzer bei deiner Webseite registrieren dürfen und welche Standard-Rolle ihnen zugewiesen wird. Spätestens bei Veröffentlichung der Webseite solltest du hier den Haken setzen, da sonst keine Einträge erstellt werden können. Belasse die Rolle zunächst auf Abonnent. Der Abonnent ist die einzige Rolle ohne irgendwelche Schreibrechte. Alle anderen Punkte auf dieser Seite kannst du so übernehmen.

Gehe nun in den Bereich Einstellungen -> Permalinks. Dort wählst du die Option Beitragsname und speicherst anschließend deine Änderung ab. Dies führt dazu, dass die URL’s von kryptischen (http://www.deineseite.de/?p=123) zu sprechenden (http://www.deineseite.de/branchenverzeichnis/) URL’s umgeschrieben werden. Das sieht nicht nur besser aus, sondern erfreut auch Benutzer und Suchmaschinen.

Mehr brauchen wir zunächst nicht zu ändern.

Sicherheit gewährleisten

Die Verfügbarkeit deiner Webseite und vor allem die Sicherheit der Daten deiner Kunden sollten dir sehr am Herzen liegen. Ich kümmere mich um die Sicherheit immer zuerst, daher wollen wir auch hier zunächst die sicherheitsrelevanten Dinge durchführen, noch bevor wir das Design der Webseite bestimmen.

Es gibt grundsätzlich zwei Bereiche, die wir absichern wollen: Zum Einen die WordPress Installation selbst, zum Anderen die Daten, die die Benutzer zu unserem Server übermitteln.

WordPress absichern

Es gibt sicher dutzende Plugins für WordPress, die das System „härten“. Ich möchte hier aber nur auf WordFence Security eingehen.

Ich nutze das Plugin schon sehr lange und bin – selbst in der kostenlosen Version – hochzufrieden mit dem Funktionsumfang, sowie auch mit den Ergebnissen. Es bietet Schutz gegen Brute-Force-Attacken und beinhaltet geplante Scans, Rate Limiting, Live Traffic und viele andere Schutzmechanismen.

In der Pro-Version gibt es weitere schöne Dinge wie z.B. Zwei-Faktor-Authentifizierung, Country Blocking und auch einen SPAM-Filter.

Um WordFence zu installieren, klicke im Menü auf Plugins -> Installieren. Gib im Suchfeld oben rechts den Namen des gesuchten Plugins ein und es sollte dieses zu sehen sein:

Screenshot WordFence Plugin
Mit über einer Million aktive Installationen eines der verbreitetsten Plugins für die WordPress Sicherheit. Tatsächlich sind es über 13 Millionen Downloads laut Entwickler. Soweit uns bekannt, ist „über 1 Million aktive Installationen“ das höchste, was angezeigt wird. Daher darf man dem Hersteller wohl glauben schenken.

Wie du siehst, ist es auch erst kürzlich aktualisiert worden. Ein wichtiges Indiz für die Sicherheit gegen aktuelle Bedrohungen!

Klicke auf Jetzt installieren und warte, bis die Installation abgeschlossen ist. Aktiviere anschließend das Plugin.

Es erscheint ein kleines Pop-Up, bei dem du dich für den kostenlosen Security Newsletter registrieren kannst. Dieser informiert dich per Mail über aktuelle WordPress-Gefahren. Sehr empfehlenswert, solltest du der englischen Sprache mächtig sein.

Auch kannst du eine Tour starten, die dich durch die Optionen von WordFence führt.

Der Entwickler dieses Plugins hat übrigens vor kurzer Zeit auch die Plattform Gravityscan ins Leben gerufen. Damit kann man seine Webseite auf potentielle Sicherheitslücken prüfen lassen. Auch hier gibt es eine kostenlose Variante mit eingeschränktem Funktionsumfang, aber es ist ein Anfang!

Mehr Infos und den Scan gibt es auf https://www.gravityscan.com/.

Hinweis
Ich möchte kurz darauf hinweisen, das ich keinen direkten finanziellen Nutzen durch die Empfehlung dieses oder anderer Plugins in diesem Tutorial habe. Meine Empfehlungen basieren ausschließlich auf meinen Erfahrungen und ich möchte ausdrücklich darauf aufmerksam machen, dass es Alternativen zu den von mir verwendeten Resourcen gibt! An einigen Stellen vewende ich aber Affiliate-Links, die mir eine Provision bringen, solltest du dort etwas kaufen!

Aber zurück zu WordFence.

Im Backend wird oben auf allen Seiten folgender Hinweistext angezeigt:

Screenshot "WordFence WebApplicationFirewall Hinweis"
Dieser Hinweis begleitet uns seit der Installation von WordFence.

WordFence möchte, dass du die Firewall noch wirkungsvoller machst. Du möchtest das auch. Dazu sind Änderungen an der Konfiguration des Servers – konkret an der php.ini – notwendig. Du kannst versuchen, die notwendigen Änderungen von WordFence ausführen zu lassen, oder du änderst deine php.ini selbst ab. Sollte es nicht automatisch funktionieren, kannst du für gewöhnlich in deinem Hosting-Paket auch die PHP-Einstellungen verwalten. Füge in die php.ini folgendes ein:

auto_prepend_file = '/gesamter/pfad/zu/deinerdomain.de/httpdocs/wordfence-waf.php'

Im Großen und Ganzen kannst du die Standard-Konfiguration von WordFence übernehmen. Allerdings solltest du dir die einzelnen Punkte unter Optionen ansehen und selbst entscheiden, was du wie einstellen möchtest. Gib auf jeden Fall deine Email-Adresse bei Where to email alerts an, um per Email über Probleme auf deiner Webseite informiert zu werden.

Ich empfehle dir, die folgenden Änderungen an der Standard-Konfiguration vorzunehmen:

  • Update Wordfence automatically when a new version is released? – AN
  • Hide WordPress version – AN
  • Block IPs who send POST requests with blank User-Agent and Referer – AN

Damit ist die Firewall von WordFence eingerichet. Wenn du alle Optionen nach deinem Gutdünken eingestellt hast, speichere deine Änderungen ab.

Verbindung per SSL absichern

Um auch die Daten deiner Nutzer zu schützen, solltest du ein SSL-Zertifikat installieren, um die Übertragung zu verschlüsseln. Viele Provider bieten kostenlose Zertifikate für ihre Hostingpakete an. Falls deiner nicht dazugehört, kannst du ein kostenloses Zertifikat z.B. von https://letsencrypt.org/ bekommen.

Suchmaschinen und auch Webbrowser legen bereits seit einiger Zeit Wert auf sichere Verbindungen zwischen dem Nutzer und dem Webserver. Sichere Webseiten werden demnach besser bewertet, als nicht sichere Seiten. Webbrowser geben eine Warnung von sich, wenn auf unsicheren Webseiten Dateneingaben gemacht werden sollen. Diese Warnungen schaffen Mißtrauen bei deinen Besuchern. Gerade bei persönlichen Daten ein absolutes NoGo. Installiere daher ein SSL-Zertifikat auf deinem Webserver und stelle sicher, dass sich deine Besucher gut aufgehoben fühlen – und es auch sind.

Bitte habe Verständnis dafür, dass ich hier nicht alle Schritte aufzeige, um ein Zertifikat zu installieren. Es hängt von vielen Faktoren ab, welchen Weg du konkret gehen musst. Bemühe eine Suchmaschine und schaue nach einer Anleitung für die Installation eines SSL-Zertifikats bei deinem Provider.

Standard-Theme der Webseite ändern

Die wichtigsten Aspekte haben wir nun behandelt. Jetzt können wir uns dem spaßigen Teil zuwenden und uns ein Theme für die Webseite aussuchen. Themes sind Webseiten-Vorlagen, die du – (beinahe) unabhängig vom Inhalt der Webseite – wechseln kannst. Gehe dazu im Menü auf Design -> Themes.

Hier findest du bereits drei installierte Vorlagen, die aber für unser Vorhaben nicht wirklich gut geeignet sind. Das „twenty seventeen“ ist ein One-Page Template und die beiden anderen sind mehr für einen Blog geeignet, als für eine Webseite mit Branchenverzeichnis. Natürlich funktioniert es grundsätzlich mit jedem Theme.

Um dir ein passenderes auszusuchen, klicke auf Neues Theme hinzufügen. Es wird eine Liste mit Vorlagen angezeigt. Durchforste sie nach einem für dich passenden Theme. Wenn dir eines gefällt, kannst du dir eine Vorschau anzeigen lassen, bevor du es installierst. Nach der Installation aktiviere das Theme.

Bild "Template wählen"
Falls dein Theme mehrere Vorlagen für Seiten hat, kannst du sie hier auswählen

Erstelle nun eine neue Seite, nenne sie „Home“ oder „Start“, oder wähle eine andere passende Bezeichnung.

Je nach Theme hast du auch die Möglichkeit, ein Template für das Layout zu wählen.

Du möchtest vielleicht, dass deine Startseite keine Sidebar beinhaltet, oder einen Slider im oberen Bereich anzeigt. Wenn dein gewähltes Theme mehrere Templates beinhaltet, kannst du es hier auswählen.

Speichere die Seite zunächst ohne weitere Inhalte ab.

Nun kannst du das Theme anpassen. Welche Anpassungsmöglichkeiten das von dir gewählte Theme hat, ist unterschiedlich. Du kannst es konfigurieren, indem du im Backend auf Design -> Customizer, oder im Frontend der Seite den Customizer Button klickst:

Bild "Theme anpassen"
Der Customizer lässt sich über die Admin-Bar im Frontend aufrufen

Wir sollten jetzt eine statische Seite für die Homepage einstellen, die nicht aussieht, wie ein Blog. Dazu gehen wir im Customizer auf Statische Startseite und wählen anschließend die frisch erstellte Homepage aus:

Bild "Customizer Startseite einstellen"
Einstellen der Startseite im Customizer

Wenn du das gemacht hast, speichere die Änderungen ab.

Hinweis
Diese Optionen kannst du auch im Backend unter Einstellungen -> Lesen ändern

Klicke ruhig mal alle Möglichkeiten im Customizer durch und stelle alles nach deinen Wünschen ein. Du kannst hier Farben, Logo, Hintergrund und viele weitere Werte anpassen.

Um mit dem Tutorial fortzufahren, brauchst du allerdings nicht mehr, als die statische Startseite einzustellen. Eigentlich brauchst du noch nicht einmal das, aber wir wollen später eine schicke Landing Page bauen, die sich etwas vom Verzeichnis unterscheidet. Auch wenn das Business Directory Plugin noch nicht installiert ist, fügen wir seinen Shortcode schon mal in die Homepage ein. Begib dich dazu ins Backend und Klicke auf Seiten, klicke dann auf die von dir angelegte Startseite und füge folgenden Code ein:

[business directory]
Wichtig
Entferne das Leerzeichen zwischen business und directory ! Ich kann den korrekten Shortcode hier nicht einfügen, da sonst das Branchenverzeichnis angezeigt werden würde.

Füge über dem Schortcode noch etwas Inhalt in die Seite ein, mit dem du deine Besucher begrüßt und füge vielleicht noch einen Button ein, der den Nutzer zum Eingabeformular führt. Für den Button empfehle ich das Plugin Shortcodes Ultimate (kannst du auch später nachholen).

Bild "Startseite mit Text und Button"
Die fertige Startseite könnte so oder so ähnlich aussehen, das hängt von deinem verwendeten Theme ab.

Speichere die Seite anschließend ab.

Branchenverzeichnis mit WordPress einrichten

Nun widmen wir uns dem eigentlichen Anliegen: Der Einrichtung des Branchenverzeichnisses mit dem Business Directory Plugin.

Ich beschränke mich hier – wie Anfangs bereits erwähnt – auf die frei verfügbare Variante. Wenn du das Enhanced Categories Module ebenfalls nutzen möchtest, um die Auflistung der Kategorien optisch zu verbessern, kannst du dies durch ein Like-To-Pay, oder eine Newsletter-Anmeldung auf der Webseite des Entwicklers herunterladen, d.h. es kostet dich nur einen Klick, oder ein Newsletter-Abo, welches du wieder abbestellen kannst, wenn du möchtest. In jedem Fall recht günstig, wie ich finde 🙂

Der Support ist – wenn auch nur englischsprachig – hervorragend und reagiert freundlich und schnell, selbst bei der kostenlosen Variante.

Installation des Business Directory Plugins

Um das Plugin zu installieren, gehe im Backend auf Plugins -> Installieren und gib in die Suchmaske Business Directory ein. Suche nun danach und es sollte dieses Plugin in der Ergebnissliste zu finden sein:

Bild "Business Directory Plugin installieren"
Es gibt mehrere Resultate für den Suchbegriff. Schaue nach dem Plugin, welches hier zu sehen ist

Klicke auf Jetzt installieren und warte den Installationsprozess ab. Anschließend aktiviere das Plugin.

Nach der Aktivierung erscheint folgende Meldung:

Bild "Benötigte Seiten automatisch anlegen"
Dem Plugin fehlen noch Seiten, diese können jetzt automatisch generiert werden

Lege die benötigten Seiten per Klick auf Erstelle benötigte Seiten für mich an. Nun kannst du dir das Branchenverzeichnis bereits anschauen, auch wenn es noch keine Einträge gibt. Klicke dazu auf den Link in der Erfolgsmeldung der Installation:

Bild "Branchenverzeichnis installiert"
Wenn alles glatt lief, solltest du diesen Hinweis sehen

Wie du siehst, ist die Seite im Frontend nun doch wieder im Blogformat dargestellt. Das ist auch ok, denn die Seitenleiste wollen wir später für andere Dinge – wie zum Beispiel Werbeflächen – nutzen.

Im Menü von WordPress haben sich nun zwei weitere Punkte eingefügt: Verzeichnis und Verzeichnis Administration.

Der Reiter Verzeichnis beinhaltet später deine Brancheneinträge, während der Menüpunt Administration für die Gestaltung und die verschiedenen Optionen des Business Directory Plugins vorgesehen ist.

Bild "Der Konfigurationsabschnitt für das Business Directory Plugin"
Der Willkommensbildschirm von Business Directory

Konfiguration des Business Directory Plugins

Das Branchenverzeichnis mit WordPress ist erstellt, nun müssen wir noch einige Kleinigkeiten einstellen. Ich werde in diesem Tutorial nicht auf die unterschiedlichen Bezahlmethoden eingehen, da sie nicht Bestandteil des kostenlosen Plugins sind. Ich beschränke mich auf den kostenlosen Eintrag. Eventuell ergänze ich den Beitrag später, sollte ich die Pro-Version erwerben.

Wir gehen nun unter Verzeichnis Administration auf Optionen verwalten. Gib hier an, ob du dem Entwickler anonyme Daten zur Verfügung stellen willst, oder nicht. Ich empfehle, diese Option deaktiviert zu lassen. Die Permalink-Einstellungen kannst du ebenfalls so belassen, oder nach deinen Wünschen anpassen.

Reiter „Allgemein“

In diesem Abschnitt solltest du den Haken bei Zeige und setze Benutzervereinbarung als Pflichtfeld in Bedingungen und Konditionen setzen und einen Text in das darunter liegende Feld eingeben. Dies bewirkt, dass der Nutzer bei einer Eintragserstellung deine AGB und/oder andere Hinweise zur Kenntnis nehmen muss, bevor er den Eintrag einsenden kann. Alternativ kannst du auch einen Link dort einfügen, um auf eine spezifische Seite zu verlinken.

Setze auch einen Haken bei Entferne Eintrag ID von diesen Verzeichnis URLs.

Bild "Ich bin kein Roboter"
Die Menschheitsprüfung von Google

Kommen wir nun zu reCAPTCHA. Diese Option solltest du nutzen, um zu verhindern, dass deine Seite zugespamt wird. Dazu benötigst du ein Google-Konto.

Besuche die Seite https://www.google.com/recaptcha/ und klicke auf Get reCAPTCHA. Wenn du bereits ein Google-Konto hast, melde dich an. Falls nicht, erstelle ein neues Konto.

Wenn du angemeldet bist, registriere deine Webseite für reCAPTCHA:

Bild "reCAPTCHA Webseite autorisieren"
Fülle die Form an den ensprechend markierten Stellen passend für deine Webseite aus

Nach einem Klick auf Registrieren kannst du deine Schlüssel einsehen:

Bild "reCAPTCHA Schlüssel"Kopiere den Webseitenschlüssel und den geheimen Schlüssel in die dafür vorgesehen Felder in der Plugin-Konfiguration.

Markiere noch die Checkboxen für die Formulare, für die das reCAPTCHA aktiv sein soll. Falls du eine Entscheidungshilfe brauchst: Aktiviere alle 🙂

Im Abschnitt Registrierungseinstellungen kannst du alles so belassen. Solltest du ein eigenes Login-Plugin verwenden, trage noch die Pfade zu den entsprechenden Seiten ein. Auf dieser Seite verwende ich übrigens TML (Theme My Login). Es gibt aber dutzende solcher Plugins, daher auch hier keine ausführliche Erläuterung dazu.

Die anderen Optionen kannst du so belassen.

Reiter „Einträge“

Wechsele nun in den Reiter Einträge. Schaue dir die Optionen an und stelle sie nach deinem Wohlbefinden ein. Ich empfehle, die Anzahl der Einträge pro Seite auf 5 zu beschränken.

Reiter „E-mail“

Hier gibt es einiges zu erledigen. Gleich zu Beginn bei E-mail Adressfeld öffentlich anzeigen? mache ich einen Haken rein. Auch, wenn gewarnt wird, dass dies zu SPAM führen kann, so ist es eigentlich nicht unser Problem. In der heutigen Zeit setze ich bei Unternehmen schlicht und ergreifend einen SPAM-Filter voraus, da die Firmen-Email-Adressen früher oder später sowieso in irgendwelchen Listen von Spammern zu finden sind.

Bei Administrator per E-mail informieren wenn… würde ich alle vier Haken setzen. Ich möchte schließich zügig auf neue Einträge reagieren.

Die E-mail Templates würde ich an deiner Stelle auch etwas aufpäppeln. Standardmässig werden da nur Mails mit einem unpersönlichen Text versendet. Du kannst die Templates nach deinem Geschmack anpassen. Ich habe für die Bestätigunsmail beispielsweise folgenden Code verwendet:

<div align="center" style="padding: 30px; border: #289DCC 2px solid; margin: 5px; font-size: 20px; line-height: 26px;"><img src="/wp-content/pfadzumlogo/logo.jpg" /><hr />
Dein Eintrag '[listing]' ist in unserer Redaktion eingegangen und wird nun überprüft.

Dieser Prozess kann bis zu 48 Stunden dauern. Bitte habe ein wenig Geduld.

<b>Das Team von [site-title]</></div>
Reiter „Bezahlung“

Wie ich weiter oben schon sagte, gehe ich hier nicht näher auf Bezahlmethoden ein. Dies erfolgt vielleicht zu einem späteren Zeitpunkt, da ich selbst auch nur mit der kostenlosen Variante gearbeitet habe.

Reiter „Bild“

Hier kannst du einstellen, ob du Bilder in den Einträgen erlaubst und wenn ja, welche Abmessungen und Eigenschaften sie haben sollen. Bei manchen Bezeichnungen gibt es noch Übersetzungsfehler. So ist der erste Eintrag „Maximale Bildgröße“ eigentlich der für die minimale Bildgröße.

Ich würde die Anzahl der Bilder in kostenlosen Einträgen auf ein Bild beschränken und hier nur Firmenlogos akzeptieren. Daher auch die Anpassung an der Sprachdatei, die du unter Kosmetik -> Anpassen der Sprachdateien weiter unten in diesem Beitrag finden kannst. Dort habe ich einen entsprechenden Hinweis eingefügt.

Sidebar konfigurieren

Nun wollen wir noch die Sidebar anpassen, denn das Business Directory bringt eigene Widgets mit und einige der Standard-Widgets können wir entfernen.

Gehe dazu auf Design -> Widgets im Backend und passe zunächst die Seitenleiste an:

Bild "Sidebar Widgets auswählen"
Für den Anfang solltest du eine Suche und deine neuesten Einträge in der Sidebar anzeigen

Du kannst auch das Business Directory Widget für die Suche auswählen und die standardmässige WordPress Suchfunktion rausnehmen. Ich persönlich bevorzuge das Standard-Widget. Es durchsucht auch die Verzeichniseinträge und ist schlanker, als das von Business Directory, dafür hat das Business Directory Widget mehr Filter. Aber das ist Geschmackssache.

Füge weitere Widgets nach deinen Wünschen ein.

Hinweis
Welche Widgets und Slots für dich zur Verfügung stehen, hängt auch vom installierten Theme ab. Wundere dich also nicht, wenn es bei dir etwas anders aussieht.

Menüs erstellen

Nun widmen wir uns noch dem Footer. Hier solltest du auf jeden Fall die Links zu den wichtigen Seiten – wie z.B. AGB’s, Datenschutz und Kontakt – darstellen. Lege dazu am besten vorher die entsprechenden Seiten unter Seiten -> Erstellen an. Befüllen kannst du sie später.

Wenn du die Seiten erstellt hast, klicke auf Design -> Menüs und erstelle zunächst ein Hauptmenü:

Bild "WordPress Hauptmenue erstellen"
Die Menüverwaltung in WordPress ist ausgesprochen einfach

Anschließend erstelle noch ein Footer-Menü, dies wird in der Fusszeile deines Templates angezeigt, sofern dein Template diesen Punkt unterstützt:

Bild "WordPress neues Menü erstellen"
Ein neues Menü in WordPress anlegen

Gib einen Namen für das neue Menü – z.B. Footer-Menü – ein und klicke auf Menü erstellen.

Wähle anschließend die Seiten aus, die das Menü beinhalten soll, markiere den Integrationspunkt im Template und speichere das Menü ab:

Bild "WordPress Seiten zum Menü hinzufügen"
Ein neues Menü lässt sich schnell erzeugen

Ändere nun noch die Reihenfolge der Menüpunkte per Drag & Drop ab:

Bild "Alphabetische Reihenfolge einstellen"
Einfaches Ändern der Reihenfolge per Drag&Drop; bei umfangreichen Menüs recht hilfreich

Speichere das Menü erneut ab und begib dich ins Frontend, um dir die Seite anzeigen zu lassen. Bei dem von mir gewählten Template sieht das Ganze nun so aus:

Bild: "Vorschau der Webseite"
Das vorläufige Ergebnis der durchgeführten Schritte kann sich doch schon sehen lassen

Ok, noch ein bisschen dünn, aber wir kommen der Sache näher, oder?

Füge jetzt noch einen auffälligen Button auf der Startseite ein und verlinke ihn mit dem URL für das Erstellen eines Eintrages. Das Plugin Shortcodes Ultimate ist dazu gut geeignet, ansprechende Buttons zu erstellen. Als Ziel verwendest du ?wpbdp_view=submit_listing also z.B. /branchenverzeichnis/?wpbdp_view=submit_listing, je nach deiner Permalink-Konfiguration.

Neue Branchen anlegen

Wir sehen derzeit lediglich eine Kategorie bzw. Branche namens Allgemein. Du solltest zu Beginn schon reichlich Branchen anlegen, damit deine Benutzer es leicht haben, sich in dein Verzeichnis einzutragen. Dies kannst du unter Verzeichnis -> Verz. Kategorien leicht umsetzen.

Natürlich kanst du kaum alle mögichen Branchen berücksichtigen, daher solltest du ein neues Feld hinzufügen, in dem du deinen Nutzern die Möglichkeit gibst, eine neue Branche vorzuschlagen.

Gehe dazu im WordPress Menü unter Verzeichnis Administration auf Felder verwalten. Hier kannst du neue Formularfelder hinzufügen oder bestehende editieren und löschen, oder die Anordnung der Felder verändern.

In die Feldbezeichnung kommt ein eindeutiger Name und in die Feldbeschreibung habe ich eine kurze Erklärung geschrieben, um dem Benutzer noch die ein oder andere Information bezüglich dieses Feldes an die Hand zu geben. Zum Beispiel, in welchem Format die Telefonnummer eingegeben werden soll, und solche Dinge.

Bild "Branchenverzeichnis Formularfelder konfigurieren"
Hier kannst du diverse Optionen für die jeweiligen Felder konfigurieren

Die Beschreibungen sind selbsterklärend, weswegen ich hier nicht jeden einzelnen Punkt erkläre.

Einen kleinen Tipp habe ich aber:

Für das Feld Kurze Geschäftsbeschreibung würde ich keinen Haken bei In Detailansicht anzeigen machen, aber bei In der Vorschau anzeigen würde ich aktivieren.

Beim Feld Ausführliche Geschäftsbeschreibung würde ich es genau umgekehrt machen.

Hinweis
Wenn du die Formfelder veränderst, gehe im Anschluss einen Registrierungsprozess mit dem Formular durch und überprüfe, ob es auch so aussieht, wie du es beabsichtigst

Kontaktseite mit Kontaktformular einrichten

Falls noch nicht passiert, installiere zunächst das Plugin Contact Form 7. Dazu gehst du im Backend auf Plugins -> Installieren und suchst nach Contact Form 7. Du solltest folgendes Ergebnis sehen:

Bild "Installation Contact Form 7"
Eines der am weitesten verbreiteten Plugins: Contact Form 7.

Klicke wieder auf Jetzt installieren, warte die Fertigstellung ab und aktiviere das Plugin.

Nun hast du im WordPress Menü einen neuen Menüpunkt Formulare:

Bild "Contact Form 7 Kontaktformular bearbeiten"
Nach der Installation von Contact Form 7 existiert bereits ein Standardkontaktformular

Klicke nun auf den Namen des Formulars, um es zu bearbeiten und ändere – wenn du möchtest – die vorgefertigten Texte ab. Du kannst es aber auch später noch feintunen und zunächst so belassen. Es sollte ohne weitere Änderungen bereits funktionieren. Um dies zu testen, fügen wir nun den Shortcode des Kontaktformulars in unsere Kontakt-Seite ein.

Die blanke Seite hatten wir ja bereits angelegt, um unsere Menüs zu erstellen. Kopiere dir den Shortcode des Formulars und starte nun die Bearbeitung der Kontaktseite, indem du entweder im Backend auf Seiten -> Alle Seiten gehst und dann die Seite Kontakt auswählst, oder indem du im Frontend auf die Seite Kontakt gehst und in der Admin-Bar auf Bearbeiten klickst:

Bild "Kontaktformular in Seite einfügen"
Um das Kontaktformular auf der Seite anzuzeigen, brauchen wir nur den entsprechenden Shortcode in die Seite einfügen

Speichere die Seite ab und schaue sie dir mit einem Klick auf Seite ansehen an:

Bild "Die Kontaktseite im Frontend"
Fertig ist das Kontaktformular. Das war doch einfach, oder?

Kosmetik

Anpassen der Sprachdateien

Das Plugin kommt zwar mit vielen Übersetzungen daher, aber hier und da sind einige Fehler zu finden. Außerdem möchten wir auf der Seite, auf der das Firmenlogo des Eintragerstellers hochgeladen werden kann, einen Hinweistext für die Bilderrechte anzeigen lassen. Desweiteren wollen wir auf der letzten Seite nach Fertigstellung des Brancheneintrags eine Dankesmeldung mit einigen Hinweisen anzeigen. Dazu werden wir die PO-Datei (PO- und MO-Dateien sind ein Dateipaar für die Übersetzungen in WordPress u.a.) editeren und die Einträge entsprechend anpassen.

Lade dir dazu das Programm PO-Edit herunter: https://poedit.net/

Öffne das Programm nach der Installation einmal, damit die Dateierweiterungen .po und .mo mit dem Programm assoziiert werden. Installiere ggfs. verfügbare Updates für das Programm und schließe es danach wieder.

Nun öffnet du dein FTP-Programm und verbindest dich zu deinem Server. Wechsele in das Verzeichnis /deinWPRoot/wp-content/plugins/business-directory-plugin/languages/ und kopiere die beiden Dateien WPBDM-de_DE.po und WPBDM-de_DE.mo auf deine lokale Festplatte. Du musst natürlich /deinWPRoot mit deinem root-Verzeichnisnamen versehen. Klar.

Wechsele nun im Windows Explorer (oder Finder beim Mac) in das Verzeichnis, in das du die beiden Dateien kopiert hast und öffne durch Doppelklick die WPBDM-de_DE.po Datei. Sie wird nun im PO-Edit geöffnet und du kannst die Übersetzung bearbeiten. Simuliere dazu einen Brancheneintrag eines Nutzers. Erstelle einen Eintrag und schaue dir auf jeder Seite des Prozesses an, ob alles stimmt. Falls nicht, finde im PO-Edit die entsprechende Phrase. Ändere sie so ab, dass es für dich und deine Nutzer gut ausschaut.

Wir wollen zunächst einen Fehler korrigieren. Suche nach der Phrase KFZ. Es gibt nur ein Ergebnis. Wie du siehst, ist die Übersetzung völliger Unsinn.

Ändere den gesamten Text wie folgt ab: „Nachricht an Eintragsersteller: “ ohne die Anfürungszeichen, aber mit dem Leerzeichen hinter dem Doppelpunkt!

Bild "Falsche Übersetzung in der Business Directory PO-Datei"
Diese Übersetzung in der Übersetzungsdatei der Version 4.1.13.2 ist leicht daneben…

Suche noch nach dem Text Eintrag dauerhaft ausführen. Dieser Text wurde als Platzhalter in der Verzeichnissuche dargestellt und sollte Verzeichnis durchsuchen… lauten. Ändere ihn entsprechend ab.

Um auf der dritten Seite des Eingabeformulares den Copyright-Hinweis einzufügen, suche im PO-Edit nach Bilder hochladen und füge in die Übersetzung folgenden Inhalt ein:

Verwende ausschließlich Bilder, an denen du die Rechte besitzt!<br />
Für Verletzungen von Lizenzrechten bist du selbst verantwortlich!<br /><br />
<strong>Firmenlogo hochladen</strong>

Ob und wie du diese Texte abänderst, bleibt natürlich dir überlassen. Ich finde es aber als Besucher einer Webseite gut, wenn ich auf eventuelle Risiken hingewiesen werde. Gerade bei Bildrechten sind die Abmahnwerke ziemlich fix!

Hinweis
Generell solltest du bei Bildern von Dritten aufpassen. Wenn du z.B. ein unter den Creative Commons lizensiertes Bild einsetzt, achte auf jeden Fall darauf es auch korrekt zu verlinken. Sonst kann es teuer werden!

Jetzt ändern wir noch den Standard-Text auf der letzten Seite des Formulars. Suche in PO-Edit nach der Phrase Eintrag wurde erstellt und ändere ihn z.B. so ab:

Dein Eintrag wurde erfolgreich erstellt und wird nun geprüft.<br /><br />
Dies kann bis zu 48 Stunden dauern. Bitte habe etwas Geduld.<br /><br />
Sobald dein Eintrag freigeschaltet wurde, wirst du per Email informiert.<br /><br />
In der Zwischenzeit gib uns doch eine Bewertung auf ProvenExpert.com, oder klicke doch auf eines der Werbebanner, wenn dich ein Thema interessiert.<br /><br />
Du unterstützt damit dieses kostenlose Projekt!<br /><br />
Vielen Dank!

Ok, soviel zur Übersetzung und Ergänzung der Textpassagen. Auf die Übersetzung des Themes werde ich hier nicht näher eingehen, da es je nach Theme immer unterschiedliches zu übersetzen gibt. Nur soviel: Das Verzeichnis für die Sprachdateien lautet /deinWPRoot/wp-content/themes/namesDeinesThemes/languages/.

Enhanced Categories Module installieren

Wie ich bereits anfangs erwähnt habe, kannst du dir das Enhanced Categorie Module auf der Webseite des Entwicklers durch ein Social Share kostenlos ergattern.

Wenn du dieses zusätzliche Modul installierst, hast du die Möglichkeit, deine Kategorien mit Symbolen zu versehen. Ohne dieses Plugin gibt es nur Text-Links.

Lade dir dazu auf openclipart.org ein paar schöne Icon-Packs runter. Diese Icons sind nach Creative Commons 1.0 lizensiert und dürfen frei verbreitet werden. Genauere Informationen findest du hier.

Anpassen des CSS

Wenn du an dem out-of-the-box Design des Branchenverzichnisses noch Anpassungen vornehmen möchtest, klicke im Frontend oben in der Admin-Bar auf den Customizer und wähle den Reiter Zusätzliches CSS. Hier kannst du deine eigenen Styles hinzufügen. Wenn du dich mit CSS (Cascading Style Sheets) nicht auskennst, findest du auf https://wiki.selfhtml.org/wiki/CSS eine hervorragende Referenz.

Hinweise für deine Nutzer

Damit deine Besucher und Nutzer wissen, worauf sie sich bei deiner Webseite einlassen und auch, um rechtlich auf der sicheren Seite zu sein, solltest du diese zusätzlichen Seiten anlegen und befüllen:

  • FAQ
  • Impressum
  • Datenschutz

Zusätzliche Plugins installieren

Um die Sache abzurunden, solltest du noch einige Plugins installieren. Ich habe hier die nach meiner Meinung wichtigsten Plugins zusammengestellt.

Kostenlose Plugins

  • Contact Form 7 – Vernünftige Formulare erstellen und versenden kann man mit diesem wohl bekanntesten Plugin für WordPress
  • BackWPup – Kostenloses Backup auch auf externe Speicherorte
  • Shortcodes Ultimate – Ein klasse Plugin für das Einfügen von Buttons oder Call-To-Action Elementen
  • Social Pug – Buttons zum Teilen in sozialen Netzwerken
  • Yoast SEO – Dieses Plugin für die Suchmaschinenoptimierung wird von Business Directory empfohlen und es gibt eine Anleitung zur korrekten Konfiguration. Ich verwende sonst All-in-One SEO, aber hier habe ich auf Yoast SEO umgestellt, da es von den Entwicklern des Business Directory empfohlen wird.
  • All-In-One SEO – eine Alternative zu Yoast SEO
  • WP-FastestCache – Ein kostenloses Cache-Pluin, welches seinen gesamten Funktionsumfang erst in der Pro-Version zur Verfügung stellt, aber auch in der Gratisvariante schon viele Möglichkeiten bietet
  • Cookie Notice – Die Benutzer bekommen einen Cookie-Hinweis angezeigt, der ihnen sagt, dass sie sich mit den Nutzungsbedingungen einverstanden erklären, wenn sie deine Seite nutzen
  • SSL Insecure Content Fixer – Behebt „Mixed Content“ Fehler bei Einsatz von SSL, z.B. wenn Plugins auf nicht sichere URLs referenzieren.
  • Better AMP Accellerated Mobile Pages zur schnelleren Auslieferung der Seiten auf Mobilgeräten
  • Widget Logic – Sehr nützliches Plugin, um Widgets anhand von Bedingungen anzuzeigen.
  • Statify – Umfangreiche Statistiken zu allen möglichen Aspekten deiner Besucher und Nutzer
  • WP Store Locator – Ein Plugin zur Darstellung einer Map mit Routenplaner als Ersatz für das kostenpflichtigen Map-AddOn des Business Directory Plugins.

Kostenpflichtige Plugins

  • UpdraftPlus – Backup/Restore – Nach meinem Dafürhalten DAS Backup-Plugin für WordPress. Es bietet in der Premium-Version neben diversen Speichermethoden auch Klon- und Migrationsfunktionen und vor allem: es funktioniert hervorragend. Einen Vergleich der Features zwischen der Gratisvariante und der Premium-Version findest du hier.
  • WP-Rocket – kostenpflichtiges Cache-Plugin mit zahlreichen Konfigurationsmöglichkeiten, welches ich eigentlich überall einsetze und gerne weiterempfehle

Resourcen

Schlusslicht

Ufff, das war ja doch wieder ein gutes Stück Arbeit 🙂

Du hast nun eine gute Grundlage, um weitere optische und inhaltliche Änderungen selbst vorzunehmen. Wenn du irgendwo nicht weiterkommst, lass es mich wissen.

Ich hoffe, du hast hier einen hilfreichen Beitrag gefunden, der dir das Arbeiten mit WordPress etwas erleichtert hat und du nun ein Branchenportal dein Eigen nennen kannst. Wenn das so ist, dann teile oder verlinke den Artikel.

Wenn Interesse an weiteren Informationen besteht, ergänze ich gern noch das ein oder andere Thema!

Über Fragen, Anregungen und konstruktive Kritik freue ich mich sehr. Hinterlasse einfach deinen Kommentar.

PS: Vergiss nicht, deine Seite wieder für Suchmaschinen indizierbar zu machen! Wir sprachen darüber 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.