WordPress-Entwicklung – Unterschiede, auf die Sie achten sollten
Copyright © Shutterstock / Mr Kreetha Mahamud
WordPress ist der Platzhirsch unter den Content-Management-Systemen. Weder Typo3, Shopware oder Magento erfreuen sich ähnlicher Beliebtheit. Der Siegeszug der ursprünglich als Blogsoftware konzipierten Software war ein Triumph der Einfachheit und läutete einen Paradigmenwechsel ein. Ähnelten Websites früher eher statischen Visitenkarten, welche für die Pflege und Überarbeitung gezielte Eingriffe in einen individuellen Code verlangten, so bedeutete die zunehmende Verbreitung von Content-Management-Systemen wie WordPress eine ungeheure Dynamisierung. Die Geschwindigkeit, mit der die Digitalisierung Fahrt aufnimmt, hat zweifelsohne auch mit Content-Management-Systemen wie WordPress zu tun. Daran hat die Programmier-Sprache PHP einen großen Anteil. Neben PHP basiert WordPress auf insgesamt vier Hauptsprachen: HTML, CSS, JavaScript und eben PHP.
Der Erfolg von WordPress spiegelt aber auch die Malaise vieler Agenturen wider. Setzen Unternehmen auf WordPress, wähnen sie sich auf der komfortablen Seite. Das Content-Management-System ist einfach zu bedienen und kann über Plugins flexibel verwaltet werden. Die Crux liegt aber oftmals in der ungenügenden oder gar nicht vorgetragenen Beratung. Ein gängiges Problem bei der vereinbarten WordPress-Programmierung betrifft die Entwicklung und Umsetzung des Designs. Es handelt sich bei dieser Leistung um den kostenintensivsten Bereich. Ein zusätzliches Problem ist die Tatsache, dass diese später nach Erbringung der Leistung nicht mehr geändert werden kann.
Inhaltsverzeichnis
1. Die Kern-Bereiche der WordPress-Programmierung
Das Entwerfen und Entwickeln einer ganzen WordPress-Site bedeutet, Themes, Plugins, Widgets und benutzerdefinierte Codes (SASS, CSS, JavaScript und PHP) kreativ zu kombinieren, um ein einzigartiges Ergebnis auf der Grundlage der (persönlichen) Bedürfnisse eines Kunden zu realisieren.
Es gibt zwar verschiedene Website-Builder wie Hostinger, Wix und Squarespace, doch die Nachfrage des Marktes nach der Erstellung einer personalisierten Website durch WordPress-Entwickler ist nach wie vor hoch.
1.1. Theme-Entwicklung
Einfach ausgedrückt, definieren Themes das Layout und den Stil einer WordPress-Website. Mit der WordPress-Entwicklung von Themes ergibt sich also das Gesamtbild der Website. Ein WordPress-Theme ist das Ergebnis mehrerer Elemente, einschließlich HTML, CSS, PHP, JavaScript und JQuery.
In puncto Design gibt es nach wie vor unzählige Möglichkeiten der Gestaltung eines Themes. Dank der beschleunigten Workflows von Grid-Systemen, Bildnutzung und CSS-Medienabfragen punkten WordPress-Websites mit reaktionsschnellen Themes für jedes Gerät: Für Mobiltelefone, Tablets und natürlich auch für den Desktop.
Es gibt eine Fülle von solchen fertigen Design-Vorlagen im Internet, aus denen man wählen kann – jedes hat seine eigenen Vor- und Nachteile. Bei der Entwicklung wiederum liegen aber üblicherweise Frameworks und Starter-Themes im Fokus.
WordPress-Starter-Themes werden auch als Blank Themes bezeichnet. Wie der Name schon vermuten lässt, handelt es sich um ein Minimal-Design. Es kommt also entweder mit einem Basis-Layout oder ohne Layout daher. Solche Themes gehören mit zu den am häufigsten verwendeten Vorlagen in der WordPress-Entwicklung. In Blank Themes findet man alle erforderlichen Vorlagendateien einschließlich der grundlegenden CSS-Styles und Funktionalitäten, um ein eigenes WordPress-Theme zu erstellen.
Praktisch haben WordPress-Programmierer daher immer Blank-Themes in Petto, da die Grundstruktur eines Themes fast immer identisch ist. Der Vorteil ist jener der Effizienz. Für die Theme-Programmierung müssen keine Funktionen, Stylesheets oder PHP-Dateien von der Pike auf erstellt werden, sondern sie stehen schon grob zur Verfügung. Das Basis-Theme ist dann Ausgangspunkt für kreative Neuentwicklungen. Anforderungen sind aus Sicht der WordPress-Entwicklung etwa die Einhaltung gegenwärtiger Coding-Standards, eine klare und übersichtliche Dateistruktur sowie eine genaue Dokumentation. Zudem sollte das Theme WordPress nicht einfach aufgepfropft werden, Kernfunktionalitäten dieses CMS sollten immer beibehalten werden.
Designs der OSG
Der erste Eindruck zählt. Das beweisen etwa Studien wie “State of Create” von Adobe. So würden 46% nicht in einem Webshop einkaufen, der über kein Responsive Design verfügt. Dass Creativity sells, meinen immerhin 60% der Deutschen, welche einem kreativen Gesamt-Auftritt bei der Kaufentscheidung den Vorzug geben. Nicht Wunder nimmt es mithin, dass für 74% der Deutschen das Design einer Internet-Seite als entscheidend gilt. Gerade diese Erhebungen zeigen: Die Wahl der richtigen WordPress-Agentur ist eine unternehmensstrategisch entscheidende Weichenstellung. Was die OSG im Bereich der Theme-Entwicklung leistet, lässt sich am besten visuell erfahrbar machen. Unsere Designer können auf ein umfassendes Portfolio neuer und relaunchter Seiten verweisen. Eine kleine Auswahl finden Sie hier.
© OSG
1.2. Plugin-Entwicklung
Im Moment werden weit mehr als 54.000 Plugins im WordPress-Verzeichnis gelistet. Neben Themes sind daher Plugins ein beliebter Tummel-Platz von WordPress-Entwicklern. Was kein Wunder nimmt, da es die begehrteste und und am meisten verbreitete WordPress-Funktion ist.
Plugins ermöglichen es Ihnen, die Funktionalitäten von WordPress zu ändern oder zu erweitern, ohne den Kerncode zu berühren. Auch unbedarfte Benutzer können eine Unzahl zusätzlicher Funktionen auf ihrer Website einbinden, Erfahrungen oder Vorkenntnisse in Sachen Programmierung sind nicht notwendig.
PHP-Hooks kommen bei der Erstellung eines Plugins häufig zur Anwendung. Mit dieser Technik ist es möglich, eine Funktion oder Klasse automatisch auszuführen. Es gibt zwei Arten von Hooks: Aktion und Filter. Beide müssen aus dem Effeff beherrscht werden, um ein funktionierendes Plugin zu erstellen.
Während viele beliebte Plugins wie WooCommerce, Yoast SEO oder Google Analytics Dashboard durchaus komplexe Gebilde sind, gibt es auch viele einfache WordPress-Plugins, die ebenfalls sehr nützlich sind. Beispiele sind etwa WP Rocket für das Caching einer Seite oder Broken Link Checker zur Anzeige von beschädigten Links.
OSG Plugins
Die Online Solutions Group konnte sich im Bereich der WordPress-Programmierung auch bei Plugins hervortun. Neben automatisiert laufenden internen Verlinkungen bietet die Münchner Agentur auch SEO-optimierte Glossar-Module als Grundlage für breit ausgerollte Content-Marketing-Strategien an. Zudem können über unser Product-Feed-CMS beispielsweise Shop-Betreiber weitaus flexiblere Keyword-Optimierungen umsetzen und den Traffic signifikant erhöhen.
Für die WordPress-Programmierung ergeben sich schon hier zwei Problemfelder. Der Markt ist übersättigt mit oftmals standardisierten Design-Lösungen. Aus Kunden-Sicht ist eine Website immer auch ein Mittel, das eigene Branding zu stärken. Wenn aber auf Märkten unverwechselbare und individuelle Lösungen zählen, müssen Webdesign-Agenturen flexibel und individuell reagieren können, ohne grundlegende Basics in den Bereichen Gestaltung, Inhalt, Funktionalität oder Sicherheit zu vernachlässigen.
Ein anderer Aspekt, der zudem häufig vernachlässigt wird, ist die Frage der Sicherheit. Eine professionelle und seriöse WordPress-Entwicklung hat naturgemäß nicht nur die Schauseite wie Themes und Designs im Blick, sondern auch die nicht minder wichtigen Fragen der Sicherheit.
1.3. Widget-Entwicklung
Widgets sind Webkomponenten, die Websites hinzugefügt werden, um zusätzliche Inhalte und Funktionen auszuspielen. Anders ausgedrückt, geht es bei Widgets um Elemente für die Gestaltung einer grafischen Benutzeroberfläche. Die Bedeutung im Bereich WordPress-Programmierung liegt bei den Widgets auf der Hand. Es geht um die Realisierung einer guten User Experience und um eine Top-Usability. Steuern lassen sich Widgets im Backend übrigens bequem über Drag and Drop.
WordPress kommt mit Standard-Widgets daher, welche über das Dashboard angeordnet werden können, indem Sie im Backend-Menü auf Design und dann Widgets klicken. Beispiele sind etwa ein Beitragsarchiv oder eine Suchfunktion. Prinzipiell sind auch Widgets von Drittanbietern erhältlich, indem Sie Plugins wie Simple Page Sidebars oder Ninja Forms installieren.
Wie bei der Plugin-Entwicklung gilt auch bei der Programmierung von WordPress-Widgets: Ohne ausreichende Kenntnisse in PHP läuft nichts. Sie können beginnen, indem Sie auf die Datei functions.php ihres aktuellen Themes zugreifen, und dann das Widget mithilfe der Funktions-Optionen erstellen, welche in der WP Widget class bereitgestellt werden.
Ein benutzerdefiniertes Widget ist oft dann die Lösung, wenn Funktionen gewünscht sind, die sonst nirgendwo zu finden sind. Dies gilt eben dann, wenn Sie Ihr eigenes WordPress-Theme oder -Plugin individuell entwickelt haben möchten.
1.4. WordPress-Programmierung von ganzen Seiten
Das Erstellen einer ganzen Website erfordert jedoch mehr als nur technische Fähigkeiten wie das Schreiben von Codezeilen – die WordPress-Programmierung ist ein sehr kreativer und anspruchsvoller Prozess. Das Grundprinzip des UI/UX-Designs muss bekannt sein. Zuverlässige Ressourcen wie schnelles und sicheres WordPress-Hosting muss die Grundlage bilden.
WordPress-Entwicklung von ganzen Seiten heißt entsprechend, dass Themes, Plugins, Widgets und benutzerdefinierte Codes (SASS, CSS, JavaScript und PHP) kombiniert werden, um eine einzigartige Website auf Grundlage von Kunden-Bedürfnissen zu erstellen.
Zwar gibt es verschiedene Website-Builder wie Wix oder Squarespace, die Nachfrage des Marktes nach der Schaffung einer individuellen Website-Präsenz durch die Einstellung eines WordPress-Entwicklers ist immer noch hoch.
Das Erstellen einer ganzen Website erfordert jedoch mehr als nur technische Fähigkeiten wie das Schreiben von Codezeilen. Es geht vielmehr um die Umsetzung eines vielschichtigen und vor allem kreativen Prozesses. So müssen Grundprinzipien des UI/UX-Designs verstanden und angewandt werden und dabei ein sicheres WordPress-Hosting garantiert werden.
2. WordPress-Entwicklung mit der OSG
Prinzipiell bedient die Online Solutions Group alle relevanten Content-Management-Systeme am Markt. Neben Shopware und Magento sind wir auch mit Typo3 vertraut. Der Grund, warum wir auf WordPress setzen, ist einfach: WordPress hat sich weltweit als kostenloses Open-Source-CMS führend durchgesetzt. Die Bedienung ist für Redakteure und Blogger einfach, zudem gibt es im Bereich Design und Technik auch ohne Programmier-Kenntnisse viel Gestaltungsspielraum – etwa über Plugin-Erweiterungen.
Herausforderungen ergeben sich vor allem da, wo eine seriöse WordPress-Entwicklung eine Kombination aus individuellen, technisch einwandfreien und damit sicheren Lösungen verlangt. Tatsächlich erweist sich der Standardisierungsgrad von WordPress als eine der Achillesfersen dieses Content-Management-Systems, wie zu zeigen sein wird. Allgemein und durch die weltweit forcierte digitale Transformation rücken Sicherheitsaspekte notgedrungen mehr und mehr in den Fokus. Glaubt man einer Studie von Netzsieger aus dem Jahr 2018, so ist weltweit fast jeder dritte Computer mit Malware infiziert. Der Hersteller von Antivirensoftware-Programmen GData nannte im Jahr 2017 8,4 Millionen Schadprogrammtypen. Und laut Verband Bitkom hat schon jeder zweite Deutsche Erfahrungen mit Cyberkriminalität gemacht.
Entwicklungsprozesse laufen heute in definierten Etappen und Sprints. Das macht Aufgaben wie die Theme-Programmierung planbar, transparent und berechenbar.
Die Online Solutions Group ist als WordPress-Agentur seit Jahren branchenweit sichtbar und erfolgreich. Etablieren konnten wir uns als Münchner Agentur nicht nur als IT-Consulting-Firma im Bereich Online-Marketing, sondern auch als Tool-Entwickler. Damit bilden wir als WordPress-Entwickler praktisch immer auch neueste Tendenzen aus der Online-Marketing-Welt ab und berücksichtigen diese in der täglichen Arbeit beim Kunden. Seit 2012 verfügen wir über feste Entwickler-Teams für Frontend und Backend und setzen unsere Prozesse entlang hoher Standards um. Dazu gehören:
Zwar gehen wir stets auf die individuellen Bedürfnisse von Kunden ein, doch haben sich über die Jahre Best Practices ergeben, welche wir etappenweise umsetzen:
| 1. Konzepte | Es werden erste Konzepte erstellt. Bei diesen berücksichtigen wir branchenübliche Bezugsgrößen wie Markt, Produkte oder Dienstleistungen und den Kunden. |
| 2. Wireframing | Das Wireframing bildet das Grundgerüst für die zu erstellende Website. Mit ihm wird in groben Zügen die Usability und User-Experience skizziert sowohl für die Homepage wie für die Unterseiten. Nicht minder relevant ist der abzusteckende Rahmen für den zu erstellenden Content, da Inhalte für eine gelingende Suchmaschinenoptimierung das A und O sind. |
| 3. Design | Design-Vorschläge werden von unseren Kreativ-Partnern eingereicht. Kosten fallen hier für das Abstimmen und unsere Aufwände an. Kosten entstehen Ihnen, wenn Sie ein Design im Zuge eines Relaunches oder für eine Erst-Website auch tatsächlich umgesetzt haben möchten. Üblicherweise können Sie sich auf 3 bis 4 herausragende Design-Vorschläge freuen. Für die Startseite veranschlagen wir 1.800€, für weitere Unterseiten 800€. |
| 4. Entwicklung | Ist das Design-Konzept erstellt, unterbreiten wir Ihnen für die WordPress-Entwicklung ein Festpreis-Angebot. Entsprechend der vereinbarten Design-Elemente, Icons und Funktionen variiert das Angebot naturgemäß. Herzstück unserer Umsetzung ist dabei unser OSG Template. Anders als bei marktüblichen Pagebuildern können wir über unsere Plugin-Entwicklung garantieren, dass das zu erwartende Design auch exakt so umgesetzt wird, wie zu erwarten ist. Zudem können alle gängigen Content-Arten von Texten, Bildern oder Videos flexibel und einfach eingepflegt und verwaltet werden. |
| 5. Fertigstellung | Parallel von der Entwicklung bis zur Fertigstellung steuern wir alle Prozesse über das Projektmanagement. Dabei erfolgt auch eine kontinuierliche Qualitätssicherung, um State-of-the-Art-Lösungen zu garantieren. Im Fokus liegen hierbei etwa eine saubere Design-Umsetzung, Responsive Testing, Suchmaschinenoptimierung oder doe Optimierung von Ladezeiten. |
Webdesign Agentur kennenlernen
Um die Sicherheit für WordPress-Seiten zu gewährleisten, legen wir Wert auf eine saubere Technik. Der Mehrwert für die tägliche Online-Marketing-Praxis ergibt so schon durch unsere Grundlagenarbeit. Schnelle Ladenzeiten sind einer von Googles-Rankingfaktoren, die zudem für eine gute Usability stehen. Insgesamt haben wir als Tool-Entwickler und SEO-Agentur alle technischen Ranking-Faktoren im Blick. Testen können Sie Ihre gegenwärtige Website kostenlos über unseren Security-Check.
Zu den wichtigen Sicherheitsstandards gehören die konsequente Verwendung von CSV-Dateien, ein solides Backup-Konzept während und nach der Entwicklung sowie – wie erwähnt – eine gesicherte Testumgebung, um vor äußerlichen Gefahren geschützt zu sein.
2.1. Template-Entwicklung im Vergleich
Eine Schnittstelle zwischen WordPress-Programmierung, Design sowie der verkaufsorientierten Darstellung (etwa über Landingpages) bildet auf Websites der sogenannte Pagebuilder. Bei diesem handelt es sich oftmals um eine Art “Baukasten-System”, mit dem über vorgefertigte Module individuelle Seiten und insbesondere verkaufsfördernde Landingpages erstellt werden können.
Gängig und verbreitet sind am Markt – wie eingangs angedeutet – Standard-Templates. Tatsächlich lassen über diese “Renovierungsarbeiten” optisch beeindruckende Ergebnisse erzielen, inhaltlich sollten diese Lösungen aber alles bieten, was zeitgemäße Websites auszeichnet.
Großer Beliebtheit erfreuen sich mithin Anbieter wie Themeforest oder Template Monster. Dabei handelt es sich im Grunde um Plattformen für Drittanbieter, auf welcher WordPress-Entwickler ihre Themes vorstellen und anbieten können. Bei Template Monster besteht etwa die Möglichkeit, Themes nach Funktionen (Responsive Design, Blog-Struktur …), Beliebtheit, Farben oder WordPress-Version zu filtern. Der potenzielle Nachteil: Da es sich um ein Portal für Drittanbieter handelt, unterliegt die Qualität naturgemäß starken Schwankungen. Auch sind Anpassungen durchaus möglich, doch können etwa bei selbstständig durchgeführten Code-Änderungen und nachherigen Updates Änderungen wieder verschwinden.
Ein weiteres Kern-Problem von gekauften fertigen Templates: Oftmals handelt es sich um kein individuelles Design, welches zum Unternehmen passt. Das erschwert eine eindeutige wie unverwechselbare Markenbildung von vornherein. Positive Beispiele für kreative Websites sind rar gesät. Lichtblicke im Design-Einerlei gibt es aber trotzdem: Besucht man etwa Seiten wie mollie.com, stripe.com oder intercom.com, so erfährt man, was gute Seiten eben unverwechselbar macht: individuell und hochwertig gestaltet, eingebundene Animationen oder gute Grafiken.
An dieser Vielfalt an Design-Systemen lässt sich auch die Entwicklung ermessen, die WordPress seit seiner Einführung durchlaufen hat. Ursprünglich als reine Blog-Software konzipiert, genügten etwa Anwender-Kenntnisse aus MS Word, um Einträge intuitiv zu verfassen und grafisch über Absätze, Zwischenüberschriften und Fettungen leserfreundlich aufzubereiten.
2.1.1. Gutenberg-Editor
Aus der Blog-Struktur hat sich jüngst bei WordPress (genauer: ab der Version 5.0) der sog. Gutenberg-Editor entwickelt. Er ist durch seine modulare Struktur durchaus mit Pagebuildern vergleichbar, doch eignet sich dieser eher für durchgehende Fließtexte; Flexibilität gibt es etwa bei der grafischen Aufbereitung des Textes, so etwa wenn Sie eine ein- oder zweispaltige Darstellung wünschen. Natürlich können auch im Gutenberg-Editor Texte eingefügt werden. Auch hier kann die Texterstellung vollkommen ohne CSS- oder HTML-Kenntnisse erfolgen:
Beim Pagebuilder findet sich eine Vielzahl unterschiedlicher Blöcke für unterschiedliche Darstellungen. Neben Text-/Bild-Kombinationen gehören Elemente wie interaktive Grafiken, Tabellen oder sog. Accordions zu gängigen Bestandteilen von Pagebuildern. Eine individuelle Gestaltungsmöglichkeit ergibt sich nicht nur über Inhalte, sondern über die visuelle Festlegung der Reihenfolge der einzelnen Elemente über Drag and Drop. Prinzipiell gilt auch hier wie häufig bei WordPress: Programmier-Kenntnisse sind nicht notwendig!
2.1.2. Statische Design-Lösungen
Trotzdem spielen auch beim Pagebuilder Probleme in der Sicherheitsarchitektur eine durchaus berüchtigte Rolle. Und je anspruchsvoller und kommerzieller Websites aufgestellt sind, desto mehr fallen Sicherheitslücken ins Gewicht. Wie angedeutet, spielen bei guten Pagebuilder-Lösungen Fragen des Designs, der Flexibilität und der Sicherheit zusammen. Prinzipiell können gute Landingpages auch ohne Pagebuilder realisiert werden.
Diese werden dann allerdings um den Preis ungenügender Flexibilität erkauft, zudem spielen – wie zu zeigen sein wird – auch Sicherheitsrisiken mit hinein. Ein Beispiel für solch eine statische Landingpage finden sie hier.
Das Design ist unflexibel, Texte lassen sich nur in definierten Bereichen bearbeiten resp. ersetzen. Zudem ergeben sich oftmals Verzögerungen im Workflow, da die Textlänge von vornherein schwer abschätzbar ist, was häufig zu Korrekturschleifen bei der Landingpage-Gestaltung führt.
Trotzdem sollte man sich bei Pagebuilder-Lösungen vor Augen halten, dass die Vorteile nicht die Nachteile aufwiegen können. Zwar hat etwa Gutenberg mit WordPress 5.0 den Umfang gegenüber klassischen Editoren erweitert; auch läuft die Content-Pflege kinderleicht und viele Plugins sind nur noch auf Updates für Gutenberg abgestimmt. Auf der Soll-Seite bleiben gerade für professionell ausgerichtete Websites Probleme, die oftmals mit Folgekosten einhergehen, da weitere WordPress-Entwicklungen notwendig sind: Für das fixe Layout müssen flexible Anpassungsmöglichkeiten programmiert werden, da unterschiedliche Produkte oder Dienstleistungen eines Unternehmens auch unterschiedliche Formen der Aufbereitung verlangen. Die Grund-Kosten für eine WordPress-Programmierung mit statischen Lösungen schlagen mit etwa 3.000 Euro zu Buche. Aber wie angedeutet, entstehen für professionelle Seiten oftmals Folgekosten.
Zusammengefasst hier noch einmal alle Vor- und Nachteile statischer Pagebuilder-Lösungen:
2.1.3. WPBakery Page Builder (Visual Composer)
Eine prominente Lösung im Bereich der Pagebuilder ist der WPBakery Page Builder (Visual Composer). Anders als beim Gutenberg-Editor ist eine recht intuitive Vorgehensweise bei der Seitenerstellung nicht möglich. Gerade wenn Landingpages von der Pike auf erstellt werden, erweist sich die Arbeit mit dem Visual Composer als sehr langwierig. Dabei ist dieser Pagebuilder sowohl mit als auch ohne Gutenberg benutzbar. Als nachteilig erweisen sich aber oftmals das Fehlen relevanter Bausteine (welche zusätzlich programmiert werden müssten), laufende Lizenzkosten für die Pro-Version sowie eklatante Sicherheitslücken.
Gerade die Sicherheitsrisiken bei Pagebuilder-Lösungen legen ein Kardinal-Problem bei der Plugin-Entwicklung offen. Standard-Wege führen zu Standard-Lösungen. Und je weiter diese WordPress-Entwicklungen verbreitet sind, desto mehr geraten sie in den Fokus von Hackern. Betrachtet man die bekannt gewordenenen Problemfälle, so lesen sich diese wie das Who is Who beliebter Pagebuilder-Lösungen.
Bei letzterem Plugin konnten im Drag&Drop Image Widget vorhandene XSS-Lücken ausfindig gemacht werden. Diese ermöglichen es theoretisch, Bilder um Customlinks zu erweitern. Auch einfache User eines entsprechend erweiterten WordPress-CMS können die Rolle eines Admins übernehmen und Besucher mit der Malware verseuchen.
2.1.4. Folgen eines Hacks (Exkurs)
Dass solche Hacks mit langwierigen Problemen einhergehen, wird oft nicht erkannt. Nicht selten bleibt die Malware lange unbemerkt, bis diese einen langfristigen und irreperablen Schaden anrichten kann. Die Daten sind dann kompromittiert, aufgrund der zeitlichen Distanz sind häufig keine Backups verfügbar. Ein Beispiel für eine solch durchseuchte Website aus Deutschland sehen Sie hier. Google indexierte die neuen “Texte” und spielte sie auf den Suchergebnisseiten aus:
Häufig wird dann die Website direkt vom Netz genommen. Das bedeutet Umsatz-, Image– und schließlich Ranking-Verluste, wie das Beispiel der gehackten Seite zeigt:
Für Websites mit einem professionellen und sicheren Anspruch sollte die Lösung über individuelle Plugin- resp. WordPress-Programmierungen laufen. Die Online Solutions Group verwendet auch hier innerhalb der hauseigenen Anwendung Performance Suite ein entsprechendes Security Tool, das in Echtzeit Alerts an Website-Betreiber versendet. Daten-Kompromittierungen aufgrund der zeitlichen Distanz werden bei sofortigem Eingreifen vermieden.
Security-Check der OSG
Bei der OSG gehen WordPress-Programmierung und Tool-Entwicklung Hand in Hand. Aufkommende Problemfelder und Neuerungen beziehen wir in unsere tägliche Praxisarbeit mit ein. Dabei sorgen wir nicht nur für ein technisch einwandfreies Coding, sondern behalten die Technik auch nach dem Go-Live stets im Blick. Unsere Performance Suite prüft die Website laufend auf den Befall von Malware und sendet bei Problemen automatisch Alerts an den Website-Betreiber. Insgesamt werden von der PS über 100 Prüfpunkte bei den kontinuierlichen Scans berücksichtigt. Die Alerts werden entsprechend der Art der Gefahr in die Risiko-Grade niedrig, mittel und hoch eingeordnet. Auf Basis regelmäßiger Scans wird zudem ein eigener Security-Score berechnet. Lernen Sie das Security-Tool der OSG kennen!
Zusammengefasst finden Sie hier noch einmal alle relevanten Vor- und Nachteile von vorgefertigten Template-Lösungen gegenübergestellt.
2.2. Das OSG Template
Da die Online Solutions Group Beratungs- und Entwicklungsleistung ganzheitlich denkt und umsetzt, konnten wir bei unseren WordPress-Seiten Fragen der Sicherheit, der Suchmaschinenoptimierung und des Designs zukunftsweisend miteinander verknüpfen. Daher hat sich im Bereich der Pagebuilder das OSG Template als nachhaltige und flexible Lösung etabliert: Jedes Element ist als eigener Block programmiert, pro Seite lassen sich über Drag and Drop die Abschnitte nach oben oder unten an die gewünschte Stelle ziehen. Man kann Blöcke entfernen oder weitere Elemente pro Seite hinzufügen. Wie schon an der Gesamt-Übersicht zu sehen ist, funktioniert das OSG Template ebenfalls nach dem Baukaustenprinzip.
Wichtig war also bei der Umsetzung das Prinzip: “What you see is what you get!” (WYSIWYG). Redaktionelle oder grafische Aufgaben erfolgen im Backend und lassen sich bequem über die WordPress-Vorschau-Funktion einsehen, korrigieren und anpassen. Einzelne Elemente können hinzugefügt, ausgestaltet, verschoben oder gelöscht werden. Weiters überzeugt das OSG Template auch durch folgende Punkte:
Dass eine saubere Technik auch Google überzeugt, zeigt etwa ein Blick auf den Sistrix-Sichtbarkeitsindex der Online Solutions Group:
Screenshot: Sistrix
Dabei korrespondierte die verbesserte Sichtbarkeit ganz handfest mit Traffic-Steigerungen auf unserer Website. Die seit 2018 forcierten Entwicklungen im Bereich der Templates zeitigten durchaus beachtliche Erfolge. Insgesamt konnte der Traffic seit 2016 um 2.411% (!) verbessert werden:
| Jahr | Organic Search des Blogs |
|---|---|
| 2016 | 8.940 |
| 2017 | 20.749 |
| 2018 | 150.397 |
| 2019 | 215.540 |
| Prozentualer Zuwachs | 2.411% (seit 2016) |
2.2.1. Die Technik des OSG Templates
2.2.1.1. Ladezeiten & Core Web Vitals
Die Steigerung der Sichtbarkeit ist kein Zufall: Gerade anhand des OSG-Templates lässt sich das immer komplexer werdende Zusammenspiel unterschiedlicher Faktoren im Bereich Suchmaschinenoptimierung ablesen. Die Online Solutions Group hat diese zunehmende Komplexität ganzheitlich mit einbezogen und für einen sehr schlanken Code gesorgt. Anders als Standard-Templates, welche oftmals unnützen Code mitschleppen, kann das OSG Template viel schnellere Ladezeiten realisieren.
Die OSG verknüpft diesen Aspekt der WordPress-Programmierung mit der Tool-Entwicklung und der täglichen Praxis der Suchmaschinenoptimierung. So arbeitet die Performance Suite selbstredend mit Daten von Google Lighthouse, um Ladezeiten stets im Blick zu behalten. Sollten Probleme auftreten, erhalten Sie als Nutzer der PS automatisch Alerts.
Gerade Relaunches haben etwaige technische Anomalien im Blick und beseitigen diese. Aus Sicht des Google-Crawlers kann dieser Ihre Website besser lesen und damit inhaltlich den Suchanfragen von Usern viel besser zuordnen. Ausfälle der Websites bleiben zudem aus oder können dank Alert-System der Performance Suite besser und vor allem schneller behoben werden. Wie unsere unzähligen erfolgreich durchgeführten Relaunches beweisen, konnten wir dabei die Ladezeiten teilweise signifikant verbessern. Eine optimierte Usability und Ranking-Verbesserungen sind die Folge.
Deutlich zeigen sich die Vorteile auch auf unserer eigenen Website. Das schlank programmierte OSG Template sorgt ebenfalls für flotte Ladezeiten. Und damit für eine flüssige User Experience:
Nachvollziebar auch in der Entwicklung im Längsschnitt:
Vorangetrieben hat Google das Pagespeed-Thema 2020 durch die sog. Core Web Vitals. Ziel ist es, Entwicklern und Website-Betreibern valide Kenngrößen an die Hand zu geben, um definierte Teil-Aspekte der Ladezeitenoptimierung bei der Programmierung und Optimierung zu berücksichtigen.
Neben der Dauer des Ladevorgangs der zentralen Seiteninhalte (Largest Contentful Paint) geht es um Wartezeiten zwischen einer User-Interaktion einerseits (etwa mit einem Klick auf einen Link) und der Reaktion des Browsers andererseits (First Input Delay); drittens im Fokus der Core Web Vitals: der Cumulative Layout Shift (CLS). Diese Metrik bestimmt die Stabilität der Layout-Blöcke beim Ladevorgang, sprich: verschieben sich Elemente oder kann der User etwa schon beim Aufruf der Seite etwa auf eine Bilddatei zur Vergrößerung klicken?
Mit den Google Search Central SEO Office Hours vom 29. Januar 2021 kann mit an Sicherheit grenzender Wahrscheinlichkeit verlautbart werden, dass allen drei genannten Core Web Vitals ab Mai 2021 eine zentrale SEO-Relevanz zukommt, d.h. eine unzureichende Orientierung an den definierten KPIs oder gar komplette Vernachlässigung einer oder zwei CWV-bezogener Scores dürfte zu Problemen beim Keyword-Ranking führen.
Gerade eine vorausschauende WordPress-Programmierung muss diese Aspekte im Blick behalten. Bewährt hat sich das OSG Template auch hier, da der schlanke Code eine flottes Nutzererlebnis verbürgt, wie ein Blick auf die Desktop-Ladezeiten verrät:
Nicht minder relevant sind für Google aber die Ladezeiten auf mobilen Geräten von Smartphone bis iPad:
2.2.1.2. Plugin-Stacks
Die konsequente Einbindung unserer Performance Suite verweist auf einen Punkt, der gerade bei der Verwendung von Plugins wichtig ist, nämlich den Technologie-Stack. Gemeint ist die Gesamtheit technologischer Zuhilfenahmen, um WordPress und die mit der Website verbundenen Online-Marketing-Maßnahmen effizient und nachhaltig zu realisieren. Im Kontext der WordPress-Programmierung ist dann von Plugin-Stacks die Rede. Das Problem bei diesen Erweiterungen ist nicht nur die schiere Anzahl an Möglichkeiten, sondern die individuelle Steuerung wichtiger Plugin-Erweiterungen von unterschiedlichen Programmierern.
Vorteile ergeben sich im Bereich der WordPress-Entwicklung vor allem durch unsere jahrelange Programmier-Praxis, wobei wir auf ein Standard-Stack zurückgreifen: Eine definierte Palette erprobter und bewährter Plugin-Erweiterungen, deren Zusammenspiel die OSG aus dem Effeff beherrscht. Zu beachten ist gerade hier: Der Teufel steckt auch bei einzelnen Erweiterungen im Detail. Wollen Sie etwa Ihr Caching optimieren, hält das passende Plugin Hunderte von Einstellungs-Optionen offen. Insofern verhindert die Wahl eines richtigen Providers eine Vielzahl an Problemen und spart Zeit. Gerade in der Beratungs- und Entwicklungs-Praxis hat sich gezeigt, dass das OSG Template sehr gut mit unserem Plugin-Stack harmoniert.
2.2.1.3. Strukturierte Daten
Wie der Begriff der strukturierten Daten schon andeutet, handelt es sich um standardisiert aufbereitete und klassifizierte Daten, welche in Websites eingebunden werden. Innerhalb der Suchmaschinenoptimierung kommt diesen mittlerweile eine für den SEO-Erfolg durchaus strategische Relevanz zu. Google vermag über diese strukturierten Daten Informationen genau einzuordnen und kann diese bei Relevanz prominent in den Suchergebnissen ausspielen. Ein bekanntes Beispiel sind in diesem Kontext Frequent asked Questions (FAQs). Strukturierte Daten können aber auch die Darstellung von Videos auf der ersten Suchergebnisseite betreffen. Im Bereich der FAQs ergeben sich die Vorteile durch raumgreifende Präsenz auf den SERPs. Gerade auf Smartphones und Tablets nehmen FAQs viel Platz ein und können so als fast sichere Garanten für mehr Traffic gelten.
Prinzipiell können strukturierte Daten (auch: Rich Snippets) wie FAQs manuell über entsprechende HTML-Gerüste aufbereitet und über Google-Tools getestet werden. Im Kontext der WordPress-Programmierung stellt sich gerade die Frage, wie diese umständliche und zeitaufwändige Praxis in eine kluge Template-Gestaltung eingeschmolzen werden kann. Die Lösung ergibt sich beim OSG Template durch ein individuell programmiertes Pagebuilder-Element, welches sich wie ein ganz konventioneller WordPress-Text pflegen lässt. Weder ist der Umgang mit frickeligen HTML-Bausteinen vonnöten, noch ein Test-Verfahren in dem vom Google bereitgestellten Tool. Auch das spart Zeit und unterstützt User durch ein Mehr an Effizienz.
2.2.2. Das OSG Template im Detail
Um ein Gespür für die intuitive wie flexible Handhabung des OSG Pagebuilders zu erlangen, finden Sie hier einen kurzen Leitfaden.
2.2.2.1. Der OSG Pagebuilder auf einen Blick
Alle verfügbaren Design-Elemente können so ergänzt, gelöscht oder verschoben werden.
Hier sind alle Elemente als kleine lange Boxen zu sehen, aus denen die Landingpage erstellt wurde. Die Reihenfolge ist natürlich im Frontend gleich.
2.2.2.2. Beispiel-Element: Das Feld “Kompetenzen im SEO”:
Klickt man bei den Pagebuilder-Elementen auf den Block “Kompetenzen im SEO”, so stellt sich dieses im Frontend so dar. In puncto Design haben wir über diese Lösung Usability und und Anschaulichkeit miteinander verbunden. Anstatt einzelne Kompetenzen Block für Block Punkt für Punkt aufzulisten, können Sie die einzelnen Textblöcke je nach Aufgabengebiet durchklicken. Das gestaltet die gesamte Landingpage einladender, da Textwüsten und übermäßige Infofluten portioniert aufbereitet werden:
Oben sehen Sie den Namen des Elements. Wie zudem erkennbar ist, lässt sich auch die Hintergrundfarbe einstellen. Darunter finden sich noch weitere Einstellungsmöglichkeiten. So lassen sich auch neue Elemente erstellen, welche im Design vorher gar nicht aufgelistet waren. Über das Plus- oder das Minuszeichen darunter können Sie weitere Elemente (Tabs) ergänzen oder vorhandene löschen.
2.2.2.3. Elemente mit Bildern
Wollen Sie Abschnitte mit Bildern pflegen, so eignet sich unter den Pagebuilder-Bausteinen das “Text/Bild”-Element. Den Anfordernissen von Google entsprechend gibt es immer ein Mobile- und ein Desktop-Bild. Abstände, Hintergrundfarben, Aufteilungen, etc. lassen sich auch bequem einstellen. Wollen Sie für eine mobile ausgespielte Landingpage weniger Bilder anzeigen, so finden Sie unten rechts einen Schalter. Je nach Relevanz und Design-Empfinden kann dies ganz nach Gutdünken erfolgen. Kenntnisse in der WordPress-Programmierung sind auch hier nicht notwendig.
Im Frontend wird das Element dann so ausgespielt:
2.2.2.4. Pflege von Zertifikaten
Auch hier gibt es wieder viele Einstellungsmöglichkeiten wie Hintergrundfarbe, Slider, Stil, etc., um Zertifikate ansprechend im Frontend auszuspielen. Das Wichtigste ist aber: Sie können jederzeit die Zertifikate, Partner-Logos oder Icons selbst ändern und pflegen.
Im Frontend erscheinen dann die einzelnen Zertifikate als Karussel:
2.2.2.5. Pagebuilder-Element: Icons
Über dieses Element können Sie flexibel und grafisch ansprechend meist kürzere Textelemente mit Icons verknüpfen und darstellen: Man kann so einfach eigene Elemente resp. Module neu zusammenbauen. Über diese Einstellungsmöglichkeiten ist das ganz einfach möglich. Wir haben auf unseren Landingpages diese Abschnitte zu Anführung von Studien ergänzt.
Auf der Landingpage sieht dieses Element so aus:
Wollen Sie mehr über die praktische Anwendung des OSG Templates erfahren, so empfehlen wir unser Webinar zu Thema:
3. Fazit
Von einer einfachen Blog-Software zu einem führenden Content-Management-System: Der Siegeszug von WordPress ist auch die Geschichte zunehmender Komplexität. Das macht die WordPress-Entwicklung zu einer anspruchsvollen Aufgabe. Kundenbedürfnisse wie Usability und Design müssen ebenso berücksichtigt werden wie Fragen der Technik, der Suchmaschinenoptimierung oder auch Sicherheitsaspekte.
Nicht zuletzt die jüngeren Entwicklungen im Bereich Cookie-Banner oder die allgemeine Gesetzeslage seit Einführung der DSGVO haben eines klar gemacht. Sicherheit und Datenschutz sind nicht mehr zu vernachlässigende Größen, wenn es darum geht, sich im Online-Geschäft als Player zu etablieren. Fehlt dieses Bewusstsein, können Sicherheits-Probleme schnell existenzbedrohende Ausmaße annehmen.
Es gehört zu den Besonderheiten der OSG, dass sie Branchen-Entwicklungen reflektiert und in die tägliche Praxis übersetzt. Dazu gehören – wie gezeigt – neben hauseigenen, KI-getriebenen Anwendungen wie der Performance Suite auch das OSG Template.
Die schnelllebige Online-Welt verlangt nach Lösungen, die einfach und unkompliziert sind. Geliefert werden oftmals massentaugliche Anfertigungen, die sich gerade durch die hohe Standardisierung als anfällig für Hackerangriffe erweisen. Mit dem OSG Template präsentiert die Münchner Agentur eine Lösung, die Bestand hat, weil sie wandelbar, intuitiv, sicher und daher zukunftweisend ist.
Interessiert? Sprechen sie uns an. Bereits ab 3.000€ geht es los!
Keine Kommentare vorhanden