CMS Webentwicklung mit WordPress und DIVI, Plugin Programmierung

Einführung in WordPress

Content-Management-Systeme (CMS) erleichtern die Erstellung und Verwaltung von Webseiten erheblich. Ohne Programmierkenntnisse können Unternehmen und Privatpersonen Inhalte pflegen, Design anpassen und Webseiten interaktiv gestalten. Die bekanntesten CMS sind WordPress, Joomla, Drupal, Contao und TYPO3, wobei WordPress inzwischen rund 43 % aller Webseiten weltweit antreibt und damit das mit großem Abstand meistgenutzte System ist.

Ich selbst habe mit Joomla begonnen, dann Contao verwendet und bin aus guten Gründen zu WordPress gewechselt. Bei meinen Kunden sehe ich im professionellen Bereich immer noch häufig TYPO3-Seiten, die aber wegen TypoScript mehr Einarbeitung erfordern und daher nicht für alle Nutzer und insbesondere Webentwickler einen schnellen Einstieg bieten. So ist es auch schwieriger, jemanden zu finden, der Erweiterungen oder die Pflege übernimmt.

Solange die Systeme stabil laufen und alle technischen Erfordernisse (aktuelle PHP-Version, Sicherheitsupdates, DSGVO, Performance) einhalten, besteht kein Grund für eine komplette Neuentwicklung. Generell laufen Webseiten meist um die 4–6 Jahre, bevor sie grundlegend neu gestaltet werden.

Hosting bei all-inkl.com und Co.

WordPress benötigt grundsätzlich nicht viel. PHP und MySQL/MariaDB reichen, und so sind WordPress-Seiten bei praktisch allen Providern lauffähig. Dennoch erwartet man sich inzwischen etwas mehr – zum Beispiel:

• eine Entwicklungs-/Staging-Domain
• komfortable E-Mail-Verwaltung
• LetsEncrypt-Zertifikate für HTTPS inkl. Auto-Renew
• FTP/SFTP-Zugänge oder Web-Filemanager
• automatische Backups und einfache Wiederherstellung
• schnellen, kostenlosen Support
• genügend Arbeitsspeicher und aktuelle PHP-Versionen (z. B. 8.1/8.2+)
• die Möglichkeit, eigene DNS-Einstellungen vorzunehmen
• einen schnellen Umzug und Bereitstellung von Auth-Codes auf Knopfdruck
• einen einfachen Installationsassistenten für WordPress u. a.

Ein seit vielen Jahren bevorzugter Anbieter ist hier all-inkl.com (Affiliate Link), der mit sehr fairen Paketpreisen und einem hervorragenden Support überzeugt. Wer lediglich CMS-Systeme hosten will, ist damit bestens bedient.

Wer zusätzlich MongoDB, Node.js oder Express benötigt, sollte entweder einen eigenen Server/VPS anmieten oder zu Providern gehen, die diese Funktionen bereitstellen. 99 % aller klassischen Webseiten brauchen das allerdings immer noch nicht. Durch KI-gestützte Tools entstehen jedoch zunehmend individuelle Anwendungen – etwa Web-Apps, APIs oder Automatisierungen. Auch nuonu.com ist eine solche Anwendung, die WordPress um eigene Plugins erweitert und so sehr individuelle Funktionen bietet.

Warum WordPress und DIVI?

WordPress bietet eine benutzerfreundliche Oberfläche, eine riesige Auswahl an Erweiterungen (Plugins) und Themes sowie eine sehr starke Community. Egal ob Blog, Unternehmensseite, Landingpage oder Online-Shop – mit WordPress lassen sich nahezu alle Arten von Webseiten umsetzen. Die Installation und Grundkonfiguration sind schnell erledigt, und dank Page Buildern wie DIVI können auch Laien professionelle Layouts erstellen.

Vorteile von DIVI als Page Builder

DIVI hebt sich von vielen anderen Page Buildern dadurch ab, dass es als komplettes Theme + Builder genutzt werden kann und kein zusätzliches Theme notwendig ist. Das bedeutet:

• Komplettes Design aus einer Hand – keine zusätzlichen Theme-Abhängigkeiten.
• Flexible Gestaltungsmöglichkeiten mit einem visuellen Drag-and-Drop-Editor.
• Clientseitige Editiermöglichkeiten direkt auf der Seite (Frontend-Editing).
• Hervorragende responsive Anpassung für Desktop, Tablet und mobile Endgeräte.
• Vorgefertigte Layouts & Module, die die Erstellung neuer Seiten erheblich beschleunigen.

Neu: DIVI 5 – Performance & Zukunftssicherheit

DIVI 5 ist mehr als ein normales Update: Der Builder wurde intern komplett neu aufgebaut und auf ein modernes, deutlich schlankeres Fundament gestellt. Das sorgt für spürbar schnellere Ladezeiten, weniger Code-Ballast und eine bessere Basis für zukünftige Funktionen.

• Neues, schlankes Core-System – der Builder wurde von Grund auf neu entwickelt und arbeitet ressourcenschonender.
• Schnellere Ladezeiten & reaktionsschneller Editor – vor allem komplexe Seiten mit vielen Modulen profitieren von der neuen Architektur.
• Weniger Shortcodes, saubererer Code – das erleichtert langfristige Wartung, Migration und wirkt sich positiv auf SEO aus.
• Neue Design-Funktionen wie Design-Variablen, erweiterte Einheiten, verschachtelte Reihen und individuell einstellbare Breakpoints für noch präzisere Responsive-Layouts.
• Besseres Handling großer Projekte – DIVI 5 ist auf umfangreiche Websites mit vielen Templates, globalen Elementen und Bibliothek-Layouts ausgelegt.

Aktueller Stand bei uns: Die Seite nuonu.com läuft bereits auf der DIVI 5 Beta. Alle Kundenprojekte, die heute mit DIVI 4 umgesetzt werden, können nach dem finalen Release von DIVI 5 schrittweise und kontrolliert migriert werden – idealerweise zunächst auf einer Staging-Umgebung. So bleiben bestehende Seiten stabil, können aber die Performance- und Komfortvorteile der neuen Version nutzen, sobald es sinnvoll und sicher ist.

Der allgemeine Aufbau moderner Webseiten

Heutige Webseiten sind klar strukturiert, plakativ und müssen vor allem responsiv sein. Dabei sind folgende Aspekte entscheidend:

• Farben & Schriftarten sollten konsistent zum Corporate Design passen.
• Logo & Abstände müssen harmonisch ins Layout integriert werden.
• Individueller Header & Menü für eine intuitive Navigation.
• Strukturierter Footer, der rechtliche Links, Social-Media-Profile und Kontaktmöglichkeiten enthält.
• Startseite definieren, damit die Hauptseite über „Einstellungen > Lesen“ festgelegt wird.

Rechtliche Anforderungen: Impressum, Datenschutz & Cookie Consent

Jede Webseite benötigt ein Impressum und eine Datenschutzerklärung. Zudem ist ein funktionierendes Cookie-Consent-Tool erforderlich, um DSGVO und TTDSG gerecht zu werden. Ein Beispiel hierfür ist Reel Cookie Consent, das getestet und um eigene Skripte erweitert werden kann, um z. B. Matomo DSGVO-konform einzubinden.

Matomo in Subdomain-Nutzung

Matomo kann entweder auf der Hauptdomain oder einer Subdomain betrieben werden. Die Vorteile einer Subdomain-Nutzung sind:

• Bessere Datenkontrolle & Sicherheit – die Daten bleiben vollständig auf dem eigenen Server.
• Datenschutzfreundliche Konfiguration, da die Daten nicht an Dritte übermittelt werden.
• Eigene Opt-Out-Möglichkeiten für Nutzer, um DSGVO-Anforderungen gerecht zu werden.

Pflicht-Plugins für eine WordPress–Webseite

Für eine professionelle und funktionale WordPress-Seite sind bestimmte Plugins aus unserer Sicht nahezu unverzichtbar (je nach Projekt kann die Liste natürlich variieren):

• RankMath – SEO-Plugin mit Schema-Unterstützung, Redirects und vielen Onpage-Hilfen
• Happy Files – Dateiverwaltung mit Ordnern für Medien, Beiträge, Seiten u. v. m.
• Reel Cookie Consent – Cookie-Management (bzw. Alternativen wie Real Cookie Banner, Borlabs Cookie oder Complianz)
• DIVI Supreme – erweiterte Module und Effekte für DIVI
• WP Armour – Schutz vor Formular-Spam
• AIOS (All in One Security) – umfangreiches Sicherheitsplugin für Login-, Dateisystem- und Firewall-Härtung

Sicherheitskonfiguration in WordPress

Nach der Installation sollten die Sicherheitseinstellungen sofort optimiert werden:

• AIOS & WP Armour aktivieren für Schutz gegen Brute-Force-Angriffe, Spam und einfache Bot-Attacken.
• Standard-Admin-Benutzername ändern, um gezielte Angriffe zu erschweren.
• Zwei-Faktor-Authentifizierung für mehr Sicherheit (optional, aber empfohlen).
• Regelmäßige Backups einrichten (z. B. mit Duplicator, UpdraftPlus oder BackWPup) und Wiederherstellung testen.

Anpassung der WordPress-Medieneinstellungen

Standardmäßig speichert WordPress Medien in monatlich unterteilten Ordnern. Dies ist für Blogs sinnvoll, aber für Unternehmenswebseiten oft unpraktisch. Daher empfiehlt es sich, unter „Einstellungen > Medien“ die automatische Ordnerstruktur zu deaktivieren und die Mediathek stattdessen mit einem Tool wie Happy Files zu organisieren.

Design-Phase nach der Grundinstallation

Nach der Grundinstallation beginnt die eigentliche Gestaltung:

• Farben, Schriftarten & Abstände festlegen – in DIVI global als Design-Basis (bzw. in DIVI 5 zusätzlich über Design-Variablen).
• Individuellen Header & Menü erstellen, um die Navigation intuitiv zu gestalten.
• Footer anpassen, der Impressum, Datenschutz, Social-Media-Links und Kontaktmöglichkeiten enthält.
• Telefonnummern mit tel: und E-Mail-Adressen mit mailto: anklickbar machen.
• Startseite erstellen und anschließend unter „Einstellungen > Lesen“ als Hauptseite festlegen.

Mit dieser Struktur erhalten Kunden einen klaren Leitfaden, um ihre Webseite modern, rechtssicher und funktional aufzubauen. Sollten weitere Anpassungen notwendig sein, können die genannten Plugins und Tools individuell konfiguriert werden.

Gemeinsamer Entwicklungsprozess

Uns ist wichtig, den Kunden – falls gewünscht – möglichst frühzeitig an der Entwicklung teilhaben zu lassen. Das betrifft die Entscheidung und Abnahme des optischen Erscheinungsbildes, aber auch das Anlegen von Seiten, Menüs, die Pflege von SEO-Daten, Medienuploads u. v. m. Je mehr der Kunde selbst erledigen kann, desto besser – und desto leichter fällt später die eigenständige Pflege.

Logo und Favicon

Häufig liegen veraltete oder noch keine eigenen Designs vor. In diesem Fall erstellen wir auch Logos und Favicons als Vektordatei und transparentes PNG. Dank Midjourney und Illustrator können wir auf Wunsch eine Auswahl an 2D- und 3D-Logos liefern. Wir kümmern uns außerdem um die Namensfindung inklusive Prüfung und Registrierung freier Domains oder deren Umzug.

Social Media Links

DIVI bringt ein eigenes Modul mit bereits fertigen, rechtlich sicheren Logos vieler Anbieter von sozialen Medien mit. Auch im Dashboard unter DIVI > Theme-Optionen können globale Links hinterlegt werden. Header mit Logo, Menü und benutzerdefiniertem Footer seht ihr auch auf dieser Seite.

SEO-Contenterstellung

Ab jetzt beginnen wir, Seite um Seite anzulegen – dabei ist RankMath sofort zu berücksichtigen. Titel, Description, og:image, h1, h2, h3 … SEO-freundliche und gut leserliche Überschriften und Texte mit sinnvollen Hervorhebungen sowie aussagekräftiges, gut optimiertes Bildmaterial. SEO first heißt: Der Inhalt wird nicht nur für Besucher maßgeschneidert, sondern auch für Suchmaschinen und soziale Medien. Was zu berücksichtigen ist und welche Tools ihr dafür braucht, findet ihr im Leitfaden unserer SEO-Strategie.

Finalisierung aller Inhalte und SEO-Daten

Die Erstellung kann pro Seite unterschiedlich lange dauern. Einige Seiten erfordern zusätzliche Konfigurationen, etwa Formulare und deren sicherer Versand über SSL oder spezielle Tracking-/Consent-Einstellungen. Im Schnitt ist pro Seite mit etwa einer Stunde und mehr zu rechnen. Erst wenn alle Seiten fertig sind und der letzte Link getestet wurde, ist die Seite bereit für einen Live-Test.

Testphase mit Performanceoptimierungen

Eine fertige Seite ist immer ein Erlebnis – aber sie muss jetzt ausgiebig getestet werden. Wir prüfen:

• alle internen und externen Links,
• alle RankMath-Empfehlungen,
• Darstellung in sozialen Netzen (z. B. mit dem Facebook-Debugger / URL-Debuggern),
• Ladezeiten mit Speedtests (z. B. PageSpeed Insights, GTmetrix, WebPageTest).

Erst wenn alle Fehler beseitigt sind und die Seite in Performance-Tests überzeugt, wird sie final live geschaltet.

Sitemapgenerierung und Registrierung in der Google Search Console

Der finale Akt der Erstellung ist die Registrierung in der Google Search Console. Die von RankMath oder WordPress generierte Sitemap wird hinterlegt, damit Google alle relevanten Inhalte strukturiert erfassen kann.

Kurz- und langfristige Überwachung

Nach einigen Tagen sollte die Seite in den Suchergebnissen auftauchen. Mit site:domain.de oder direkt in der Google Search Console prüfen wir, ob wirklich alle wichtigen Inhalte gelistet wurden. Spätestens jetzt sollten eventuelle Fehler auffallen und korrigiert werden.

Ab jetzt können wir außerdem regelmäßig unsere Matomo-Subdomain besuchen und den Erfolg der Seite live auswerten. Je nach Interesse der Besucher können Inhalte erweitert, Suchbegriffe nachgeschärft und neue Landingpages erstellt werden. So bleibt die Webseite nicht statisch, sondern entwickelt sich mit den Zielen des Unternehmens weiter.

Google Business Eintrag

Wer sich um die Webseitenerstellung und Optimierung kümmert, sollte auch einen Blick in Google Business, Maps, Bilder, Videos, News etc… werfen. Wir sind Dienstleister und auch dafür verantwortlich, welche Daten ein Besucher zu sehen bekommt. Oft sind es genau diese Daten, die einen Besucher überhaupt erst auf die Webseite aufmerksam machen oder einen Anruf auslösen.