WPBeginner v6 – Hinter den Kulissen unseres neuen Website-Designs

Wenn Sie in den letzten Wochen WPBeginner besucht haben, ist Ihnen wahrscheinlich aufgefallen, dass wir ein neues Website-Design erhalten haben. Obwohl es viele Ähnlichkeiten mit dem letzten aufweist, hat sich hinter den Kulissen vieles geändert.

Wie ich im Newsletter versprochen habe, möchte ich den Denkprozess hinter unserem Redesign teilen, was wir gelernt haben, was es Neues auf der Website gibt und vor allem, wie Sie einige unserer Erkenntnisse nutzen können, um Ihre Website zu verbessern.

Ein kleiner Hintergrund

Ich habe WPBeginner 2009 gestartet und wie die meisten neuen Ersteller habe ich das Design unserer Website in den ersten 3 Jahren viermal geändert.

Als mein Geschäft wuchs, erkannte ich, dass Website-Neugestaltungen viel Zeit und Ressourcen in Anspruch nehmen, die besser für die Erfüllung unserer Kernaufgabe verwendet werden könnten:

Also habe ich mich darauf konzentriert, meine gesamte Aufmerksamkeit auf unsere Kernaufgabe zu richten, und unser Geschäft wuchs enorm.

Die letzte Neugestaltung von WPBeginner wurde 2016 gestartet, und wir haben seitdem einen langen Weg zurückgelegt.

Hier ist, was in den letzten 5 Jahren passiert ist:

• Wir haben über tausend kostenlose WordPress-Tutorials auf dem WPBeginner-Blog erstellt und Hunderte neuer Video-Tutorials auf unserem YouTube-Kanal hinzugefügt.
• Wir haben unsere WPBeginner Engage Community auf Facebook gestartet, die jetzt die größte WordPress-Facebook-Gruppe mit über 80.000 Mitgliedern ist (die Teilnahme ist kostenlos).
• Wir haben den WPBeginner Growth Fund ins Leben gerufen, um in einige unserer bevorzugten WordPress-Plugins zu investieren, darunter MemberPress, Pretty Links, Formidable Forms, Uncanny Automator und 6 weitere.
• Wir haben zwei neue WordPress-Plugins veröffentlicht: TrustPulse, ein WordPress-Plugin für soziale Beweise, und RafflePress, ein leistungsstarkes Plugin für WordPress-Gewinnspiele und Wettbewerbe.
• Wir haben fünf WordPress-Wachstums-Plugins erworben, darunter das berühmte AIOSEO (All-in-One-SEO-Plugin für WordPress), SeedProd (Drag & Drop WordPress Website Builder), Smash Balloon (Nr. 1 Social-Media-Feeds-Plugin), PushEngage (Website-Push-Benachrichtigungs-Plugin) und AffiliateWP (Affiliate-Management-Plugin für WordPress).
• Wir haben auch fünf WordPress-Plattform- und Infrastruktur-Plugins erworben, darunter das berühmte WP Mail SMTP Plugin (zur Behebung der E-Mail-Zustellbarkeit), SearchWP (leistungsstarkes WordPress-Such-Plugin), Easy Digital Downloads (beliebtes E-Commerce-Plugin für den Verkauf digitaler Produkte), WP Simple Pay (einfaches Plugin zum Akzeptieren von Kreditkartenzahlungen) und Sugar Calendar (einfaches Event-Kalender-Plugin für WordPress).

Insgesamt werden unsere Plugins jetzt von über 19 Millionen Websites genutzt, und 4 unserer Plugins gehören zu den Top 20 WordPress-Plugins aller Zeiten.

Während all dies großartige Errungenschaften sind, haben wir eine neue Reihe von Herausforderungen, die angegangen werden mussten, damit wir uns weiter verbessern und unserer Mission dienen können.

Das bringt mich zu WPBeginner v6.

Design mit Fokus auf Inhaltsauffindbarkeit

WPBeginner begann als einfacher Tutorial-Blog, hat sich aber wirklich zum Wikipedia für WordPress entwickelt.

Unsere Benutzer sagten uns wiederholt, dass sie, wenn sie eine Antwort auf ihre WordPress-Probleme finden wollten, einfach das Schlüsselwort googeln und WPBeginner am Ende hinzufügen, um die beste Lösung zu finden.

Um unseren Lesern zu helfen, schnell die Antwort auf ihre WordPress-Fragen zu finden, haben wir die Suchfunktion zu einem wichtigen Schwerpunkt unserer neuen Homepage gemacht.

Egal, ob Sie ein wiederkehrender Besucher sind, der unsere Inhaltsbibliothek durchsucht, oder ein neuer Leser, der gerade mit WordPress beginnt, die Homepage von WPBeginner macht es Ihnen jetzt leicht, das zu finden, wonach Sie suchen.

Sie werden auch ein ähnliches Such-Widget in unserer Seitenleiste auf allen einzelnen Beitragsseiten sowie in der Kopfzeile unserer Website bemerken, wenn Sie auf das Suchsymbol klicken.

Einer der Gründe, warum WPBeginner zur größten WordPress-Ressourcen-Website für Nicht-Techniker geworden ist, ist, dass wir komplexe WordPress-Themen in einfacher Sprache, Schritt für Schritt, erklären.

Im neuen Design haben wir unserer WordPress-Glossar-Sektion eine Live-Suchfunktion hinzugefügt, damit Sie sich leicht mit gängiger WordPress-Terminologie vertraut machen können. Dies ist im Grunde wie ein Wörterbuch für WordPress-Begriffe.

Als WPBeginner-Nutzer erhalten Sie exklusiven Zugang zu den besten WordPress-Rabatten auf beliebte Plugins, Premium-Themes, Hosting und andere Marketing-Tools.

Unser Team hat wirklich großartige Arbeit geleistet, um die besten Angebote für Sie auszuhandeln, und dieser Bereich ist ziemlich gewachsen und bietet über 100 Coupons und Angebote.

Aufgrund beliebter Benutzeranfragen haben wir auch Live-Suche zu unserem Deals-Bereich hinzugefügt, damit Sie schnell das beste Angebot für Ihre bevorzugten WordPress-Produkte finden können.

Im Jahr 2022 hat die Auffindbarkeit von Inhalten für uns hohe Priorität.

Dies hilft uns, das beste Benutzererlebnis zu bieten, die Verweildauer auf der Website zu erhöhen, Seitenaufrufe zu steigern und unsere allgemeine Absprungrate zu reduzieren.

Ich glaube, dass die Optimierung der Benutzererfahrung (UXO) im Jahr 2022 eine entscheidende Rolle für SEO spielen wird.

Wenn Sie Ihre Konkurrenten schlagen und einen Wettbewerbsvorteil erzielen wollen, empfehle ich dringend, auf UXO zu achten.

Ich werde in diesem Artikel Tipps geben, wie Sie ähnliche Funktionen auf Ihrer Website implementieren können, wie wir es in unserem neuen Theme getan haben.

Wie man die WordPress-Suche verbessert

Die Standard-Suchfunktion von WordPress ist nicht sehr leistungsfähig. Wenn Sie also den Ranking-Algorithmus anpassen und steuern möchten, was bei jeder Suche angezeigt wird, empfehle ich die Verwendung des SearchWP-Plugins.

Alternativ können Sie auch Google Custom Site Search verwenden, das den Google-Algorithmus nutzt. Der Nachteil ist jedoch, dass Google Anzeigen auf Ihren Suchseiten schaltet, was nicht sehr gut aussieht.

Wenn Sie Ihrer Website eine Live-Suche hinzufügen möchten, wie wir es im Bereich Deals oder im Glossar getan haben, dann folgen Sie diesem Tutorial, wie Sie AJAX-Live-Suche in WordPress hinzufügen.

Weitere WordPress-Such-Tutorials, die für Sie hilfreich sein könnten, sind, wie Sie ein benutzerdefiniertes WordPress-Suchformular erstellen und wie Sie eine Suchleiste in das WordPress-Menü einfügen.

Neues WordPress Mega-Menü

Im Sinne der Auffindbarkeit von Inhalten haben wir unsere alten WordPress-Dropdown-Menüs in neue mehrspaltige Mega-Menüs aufgewertet.

Dies ermöglicht es unseren neuen Benutzern, unsere besten Inhalte schnell und einfach zu finden.

Es ermöglicht uns auch, unsere neuen Produkte, die kostenlosen Business-Tools, die wir entwickeln, und mehr besser hervorzuheben.

So fügen Sie ein Mega-Menü in WordPress hinzu

Obwohl wir eine benutzerdefinierte Lösung für WPBeginner entwickelt haben, können Sie dieser Anleitung folgen, wie Sie ein Mega-Menü in WordPress hinzufügen, um Ihre Top-Seiten besser hervorzuheben.

Der WordPress Block-Editor (endlich)

Im Jahr 2019 führte WordPress den super leistungsstarken Block-Editor (auch Gutenberg genannt) zur Inhaltserstellung ein.

Ich habe es sofort auf meinem persönlichen Blog verwendet, aber da WPBeginner ein älteres Theme mit vielen benutzerdefinierten Funktionen verwendete, war der Wechsel nicht ganz einfach.

So für die letzten zwei Jahre waren wir gezwungen, den Classic Editor auf der WPBeginner-Website zu verwenden, während alle unsere neueren Websites die neuesten und besten Funktionen des WordPress-Block-Editors erhielten.

Endlich können wir mit unserem neuen Theme alle großartigen Funktionen des WordPress-Block-Editors nutzen.

Zum Beispiel kann ich jetzt einen wirklich coolen „Wussten Sie schon“-Block hinzufügen, ohne Code schreiben zu müssen:

Wir haben auch mehrere unserer Landingpages mit dem WordPress-Blockeditor komplett neu gestaltet.

Schauen Sie sich zum Beispiel unsere neue Landingpage für die kostenlose WordPress-Blog-Einrichtung an.

Wir haben auch unsere kostenlosen Business-Tools mit dem Block-Editor neu gestaltet, um einige der kürzlich erstellten kostenlosen Tools hervorzuheben.

Wir werden SeedProd weiterhin für die Erstellung vollständig benutzerdefinierter Landingpages verwenden, da es sich um einen echten Drag & Drop WordPress Page Builder handelt.

Obwohl es Spaß gemacht hat, Gutenberg für die Erstellung benutzerdefinierter Landing Pages zu lernen, ist immer noch VIEL Code für die Einrichtung erforderlich, bevor Marketingteams eine benutzerdefinierte Landing Page erstellen können.

Während Marketingteams mit einem Page-Builder-Plugin schnell benutzerdefinierte Landingpages, Funnel-Layouts usw. erstellen können, ohne Hilfe vom Entwicklerteam zu benötigen.

WordPress core team is working hard on the full-site editing features, but it still needs a lot of work before it can compete with the powerful features that you get with page builders like SeedProd, Divi, or Beaver Builder.

Mit dem gesagt, der Block-Editor ist ziemlich genial und es gibt viele WordPress-Block-Plugins, die Sie verwenden können, um coole Designelemente zu erstellen, um Ihre Inhalte zu verbessern.

Hier ist ein weiterer cooler Block, den unser neues Theme zum Hervorheben von empfohlenen Plugins hat:

SeedProd ist der anfängerfreundlichste Drag & Drop Page Builder für WordPress. Er wird mit über 150 vorgefertigten Vorlagen geliefert, und ihre Theme-Builder-Funktion ermöglicht es Ihnen, vollständig benutzerdefinierte WordPress-Themes zu erstellen (ohne Code). Probieren Sie SeedProd noch heute aus »

In den kommenden Blogbeiträgen werden Sie sicher mehr Content-Design-Blöcke sehen, die wir zur weiteren Verbesserung der Lesbarkeit unserer Inhalte einsetzen müssen.

Wechsel von Yoast zu AIOSEO

Lange Zeit verwendete die WPBeginner-Website eine sehr alte & angepasste Version des Yoast SEO-Plugins (v 2.3.5).

Um es in Perspektive zu setzen, sie sind jetzt bei Version 17.

Ich wollte Yoast nicht aktualisieren, da deren Team einige wichtige Funktionen entfernt hatte, die ich für SEO für wichtig hielt.

Ich hatte auch das Gefühl, dass der gesamte WordPress-SEO-Bereich keine Innovationen mehr hervorgebracht hat.

Anfang 2020 haben wir AIOSEO, das ursprüngliche All-in-One-SEO-Plugin, erworben und mein Team hat es komplett überarbeitet.

Ich bin sehr stolz auf die Arbeit, die unser Team geleistet hat, und sie verfügt über alle SEO-Funktionen, die Sie benötigen, um einen Wettbewerbsvorteil zu erzielen.

Wie beim Block-Editor begannen unsere neueren Websites, auf AIOSEO umzusteigen und stellten fest, dass sich ihre Rankings verbesserten, daher war ich bestrebt, es auch auf WPBeginner zu verwenden.

Jetzt nutzen wir die neuesten und besten SEO-Funktionen von All in One SEO.

Wir haben jetzt Funktionen wie Video-Sitemap, um unsere Content-Rankings mit Videos zu verbessern, RSS-Sitemap, um unseren Content schneller zu indizieren, erweiterte SEO-Module für eine feinere Kontrolle über die SEO unserer Website und vieles mehr.

Ich glaube wirklich, dass es das beste SEO-Plugin auf dem Markt ist, und am wichtigsten ist, dass es für kleine Unternehmen und Agenturen preislich fair ist.

Ich plane, in den kommenden Wochen eine vollständige Ausarbeitung darüber zu veröffentlichen, warum wir gewechselt haben, mit einer detaillierten Aufschlüsselung der Funktionen. In der Zwischenzeit können Sie die kostenlose Version von All in One SEO ausprobieren oder sich die Pro-Version ansehen, die alle leistungsstarken Funktionen enthält, die ich auf WPBeginner verwende.

WordPress-Geschwindigkeitsverbesserungen

Zahlreiche Studien haben gezeigt, dass schnellere Websites die Benutzererfahrung verbessern, die Verweildauer auf der Website erhöhen und die Konversionen insgesamt steigern.

Dies ist auch der Grund, warum Google die Website-Geschwindigkeit zu einem SEO-Rankingfaktor gemacht hat.

Wenn Sie die Seite schon eine Weile verfolgen, wissen Sie, dass ich von Leistungsoptimierung besessen bin.

Die WPBeginner-Website war dank unseres großartigen WordPress-Hosting-Partners SiteGround bereits ziemlich schnell. Sie bieten eine hochoptimierte WordPress-Hosting-Lösung, die auf der Google Cloud Platform aufbaut.

Und natürlich folgten wir den WordPress-Best Practices für Geschwindigkeit, aber mit unserem neuen Theme-Design haben wir mehrere bemerkenswerte Geschwindigkeitsverbesserungen vorgenommen.

Hier sind unsere Google Page Speed-Ergebnisse:

Hier ist das Ergebnis der Homepage von GTMetrix und Pingdom:

Und wir haben dieses Ergebnis erzielt, obwohl wir neue Abschnitte, mehr Inhalte auf der Homepage, breitere Bilder usw. hinzugefügt haben.

Und bevor Sie fragen, die WPBeginner-Seite hat derzeit 68 aktive Plugins.

Sie fragen sich vielleicht, wie ich es geschafft habe, mehr Inhalte auf die Website zu bringen, während ich gleichzeitig die Seitengröße reduziert und alles schneller gemacht habe?

Nun, ich habe Dinge entfernt, von denen ich das Gefühl hatte, dass wir sie nicht mehr brauchten, und das sind einige Dinge, die ich wirklich mehr Website-Besitzer in Betracht ziehen lassen möchte.

Dies wird nicht nur dazu beitragen, Ihre Website zu beschleunigen, was sich positiv auf die SEO-Rankings auswirkt, sondern auch Ihren gesamten Bandbreitenverbrauch reduzieren, Kosten senken und den CO2-Fußabdruck Ihrer Website verbessern.

Gravatar aus WordPress-Kommentaren deaktivieren

WordPress verfügt über einen integrierten Drittanbieterdienst namens Gravatar, kurz für Globally Recognized Avatars.

Dies ermöglicht es Ihnen, das Profilbild oder Avatar eines Benutzers zu sehen, wenn er einen Kommentar auf Ihrer WordPress-Website hinterlässt.

Die Herausforderung besteht darin, dass Ihre Website-Besucher ein Gravatar-Konto einrichten müssen, was die meisten Benutzer nicht tun. Stattdessen lädt Ihre Website nur den grauen Mystery-Man-Avatar, was nicht gut aussieht.

Nehmen wir nun an, Sie haben einen beliebten Blogbeitrag mit 50 Kommentaren, bei denen nur 10 % der Benutzer ein Gravatar-Bild haben und 90 % nicht. Nun, das sind 50 zusätzliche Bilder, die Ihre Seite lädt und die dem Inhalt keinen wesentlichen Wert hinzufügen.

Deshalb haben viele beliebte Blogs begonnen, Gravatar zu deaktivieren, und wir tun dasselbe auf WPBeginner.

Diese einfache Änderung hat unsere Seitenladezeiten und die Website-Geschwindigkeitsbewertung drastisch verbessert.

Entfernen von benutzerdefinierten Schriftarten von Drittanbietern

Ich werde ehrlich sein, ich habe in der Vergangenheit nie zweimal über benutzerdefinierte Schriftarten nachgedacht.

Es war etwas, das sich einfach normal anfühlte und die Website zumindest aus typografischer Sicht gut aussehen ließ, wenn man Glück genug hatte, eine schnelle Internetverbindung zu haben.

Im alten WPBeginner-Theme verwendeten wir eine benutzerdefinierte Adobe-Schriftart namens Proxima Nova, eine beliebte Icon-Schriftart namens FontAwesome, und unsere OptinMonster-Popups verwendeten Source Sans Pro von Google Fonts.

Als ich die Website von einem abgelegenen Ort mit schlechter Internetqualität besuchte, erkannte ich wirklich, welche großen Auswirkungen diese Schriftarten auf die Benutzererfahrung haben.

In unserem neuen Design wollte ich dieses Problem lösen, damit Studenten und Geschäftsinhaber in Entwicklungsländern WPBeginner einfach nutzen, WordPress lernen und ihre Online-Präsenz ausbauen können.

Das neue WPBeginner v6 Theme verwendet die Standard-Systemschriftarten, die sich stark weiterentwickelt haben. Sie sehen auf allen Geräten großartig aus und sind natürlich super schnell.

Kein Flackern von ungestyltem Text (FOUT), kein kumulatives Layout-Verschieben (CLS) und deutlich reduzierte Blockierzeit.

Wenn Sie sich im WordPress-Dashboard anmelden oder Github verwenden, werden Sie feststellen, dass unsere Schriftarten ähnlich sind, da beide Plattformen bereits früher auf Systemschriftarten umgestellt haben.

Während das Entfernen benutzerdefinierter Schriftarten für alle Geschäftswebsites möglicherweise keine praktikable Lösung ist, ist es definitiv etwas, das sowohl Designer als auch Entwickler im Hinblick auf die Geschwindigkeit berücksichtigen sollten.

Einige Best Practices, die helfen können:

• Anstatt zwei verschiedene Schriftarten für Überschriften und Inhalt zu verwenden, sollten Sie erwägen, für beides dieselbe Schriftart zu verwenden.
• Anstatt mehrere verschiedene Schriftstärken und -stile wie dünn, normal, halbfett, fett, extra fett, schwarz und dann kursive Versionen all dieser zu verwenden, sollten Sie in Erwägung ziehen, die Schriftstärken auf nur zwei zu reduzieren: normal und fett.
• Anstatt die gesamte FontAwesome- oder eine andere Icon-Font-Bibliothek zu laden, sollten Sie erwägen, direkte SVGs der benötigten Icons hinzuzufügen.

Deaktivieren benutzerdefinierter Schriftarten in OptinMonster

Nachdem das Theme entworfen und codiert war, musste ich noch ein Problem mit Schriftarten lösen.

Meine Website-Popups und E-Mail-Anmeldeformulare verwenden OptinMonster, und sie haben trotzdem Google-Schriftarten geladen.

Nun, das Deaktivieren von OptinMonster war keine Option, da es mir hilft, mehr E-Mail-Abonnenten zu gewinnen und unsere Website-Konversionen zu steigern.

Glücklicherweise ist es eines meiner Unternehmen, also habe ich das Entwicklungsteam um eine Lösung gebeten, um Google-Schriftarten zu deaktivieren.

Es stellte sich heraus, dass ich nicht der Erste war, der diese Funktion angefordert hat, und OptinMonster hatte bereits eine API-Lösung, die nicht nur die Deaktivierung von Google Fonts ermöglicht, sondern auch das Laden jeder benutzerdefinierten Web-Schriftart, die Sie wünschen.

Ich bin ziemlich technikaffin und kann den kleinen Codeausschnitt, den das Team in der Dokumentation geteilt hat, implementieren, aber ich weiß, dass viele unserer Kunden das nicht sind.

Jetzt hat unser Team diese Funktion tatsächlich im Kampagnen-Builder integriert (keine Programmierung erforderlich).

Aber wenn Sie sich mit Code auskennen und diese Einstellung nicht manuell für jede Kampagne deaktivieren möchten, können Sie einfach dem Hack folgen, den ich verwende.

Fügen Sie zuerst den folgenden JS-Snippet hinzu, um OptinMonster daran zu hindern, Webfonts auf Ihrer Website zu laden:

<script type="text/javascript">
document.addEventListener('om.Scripts.init', function(event) {
event.detail.Scripts.enabled.fonts= false;
});
</script>

Fügen Sie als Nächstes den folgenden CSS-Code in Ihre style.css-Datei ein:

html .Campaign * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; }

Vergessen Sie natürlich nicht, die Schriftarten zu ändern, damit sie zu Ihren Website-Schriftarten passen. Dies wendet im Grunde die obige Schriftfamilie auf alle OptinMonster-Kampagnen an, die auf Ihrer Website geladen werden.

Von W3 Total Cache zu WP Rocket gewechselt

Lange Zeit habe ich eine hochgradig angepasste Konfiguration des W3 Total Cache Plugins auf WPBeginner verwendet.

Obwohl es seinen Zweck erfüllte, war es kein Vergleich zu WP Rocket, das wir auf all unseren Produktseiten verwenden.

Mit diesem Redesign bin ich schließlich zu WP Rocket gewechselt, das mit VIELEN großartigen Website-Geschwindigkeitsfunktionen ausgestattet ist, insbesondere mit zuverlässigem Cache-Preloading und Dateiminimierung.

Dieses Plugin ist entscheidend, wenn Sie die Geschwindigkeit Ihrer Website verbessern möchten.

Nur eine kurze Notiz: Wenn Sie ThirstyAffiliates oder Pretty Links zur Verwaltung Ihrer Affiliate-Links verwenden, stellen Sie sicher, dass Sie diese vom Caching ausschließen.

Gehen Sie einfach zum Tab "Erweiterte Regeln" und fügen Sie Ihren Affiliate-Slug unter der Einstellung "URLs niemals cachen" hinzu.

Wenn Sie dies nicht tun und die Cache-Vorabladung aktiviert haben, versucht WP Rocket, Ihre Affiliate-Links zu cachen, da sie wie interne Links aussehen.

Dies kann Ihre Klickzahlen künstlich aufblähen und Ihre Affiliate-Metriken beeinflussen.

Ich habe das WP Rocket-Team gebeten zu prüfen, ob sie beliebte Affiliate-Plugins automatisch erkennen und das Feld für ausgeschlossene URLs vorab ausfüllen können, um es anfängerfreundlicher zu gestalten, und ich hoffe, sie setzen den Vorschlag um.

Was kommt als Nächstes?

Ich habe große Pläne für 2022, deshalb wollte ich das neue Website-Design noch vor Ende dieses Jahres live schalten.

Wir planen, einen völlig neuen Bereich auf WPBeginner zu starten, nach dem viele von Ihnen in den letzten 2 Jahren gefragt haben.

Es kommt bald, und ich hoffe, es bis Anfang Q2 2022 zu starten.

Ich plane auch, mehr mit dem neuen Block-Editor zu experimentieren, um Ihnen ein besseres Leseerlebnis zu bieten.

Ansonsten behalten Sie unseren YouTube-Kanal im Auge, da wir dort 2022 einige wirklich coole Dinge tun werden.

Wie immer möchte ich Ihnen allen für Ihre anhaltende Unterstützung und Ihr Feedback im Laufe der Jahre danken.

Mit freundlichen Grüßen,
Syed Balkhi
Gründer von WPBeginner