Pourquoi nous avons créé un nouveau site Web à partir de zéro : une évolution nécessaire

Résumez ce post avec : 14 minutes de lecture

ChatGPT Perplexité Grok Google IA

1) Pourquoi nous avons créé un nouveau site Web et ne pouvions pas simplement “changer de thème”

Lorsque nous avons identifié pour la première fois le besoin de changement, la tâche semblait simple : “Changer le bloc supérieur et rendre l’appel à l’action plus efficace.” À première vue, cela peut sembler une solution rapide, mais nous avons vite réalisé que cette petite tâche révélait des problèmes sous-jacents beaucoup plus importants liés à la structure et à la conception du site. Le problème n’était pas seulement un bloc ; c’était toute l’architecture du site qui avait besoin d’une refonte.

Notre site Web a été construit au fil du temps, avec différentes pages ajoutées à l'aide de divers modèles et mises en page, sans aucun thème ou modèle unificateur. Chaque page était unique dans sa conception, ce qui pouvait paraître créatif mais entraînait un problème important : l’incohérence. Si nous allions de l'avant et créions un nouveau design uniquement pour le bloc supérieur tout en gardant le reste du site tel quel, cela signifierait mettre à jour manuellement ce bloc sur plus de 700 pages et articles. Pire encore, ce processus manuel devrait être répété chaque fois que nous souhaitons apporter des modifications futures. Imaginez l’inefficacité de devoir parcourir des centaines de pages, en s’assurant que chacune d’elles dispose des dernières mises à jour. Il est rapidement devenu évident que continuer à travailler avec l’ancien site ne serait pas durable.

Au-delà de la simple logistique de mise à jour de chaque page, nous avons dû prendre en compte l’expérience utilisateur globale. Les utilisateurs d’aujourd’hui s’attendent à des expériences fluides et cohérentes lorsqu’ils visitent un site Web. S'ils font défiler une page et voient que le design est incohérent – chaque bloc utilisant des styles différents – cela crée une impression décousue et non professionnelle. Pire encore, lorsqu’un utilisateur passe d’une page à une autre et remarque que la mise en page et le design sont entièrement différents, cela renforce un sentiment de désordre.

L’incohérence s’étendait au-delà de la mise en page. De nombreuses images du site étaient obsolètes, mal stylisées ou même générées de manière inappropriée par des réseaux neuronaux. Ces images n’étaient pas conformes aux normes de conception modernes et leur remplacement était une autre tâche ardue. L’utilisation de mauvaises images a eu un impact négatif sur la qualité globale du site, laissant aux utilisateurs une impression négative du produit ou du service que nous proposions.

Il n’existait aucun moyen simple de mettre à jour le site de manière exhaustive à l’aide d’un outil comme Elementor. Chaque page et chaque bloc contenaient leurs propres styles en ligne, ce qui signifie que les modifications ne pouvaient pas être apportées globalement. Si nous voulions mettre à jour le style du site, nous devrions parcourir chaque page et mettre à jour manuellement chaque bloc, ce qui prendrait du temps et serait inefficace. Dans cette optique, il est devenu évident que notre seule solution était de créer un nouveau site Web à partir de zéro. Cela nous permettrait de transférer tout le contenu tout en conservant les mêmes URL mais avec une conception nouvelle, cohérente et facilement actualisable.

2) Pourquoi nous avons décidé de ne pas utiliser Elementor

Elementor est l'un des créateurs de pages les plus populaires pour WordPress. À première vue, cela semble être un excellent outil qui permet une création de page rapide et facile. Cependant, après avoir beaucoup travaillé avec, nous avons rencontré plusieurs limitations qui nous ont fait décider de nous éloigner de Elementor et d'opter plutôt pour un site Web personnalisé.

Elementor’s Limites et défis :

1. Bugs et problèmes techniques: Bien que Elementor offre de nombreuses fonctionnalités utiles, il n’est pas sans problèmes techniques. Par exemple, lorsque nous copiions une page et essayions de la modifier, la nouvelle page semblait souvent différente de l’originale, avant même d’apporter des modifications. Il y avait des bugs fréquents dans la façon dont les éléments étaient affichés, comme le fait que la propriété “largeur maximale de l'image” ne fonctionnait pas correctement. Ces problèmes rendaient difficile la garantie d’un style cohérent sur toutes les pages.
2. Trop de liberté créative, conduisant à l'incohérence: L’un des principaux arguments de vente de Elementor’ est la possibilité de tout personnaliser. Cependant, cette flexibilité peut être une arme à double tranchant, surtout lorsque plusieurs éditeurs travaillent sur le site. Il est facile pour les non-professionnels de créer involontairement des pages aux designs incohérents. Par exemple, nous avons vu des cas d’éditeurs utilisant du texte rose sur des boutons roses ou ajoutant des triangles orange volants en arrière-plan, ce qui a donné lieu à un design encombré et déroutant. Sans un système de conception strict en place, il est devenu impossible de maintenir une identité visuelle cohérente.
3. Personnalisation limitée pour les fonctionnalités avancées: Bien que Elementor excelle dans la création de pages de base avec du texte et des images, cela devient plus difficile lorsque vous devez ajouter des fonctionnalités personnalisées. Nous nous sommes souvent retrouvés limités aux blocs intégrés, difficiles à personnaliser pour des fonctionnalités plus complexes. À mesure que nos besoins dépassaient les mises en page de base, les limites de Elementor’ devenaient de plus en plus évidentes.
4. Code gonflé et problèmes de performances: La méthode de création de pages de Elementor’ introduit une imbrication excessive d'éléments. Par exemple, Elementor génère automatiquement plusieurs <div> conteneurs dans d'autres <div> éléments, chacun avec son propre ensemble de styles. Il en résulte une structure gonflée qui affecte négativement la vitesse de chargement, les performances de la page et, en fin de compte, le classement SEO du site Web. Lorsque nous avons effectué des tests de vitesse, les résultats étaient systématiquement médiocres et le code lourd généré par Elementor en était en grande partie responsable.
5. Aucune capacité de test A/B: Dans le paysage numérique actuel, les tests A/B sont essentiels pour optimiser l'expérience utilisateur. Cependant, Elementor n'offre pas la possibilité d'afficher différentes versions du site à différents utilisateurs. Tout le monde voit le même site, ce qui limite notre capacité à tester et à affiner les éléments de conception tels que les couleurs, les formes des boutons et les images d’arrière-plan. Sans cette fonctionnalité, nous ne pourrions pas optimiser le site en fonction du comportement réel des utilisateurs.
6. Ballonnement de la base de données: L’un des inconvénients les plus importants de Elementor est peut-être la façon dont il gère les styles et le contenu. Elementor stocke les styles, les structures imbriquées et d’autres balises inutiles mélangées au contenu de la base de données. Cela conduit à une base de données gonflée qui n'est pas nettoyée même lorsque Elementor est désactivé ou désinstallé. Par conséquent, le passage à un nouveau thème ou framework ne résout pas le problème – ces styles restent intégrés dans les pages, continuant à causer des problèmes.

Compte tenu de tous ces défis, il est devenu évident que nous avions besoin d’une solution plus robuste. Nous avons pris la décision de construire un nouveau site Web indépendant sans Elementor, en optant pour une approche plus durable et flexible.

3) Comment créer une page sur le nouveau site

La création du nouveau site à partir de zéro nous a donné l’opportunité d’établir un processus propre et rationalisé pour la création de pages. Dans le nouveau système, créer une page est simple :

1. Connectez-vous au panneau d'administration WordPress et cliquez Pages -> Ajouter une nouvelle page.
2. Vous verrez l'éditeur WordPress standard, où vous pouvez écrire ou coller du texte, ajouter des liens et télécharger des images.

Ce processus est simple mais flexible. Au lieu de s'appuyer sur le système de blocs compliqué de Elementor’, l'éditeur de contenu de WordPress est beaucoup plus propre, permettant des mises à jour rapides et une personnalisation facile. Sous l'éditeur, il y a des paramètres pour Champs personnalisés avancés (ACF), qui sont déjà configurés pour maintenir la cohérence sur l'ensemble du site.

ACF nous permet de créer des sections de contenu flexibles, avec des blocs comme Contenu 1…Contenu 15, où vous pouvez facilement définir le titre, le texte, l'image et les étiquettes des boutons pour chaque section de la page. Ces blocs alternent automatiquement le positionnement des images et du texte, garantissant que la mise en page reste visuellement attrayante sans nécessiter de réglages manuels.

Pour les images, nous avons implémenté un système de correspondance des couleurs qui applique automatiquement un dégradé dans les couleurs principales du site. Cela garantit que toutes les images correspondent à l’esthétique globale. Pour les logos ou les captures d'écran où les couleurs doivent rester intactes, il existe une option “conserver les couleurs” qui remplace le dégradé.

Ce système simplifie la gestion du contenu tout en maintenant la cohérence de la conception sur toutes les pages.

4) Comment créer un nouveau message

La création d'articles sur le nouveau site suit le même processus simplifié que la création de pages, avec quelques différences clés :

• Les publications ont des URL qui incluent ../blog/.., en les distinguant des pages.
• Dans la barre latérale droite, un bloc affiche automatiquement les trois derniers articles, contribuant ainsi à maintenir le blog dynamique et engageant.

Le modèle pour tous les messages se trouve dans le fichier pièces-de-modèle/contenu/contenu-single.php, qui gère la structure et la mise en page de chaque article de blog. Ce modèle cohérent permet des mises à jour faciles et garantit que tous les articles respectent les mêmes directives de conception.

5) Champs personnalisés avancés (ACF)

ACF a été un élément essentiel du développement de notre nouveau site Web. Il nous permet de créer des champs personnalisés qui peuvent être facilement gérés via le panneau d'administration WordPress. Des champs comme contenu_1 sont référencés dans le code PHP, ce qui nous permet d'extraire dynamiquement le contenu correct pour chaque page et publication.

Cette flexibilité est essentielle pour garantir que nous pouvons gérer et mettre à jour le site efficacement tout en offrant une marge de personnalisation en cas de besoin.

6) Tests A/B

L’une des améliorations les plus significatives que nous avons apportées au nouveau site a été la mise en œuvre des tests A/B. Les tests A/B nous permettent de comparer deux versions du site pour voir laquelle fonctionne le mieux avec les utilisateurs. Cela peut inclure le test de différentes couleurs, formes de boutons, arrière-plans ou même mises en page.

Nous avons implémenté cette fonctionnalité en utilisant Obtenir les paramètres dans l'URL. Par exemple, deux campagnes publicitaires identiques peuvent être créées, mais avec des URL différentes :

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

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

Lorsque les utilisateurs cliquent sur ces liens, le paramètre est enregistré dans un cookie. En fonction de la valeur du paramètre, le site affichera différentes versions de la page, telles que différentes couleurs de boutons ou images d'arrière-plan. Cela nous permet de recueillir des données précieuses sur les préférences et les comportements des utilisateurs.

Tous les événements sont enregistrés dans un .csv fichier, ainsi que dans une base de données MySQL, nous permettant d'analyser les données et de prendre des décisions éclairées sur les améliorations du site.

7) Le fichier functions.php

Le fonctions.php Le fichier dans WordPress est souvent mal compris car il est limité aux tâches liées au blog. Cependant, ce fichier est bien plus qu’un simple utilitaire de gestion d’articles ou de fonctionnalités de blog ; il sert d’épine dorsale à toutes les fonctionnalités personnalisées du site. Dans notre cas, nous avons utilisé le fonctions.php fichier pour ajouter des fonctionnalités avancées, optimiser les performances et gérer les scripts et les paramètres à l'échelle du site.

Voici un aperçu de la façon dont le fonctions.php file a joué un rôle essentiel dans notre développement :

• Types de publications personnalisées et taxonomies

L’une des principales utilisations du fonctions.php Le fichier devait créer des types de publication et des taxonomies personnalisés, ce qui nous a permis d'organiser le contenu plus efficacement. Au lieu de nous fier uniquement à la structure WordPress par défaut (pages et publications), nous avons introduit des types personnalisés pour un contenu spécifique, tels que des études de cas, des témoignages ou des fonctionnalités de produits. Cela a non seulement permis de mieux organiser notre contenu, mais a également amélioré l’expérience utilisateur en facilitant la navigation et la recherche d’informations pertinentes.

Par exemple, pour créer un type de publication personnalisé pour les études de cas, nous avons ajouté le code suivant dans fonctions.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' );Cela a créé un nouveau type de publication appelé “Études de cas” qui se comportait de manière similaire aux publications classiques mais avec sa propre structure d'archives et de taxonomie.

• Chargement de scripts et de styles externes

Une autre utilisation critique de fonctions.php il s'agissait de charger des scripts et des styles externes, garantissant ainsi que notre site Web disposait de toutes les bibliothèques et frameworks nécessaires. Par exemple, nous avons intégré des bibliothèques comme Slick.js pour les curseurs et AOS (Animer sur Scroll) pour des animations fluides. En chargeant sélectivement ces ressources uniquement lorsqu'elles étaient nécessaires (par exemple, sur des pages ou des modèles spécifiques), nous avons réduit les gonflements inutiles et amélioré les vitesses de chargement des pages.

Voici comment nous avons géré le chargement des styles et des scripts :

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' );En utilisant des contrôles conditionnels (par exemple, is_page_template()), nous avons veillé à ce que les scripts inutiles ne soient pas chargés sur tout le site, optimisant ainsi les performances.

• Codes courts personnalisés

Pour améliorer la flexibilité pour les utilisateurs non techniques gérant le contenu du site, nous avons ajouté des codes courts personnalisés via fonctions.php. Ces codes courts permettaient aux utilisateurs d’insérer facilement des fonctionnalités complexes ou des éléments stylisés sans avoir besoin de toucher au code. Par exemple, nous avons créé un shortcode pour ajouter des boutons personnalisés n'importe où sur le site :

[EXPURGÉ]

Ce shortcode permettait aux éditeurs d'ajouter facilement des boutons avec du texte et des URL personnalisés, permettant ainsi des ajustements rapides sans casser la conception.

8) Gestion du référencement et de la vitesse du site

L’un des principaux objectifs de la refonte du site Web était d’améliorer le référencement et les performances globales du site. Le site original, construit à l'aide de Elementor, présentait des problèmes de temps de chargement lents et de pratiques de référencement sous-optimales en raison d'un code gonflé et d'images non optimisées.

Améliorer le référencement

Pour garantir que notre nouveau site soit optimisé pour le référencement, nous avons mis en œuvre plusieurs bonnes pratiques dès le départ :

• HTML sémantique: Nous avons soigneusement structuré le HTML du site avec une utilisation appropriée des balises d'en-tête (<h1>, <h2>, etc.), garantissant que les moteurs de recherche pourraient facilement analyser et comprendre la hiérarchie du contenu. Ceci est particulièrement important tant pour le classement SEO que pour l’accessibilité.
• Balises méta et données graphiques ouvertes: Nous avons tiré parti du Yoast SEO plugin pour gérer les méta-titres, les descriptions et les données Open Graph pour le partage social. En utilisant Yoast, nous avons veillé à ce que chaque page et chaque publication disposent de métadonnées optimisées, ce qui est crucial pour la visibilité des moteurs de recherche et les taux de clics des plateformes de médias sociaux.
• Balisage de schéma: En utilisant le fonctions.php fichier, nous avons ajouté un balisage de schéma personnalisé pour les données structurées, améliorant ainsi la façon dont les moteurs de recherche affichent nos pages dans les résultats de recherche. Par exemple, nous avons inclus un schéma pour les articles, les études de cas et les produits, aidant ainsi les moteurs de recherche à mieux catégoriser notre contenu.

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' );

Optimisation de la vitesse du site

La performance est un facteur essentiel non seulement pour l’expérience utilisateur mais également pour le classement SEO. Nous avons pris plusieurs mesures pour améliorer la vitesse du site :

• Optimisation d'image: Nous avons utilisé des formats d’image modernes tels que WebP, qui offrent de meilleurs taux de compression que les formats traditionnels comme PNG et JPEG. Toutes les images ont été diffusées dans la taille appropriée en fonction de la résolution de l'écran de l'utilisateur, garantissant des temps de chargement rapides même sur les appareils mobiles.
• Chargement paresseux: En implémentant le chargement paresseux des images, nous avons veillé à ce que seules les images visibles sur l'écran de l'utilisateur soient chargées initialement. Des images supplémentaires se chargeraient au fur et à mesure que l'utilisateur défilerait, réduisant ainsi les temps de chargement initiaux des pages.
• Mise en cache et minification: Nous avons utilisé Fusée WP pour la mise en cache, la minification et la compression de HTML, CSS et JavaScript fichiers. WP Rocket nous a aidé à obtenir des temps de chargement plus rapides en réduisant la taille globale du fichier et en proposant des versions statiques en cache des pages aux visiteurs réguliers.

9) Optimisation et nettoyage de la base de données

L'ancien site Web avait accumulé une quantité importante de données “indésirables” en raison du gonflement de Elementor’ et de la structure inefficace de la base de données. Pour garantir le bon fonctionnement du nouveau site, nous avons effectué un nettoyage et une optimisation approfondis de la base de données.

• Suppression des anciennes données Elementor

Comme mentionné précédemment, même après avoir désactivé Elementor, ses styles et paramètres étaient toujours intégrés dans la base de données. Nous avons utilisé des requêtes personnalisées pour supprimer ces données excédentaires et nettoyer la base de données. De plus, nous avons supprimé tous les fichiers multimédias inutilisés, les révisions de publication et les transitoires expirés qui s'étaient accumulés au fil du temps.

• Indexation de bases de données

Nous avons également optimisé la base de données en ajoutant des index aux colonnes fréquemment interrogées, garantissant ainsi que les requêtes de base de données étaient plus rapides et plus efficaces. Par exemple, ajouter un index au post_date Les colonnes ont accéléré les requêtes liées aux articles récents, améliorant ainsi les performances de nos pages de blog.

Conclusion

La décision de créer un nouveau site Web à partir de zéro a été motivée par les limites et les inefficacités de l’ancien site. Le simple changement de thème n'était pas une option viable en raison d'incohérences de conception, de styles gonflés et de problèmes de performances causés par Elementor. En créant un nouveau site avec développement personnalisé et champs personnalisés avancés, nous avons obtenu un site Web plus efficace, cohérent et professionnel qui améliore l'expérience utilisateur tout en permettant des mises à jour rationalisées et des fonctionnalités de test A/B. Ce nouveau site constitue une base solide pour la croissance et les améliorations futures.