Warum wir eine neue Website von Grund auf neu erstellt haben: Eine notwendige Weiterentwicklung

Fassen Sie diesen Beitrag zusammen mit: 14 Minuten Lesezeit

ChatGPT Ratlosigkeit Grok Google AI

1) Warum wir eine neue Website erstellt haben und nicht einfach “die Themen wechseln konnten”

Als wir zum ersten Mal den Änderungsbedarf erkannten, schien die Aufgabe einfach: “Ändern Sie den oberen Block und machen Sie den Aufruf zum Handeln effektiver.” Auf den ersten Blick mag dies wie eine schnelle Lösung erscheinen, aber wir erkannten bald, dass diese kleine Aufgabe viel größere zugrunde liegende Probleme mit der Struktur und dem Design der Website offenbarte. Das Problem war nicht nur ein Block; es war die gesamte Architektur des Geländes, die einer Überarbeitung bedurfte.

Unsere Website wurde im Laufe der Zeit erstellt, wobei verschiedene Seiten mit unterschiedlichen Designs und Layouts hinzugefügt wurden, ohne dass es ein einheitliches Thema oder eine einheitliche Vorlage gab. Jede Seite war in ihrem Design einzigartig, was vielleicht kreativ klingt, aber zu einem erheblichen Problem führte: Inkonsistenz. Wenn wir ein neues Design nur für den oberen Block erstellen und gleichzeitig den Rest der Website so belassen würden, wie er war, würde das bedeuten, dass wir diesen Block auf über 700 Seiten und Beiträgen manuell aktualisieren müssten. Schlimmer noch: Dieser manuelle Vorgang müsste jedes Mal wiederholt werden, wenn wir zukünftige Änderungen vornehmen möchten. Stellen Sie sich die Ineffizienz vor, Hunderte von Seiten durchforsten zu müssen, um sicherzustellen, dass jede Seite über die neuesten Updates verfügt. Schnell wurde klar, dass eine Weiterarbeit mit dem alten Standort nicht nachhaltig wäre.

Über die Logistik der Aktualisierung jeder Seite hinaus mussten wir auch das allgemeine Benutzererlebnis berücksichtigen. Benutzer erwarten heute nahtlose, zusammenhängende Erlebnisse, wenn sie eine Website besuchen. Wenn sie eine Seite nach unten scrollen und sehen, dass das Design inkonsistent ist –wobei jeder Block unterschiedliche Stile verwendet –, entsteht ein unzusammenhängender und unprofessioneller Eindruck. Schlimmer noch: Wenn ein Benutzer von einer Seite zur anderen wechselt und feststellt, dass Layout und Design völlig unterschiedlich sind, verstärkt dies ein Gefühl der Unordnung.

Die Inkonsistenz ging über das Layout hinaus. Viele der Bilder auf der Site waren veraltet, schlecht gestaltet oder wurden sogar von neuronalen Netzwerken unangemessen generiert. Diese Bilder entsprachen nicht den modernen Designstandards und ihr Austausch war eine weitere gewaltige Aufgabe. Die Verwendung schlechter Bilder wirkte sich schlecht auf die Gesamtqualität der Website aus und hinterließ bei den Benutzern einen negativen Eindruck von dem von uns angebotenen Produkt oder der Dienstleistung.

Es gab keine einfache Möglichkeit, die Site mit einem Tool wie Elementor umfassend zu aktualisieren. Jede Seite und jeder Block enthielt ihre eigenen Inline-Stile, was bedeutete, dass Änderungen nicht global vorgenommen werden konnten. Wenn wir den Stil der Site aktualisieren wollten, müssten wir jede einzelne Seite durchgehen und jeden Block manuell aktualisieren, was zeitaufwändig und ineffizient wäre. Vor diesem Hintergrund wurde deutlich, dass unsere einzige Lösung darin bestand, eine neue Website von Grund auf neu zu erstellen. Dies würde es uns ermöglichen, alle Inhalte unter Beibehaltung derselben URLs, jedoch mit einem neuen, konsistenten und leicht aktualisierbaren Design zu übertragen.

2) Warum wir uns entschieden haben, Elementor nicht zu verwenden

Elementor ist einer der beliebtesten Seitenersteller für WordPress. Oberflächlich betrachtet scheint es ein großartiges Tool zu sein, das eine schnelle und einfache Seitenerstellung ermöglicht. Nachdem wir jedoch intensiv damit gearbeitet hatten, stießen wir auf mehrere Einschränkungen, die uns dazu veranlassten, von Elementor abzuweichen und uns stattdessen für eine maßgeschneiderte Website zu entscheiden.

Elementor’s Einschränkungen und Herausforderungen:

1. Fehler und Störungen: Obwohl Elementor viele nützliche Funktionen bietet, ist es nicht ohne technische Probleme. Wenn wir beispielsweise eine Seite kopierten und versuchten, sie zu bearbeiten, sah die neue Seite oft anders aus als das Original, noch bevor wir Änderungen vornahmen. Es gab häufig Fehler bei der Anzeige von Elementen, beispielsweise funktionierte die Eigenschaft “maximale Bildbreite” nicht richtig. Diese Störungen machten es schwierig, ein einheitliches Styling auf allen Seiten sicherzustellen.
2. Zu viel kreative Freiheit, was zu Inkonsistenz führt: Eines der wichtigsten Verkaufsargumente von Elementor’ ist die Möglichkeit, alles individuell anzupassen. Diese Flexibilität kann jedoch ein zweischneidiges Schwert sein, insbesondere wenn mehrere Redakteure an der Website arbeiten. Für Laien ist es leicht, unbeabsichtigt Seiten mit inkonsistentem Design zu erstellen. Wir haben beispielsweise Fälle gesehen, in denen Redakteure rosa Text auf rosa Schaltflächen verwendeten oder fliegende orangefarbene Dreiecke im Hintergrund hinzufügten, was zu einem überladenen und verwirrenden Design führte. Ohne ein strenges Designsystem war es unmöglich, eine einheitliche visuelle Identität aufrechtzuerhalten.
3. Eingeschränkte Anpassung für erweiterte Funktionalität: Während Elementor sich durch die grundlegende Seitenerstellung mit Text und Bildern auszeichnet, wird es schwieriger, wenn Sie benutzerdefinierte Funktionen hinzufügen müssen. Wir waren oft auf die eingebauten Blöcke beschränkt, die sich nur schwer an komplexere Funktionen anpassen ließen. Als unsere Anforderungen über die grundlegenden Layouts hinaus wuchsen, wurden die Einschränkungen von Elementor’ immer deutlicher.
4. Aufgeblähter Code und Leistungsprobleme: Elementor’s Methode zum Erstellen von Seiten führt zu einer übermäßigen Verschachtelung von Elementen. Beispielsweise generiert Elementor automatisch mehrere <div> Behälter innerhalb anderer <div> Elemente, jedes mit seinem eigenen Stilsatz. Dies führt zu einer aufgeblähten Struktur, die sich negativ auf die Ladegeschwindigkeit, die Seitenleistung und letztendlich auf das SEO-Ranking der Website auswirkt. Als wir Geschwindigkeitstests durchführten, waren die Ergebnisse durchweg schlecht und die Hauptursache dafür war der von Elementor generierte umfangreiche Code.
5. Keine A/B-Testfunktionen: In der heutigen digitalen Landschaft sind A/B-Tests für die Optimierung des Benutzererlebnisses unerlässlich. Elementor bietet jedoch nicht die Möglichkeit, verschiedenen Benutzern unterschiedliche Versionen der Site anzuzeigen. Jeder sieht dieselbe Site, was unsere Möglichkeiten zum Testen und Optimieren von Designelementen wie Farben, Schaltflächenformen und Hintergrundbildern einschränkt. Ohne diese Funktionalität könnten wir die Seite nicht anhand des realen Nutzerverhaltens optimieren.
6. Datenbank-Bloat: Einer der vielleicht größten Nachteile von Elementor ist die Art und Weise, wie es mit Stilen und Inhalten umgeht. Elementor speichert Stile, verschachtelte Strukturen und andere unnötige Tags, die mit dem Inhalt in der Datenbank vermischt sind. Dies führt zu einer aufgeblähten Datenbank, die nicht bereinigt wird, selbst wenn Elementor deaktiviert oder deinstalliert ist. Daher löst der Wechsel zu einem neuen Theme oder Framework das Problem nicht – diese Stile bleiben in den Seiten eingebettet und verursachen weiterhin Probleme.

Angesichts all dieser Herausforderungen wurde klar, dass wir eine robustere Lösung brauchten. Wir haben uns entschieden, eine neue, unabhängige Website ohne Elementor zu erstellen und uns für einen nachhaltigeren und flexibleren Ansatz zu entscheiden.

3) So erstellen Sie eine Seite auf der neuen Website

Durch die Erstellung der neuen Site von Grund auf hatten wir die Möglichkeit, einen sauberen, optimierten Prozess zum Erstellen von Seiten zu etablieren. Im neuen System ist das Erstellen einer Seite unkompliziert:

1. Anmelden zum WordPress-Admin-Panel und klicken Sie Seiten -> Neue Seite hinzufügen.
2. Sie sehen den Standard-WordPress-Editor, in dem Sie Text schreiben oder einfügen, Links hinzufügen und Bilder hochladen können.

Dieser Prozess ist einfach, aber flexibel. Anstatt sich auf das komplizierte Blocksystem von Elementor’ zu verlassen, ist der Inhaltseditor in WordPress viel übersichtlicher und ermöglicht schnelle Updates und einfache Anpassungen. Unterhalb des Editors befinden sich Einstellungen für Erweiterte benutzerdefinierte Felder (ACF), die bereits so konfiguriert sind, dass die Konsistenz auf der gesamten Website gewahrt bleibt.

ACF ermöglicht es uns, flexible Inhaltsabschnitte mit Blöcken wie zu erstellen Inhalt 1…Inhalt 15, wo Sie ganz einfach die Titel-, Text-, Bild- und Schaltflächenbeschriftungen für jeden Abschnitt der Seite festlegen können. Diese Blöcke wechseln automatisch die Positionierung von Bildern und Text ab und stellen so sicher, dass das Layout optisch ansprechend bleibt, ohne dass manuelle Anpassungen erforderlich sind.

Für Bilder haben wir ein Farbabgleichsystem implementiert, das automatisch einen Farbverlauf in den Hauptfarben der Site anwendet. Dadurch wird sichergestellt, dass alle Bilder mit der Gesamtästhetik übereinstimmen. Für Logos oder Screenshots, bei denen die Farben intakt bleiben müssen, gibt es eine Option “Farben behalten”, die den Farbverlauf überschreibt.

Dieses System vereinfacht die Inhaltsverwaltung und gewährleistet gleichzeitig die Designkonsistenz auf allen Seiten.

4) So erstellen Sie einen neuen Beitrag

Das Erstellen von Beiträgen auf der neuen Site erfolgt nach dem gleichen optimierten Prozess wie das Erstellen von Seiten, mit einigen wesentlichen Unterschieden:

• Beiträge haben URLs, die Folgendes enthalten: ../blog/.., um sie von Seiten zu unterscheiden.
• In der rechten Seitenleiste werden in einem Block automatisch die drei neuesten Artikel angezeigt, was dazu beiträgt, dass der Blog dynamisch und ansprechend bleibt.

Die Vorlage für alle Beiträge befindet sich in der Datei Vorlage-Teile/Inhalt/Inhalt-Single.php, das die Struktur und das Layout jedes Blogbeitrags übernimmt. Diese konsistente Vorlage ermöglicht einfache Aktualisierungen und stellt sicher, dass alle Beiträge denselben Designrichtlinien entsprechen.

5) Erweiterte benutzerdefinierte Felder (ACF)

ACF war ein wesentlicher Bestandteil der Entwicklung unserer neuen Website. Es ermöglicht uns, benutzerdefinierte Felder zu erstellen, die einfach über das WordPress-Admin-Panel verwaltet werden können. Felder wie Inhalt_1 werden im PHP-Code referenziert, sodass wir für jede Seite und jeden Beitrag dynamisch den richtigen Inhalt abrufen können.

Diese Flexibilität ist von entscheidender Bedeutung, um sicherzustellen, dass wir die Website effizient verwalten und aktualisieren können und gleichzeitig bei Bedarf Raum für Anpassungen bieten.

6) A/B-Prüfung

Eine der bedeutendsten Verbesserungen, die wir mit dem neuen Standort vorgenommen haben, war die Implementierung von A/B-Tests. A/B-Tests ermöglichen es uns, zwei Versionen der Website zu vergleichen, um zu sehen, welche bei Benutzern besser abschneidet. Dazu kann das Testen verschiedener Farben, Schaltflächenformen, Hintergründe oder sogar Layouts gehören.

Wir haben diese Funktionalität implementiert mit GET-Parameter in der URL. So können beispielsweise zwei identische Werbekampagnen erstellt werden, allerdings mit unterschiedlichen URLs:

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

Wenn Benutzer auf diese Links klicken, wird der Parameter in einem Cookie gespeichert. Abhängig vom Wert des Parameters zeigt die Site unterschiedliche Versionen der Seite an, beispielsweise unterschiedliche Schaltflächenfarben oder Hintergrundbilder. Dadurch können wir wertvolle Daten zu Benutzerpräferenzen und -verhalten sammeln.

Alle Ereignisse werden in einem protokolliert .csv Datei sowie in einer MySQL-Datenbank, sodass wir die Daten analysieren und fundierte Entscheidungen über Site-Verbesserungen treffen können.

7) Die Datei functions.php

Die Funktionen.php Dateien in WordPress werden oft fälschlicherweise als auf blogbezogene Aufgaben beschränkt angesehen. Diese Datei ist jedoch viel mehr als nur ein Dienstprogramm zum Verwalten von Beiträgen oder Blogfunktionen; sie dient als Rückgrat für alle benutzerdefinierten Funktionen auf der Site. In unserem Fall haben wir die Funktionen.php Datei zum Hinzufügen erweiterter Funktionen, Optimieren der Leistung und Verwalten seitenweiter Skripte und Einstellungen.

Hier ein Überblick, wie die Funktionen.php Datei spielte eine entscheidende Rolle bei unserer Entwicklung:

• Benutzerdefinierte Beitragstypen und Taxonomien

Eine der wichtigsten Anwendungen der Funktionen.php Die Datei sollte benutzerdefinierte Beitragstypen und Taxonomien erstellen, wodurch wir Inhalte effektiver organisieren konnten. Anstatt uns ausschließlich auf die Standardstruktur von WordPress (Seiten und Beiträge) zu verlassen, haben wir benutzerdefinierte Typen für bestimmte Inhalte wie Fallstudien, Erfahrungsberichte oder Produktfunktionen eingeführt. Dadurch blieben unsere Inhalte nicht nur besser organisiert, sondern das Benutzererlebnis wurde auch verbessert, da die Navigation und das Auffinden relevanter Informationen einfacher wurden.

Um beispielsweise einen benutzerdefinierten Beitragstyp für Fallstudien zu erstellen, haben wir den folgenden Code hinzugefügt Funktionen.php:

function create_case_study_post_type() {

  register_post_type( 'case_studies',

    array(

           'labels' =>``array(

              'name' => __( 'Case Studies' ),

          'singular_name' => __( 'Case Study' )

        ),

            'public' => true,

           'has_archive' => true,

           'rewrite' => array('slug' => 'case-studies'),

       )

  );

}

add_action( 'init', 'create_case_study_post_type' );Dadurch entstand ein neuer Beitragstyp namens “Case Studies”, der sich ähnlich wie normale Beiträge verhielt, jedoch über eine eigene Archiv- und Taxonomiestruktur verfügte.

• Laden externer Skripte und Stile

Eine weitere kritische Verwendung von Funktionen.php bestand darin, externe Skripte und Stile zu laden und sicherzustellen, dass unsere Website über alle erforderlichen Bibliotheken und Frameworks verfügt. Wir haben zum Beispiel Bibliotheken integriert wie Slick.js für Schieberegler und AOS (Beim Scrollen animieren) für flüssige Animationen. Indem wir diese Assets selektiv nur dann laden, wenn sie benötigt werden (z. B. auf bestimmten Seiten oder Vorlagen), haben wir unnötiges Aufblähen reduziert und die Seitenladegeschwindigkeit verbessert.

So haben wir das Laden von Stilen und Skripten gehandhabt:

function load_custom_scripts() {

  // Load Slick slider for specific templates

   if( is_page_template('template-slider.php') ) {

    wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/css/slick.css' );

        wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), '', true );

   }

   // Load AOS animations site-wide

   wp_enqueue_style( 'aos-css', get_template_directory_uri() . '/css/aos.css' );

   wp_enqueue_script( 'aos-js', get_template_directory_uri() . '/js/aos.js', array('jquery'), '', true );

}

add_action( 'wp_enqueue_scripts', 'load_custom_scripts' );Durch die Verwendung bedingter Prüfungen (z. B is_page_template()) haben wir sichergestellt, dass unnötige Skripte nicht siteweit geladen werden, wodurch die Leistung optimiert wurde.

• Benutzerdefinierte Shortcodes

Um die Flexibilität für nicht-technische Benutzer zu verbessern, die den Website-Inhalt verwalten, haben wir benutzerdefinierte Shortcodes hinzugefügt über Funktionen.php. Diese Shortcodes ermöglichten es Benutzern, komplexe Funktionen oder gestaltete Elemente einfach einzufügen, ohne den Code berühren zu müssen. Wir haben beispielsweise einen Shortcode zum Hinzufügen benutzerdefinierter Schaltflächen an beliebiger Stelle auf der Site erstellt:

[REDIGIERT]

Dieser Shortcode machte es Redakteuren leicht, Schaltflächen mit benutzerdefiniertem Text und URLs hinzuzufügen, was schnelle Anpassungen ermöglichte, ohne das Design zu beschädigen.

8) Umgang mit SEO und Site-Geschwindigkeit

Ein Hauptaugenmerk bei der Überarbeitung der Website lag auf der Verbesserung der SEO und der allgemeinen Website-Leistung. Die ursprüngliche Site, die mit Elementor erstellt wurde, hatte Probleme mit langsamen Ladezeiten und suboptimalen SEO-Praktiken aufgrund von aufgeblähtem Code und nicht optimierten Bildern.

Verbesserung der SEO

Um sicherzustellen, dass unsere neue Website SEO-freundlich ist, haben wir von Anfang an mehrere Best Practices implementiert:

• Semantisches HTML: Wir haben das HTML der Website sorgfältig strukturiert und Header-Tags ordnungsgemäß verwendet (<h1>, <h2>, usw.), um sicherzustellen, dass Suchmaschinen die Inhaltshierarchie leicht analysieren und verstehen können. Dies ist insbesondere für SEO-Rankings und Barrierefreiheit wichtig.
• Meta-Tags und Open Graph-Daten: Wir haben die genutzt Yoast SEO Plugin zur Verarbeitung von Metatiteln, Beschreibungen und Open Graph-Daten für den sozialen Austausch. Durch die Verwendung von Yoast haben wir sichergestellt, dass jede Seite und jeder Beitrag über optimierte Metadaten verfügt, was für die Sichtbarkeit in Suchmaschinen und die Klickraten von Social-Media-Plattformen von entscheidender Bedeutung ist.
• Schema-Markup: Verwendung der Funktionen.php Datei haben wir benutzerdefiniertes Schema-Markup für strukturierte Daten hinzugefügt, wodurch die Art und Weise verbessert wird, wie Suchmaschinen unsere Seiten in den Suchergebnissen anzeigen. Beispielsweise haben wir Schemata für Artikel, Fallstudien und Produkte eingefügt, um Suchmaschinen dabei zu helfen, unsere Inhalte besser zu kategorisieren.

function add_schema_markup() {
  echo '<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "ConveyThis",
    "url": "https://www.conveythis.com",
    "logo": "https://www.conveythis.com/logo.png", "sameAs": [ "https://www.facebook.com/conveythis", "https://twitter.com/conveythis" ] } </script>'; } add_action( 'wp_head', 'add_schema_markup' );

Optimierung der Standortgeschwindigkeit

Leistung ist nicht nur ein entscheidender Faktor für die Benutzererfahrung, sondern auch für SEO-Rankings. Wir haben mehrere Schritte unternommen, um die Geschwindigkeit der Website zu verbessern:

• Bildoptimierung: Wir haben moderne Bildformate verwendet wie WebP, die bessere Komprimierungsraten bieten als herkömmliche Formate wie PNG und JPEG. Alle Bilder wurden in der entsprechenden Größe basierend auf der Bildschirmauflösung des Benutzers bereitgestellt, was schnelle Ladezeiten auch auf mobilen Geräten gewährleistet.
• Lazy Loading: Durch die Implementierung von Lazy Loading für Bilder haben wir sichergestellt, dass zunächst nur die auf dem Bildschirm des Benutzers sichtbaren Bilder geladen wurden. Zusätzliche Bilder würden beim Scrollen des Benutzers geladen, wodurch die anfänglichen Seitenladezeiten verkürzt würden.
• Zwischenspeicherung und Minimierung: Wir haben verwendet WP Rocket zum Zwischenspeichern, Minimieren und Komprimieren von HTML, CSS und JavaScript Dateien. WP Rocket hat uns geholfen, schnellere Ladezeiten zu erreichen, indem wir die Gesamtdateigröße reduziert und statische zwischengespeicherte Versionen von Seiten für wiederkehrende Besucher bereitgestellt haben.

9) Datenbankoptimierung und -bereinigung

Aufgrund der Aufblähung und ineffizienten Datenbankstruktur von Elementor“hatte die alte Website eine erhebliche Menge an ”Junk-’Daten angesammelt. Um einen reibungslosen Betrieb der neuen Site zu gewährleisten, haben wir eine gründliche Bereinigung und Optimierung der Datenbank durchgeführt.

• Entfernen alter Elementor-Daten

Wie bereits erwähnt, waren seine Stile und Einstellungen auch nach der Deaktivierung von Elementor noch in die Datenbank eingebettet. Wir haben benutzerdefinierte Abfragen verwendet, um diese überschüssigen Daten zu löschen und die Datenbank zu bereinigen. Darüber hinaus haben wir alle ungenutzten Mediendateien, Postrevisionen und abgelaufenen Transienten entfernt, die sich im Laufe der Zeit angesammelt hatten.

• Datenbankindizierung

Wir haben die Datenbank außerdem optimiert, indem wir häufig abgefragten Spalten Indizes hinzugefügt haben, um sicherzustellen, dass Datenbankabfragen schneller und effizienter sind. Zum Beispiel das Hinzufügen eines Index zum post_date Die Spalte beschleunigte Abfragen zu aktuellen Beiträgen und verbesserte so die Leistung unserer Blogseiten.

Fazit

Die Entscheidung, eine neue Website von Grund auf neu zu erstellen, wurde durch die Einschränkungen und Ineffizienzen der alten Website vorangetrieben. Aufgrund von Designinkonsistenzen, aufgeblähten Stilen und Leistungsproblemen, die durch Elementor verursacht wurden, war ein einfacher Wechsel des Designs keine praktikable Option. Durch die Erstellung einer neuen Site mit benutzerdefinierter Entwicklung und erweiterten benutzerdefinierten Feldern haben wir eine effizientere, einheitlichere und professionellere Website erstellt, die das Benutzererlebnis verbessert und gleichzeitig optimierte Updates und A/B-Testfunktionen ermöglicht. Dieser neue Standort bietet eine solide Grundlage für zukünftiges Wachstum und Verbesserungen.