Pourquoi nous avons créé un nouveau site Web à partir de zéro : une évolution nécessaire
Créez votre site Web multilingue en 5 minutes
Pas de détails de carte
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 pourrait sembler une solution rapide, mais nous avons vite réalisé que cette petite tâche révélait des problèmes sous-jacents bien plus importants liés à la structure et à la conception du site. Le problème ne se limitait pas à un seul bloc ; c'était l'architecture entière du site qui avait besoin d'être repensée.
Notre site Web a été construit au fil du temps, avec différentes pages ajoutées utilisant des conceptions et des mises en page variées, sans aucun thème ou modèle unificateur. Chaque page était unique dans sa conception, ce qui peut sembler créatif mais a conduit à un problème important : l'incohérence. Si nous décidions de créer un nouveau design uniquement pour le bloc supérieur tout en conservant le reste du site tel quel, cela impliquerait de 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 voudrions apporter des modifications futures. Imaginez l'inefficacité de devoir parcourir des centaines de pages pour s'assurer 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 viable.
Au-delà de la simple logistique de mise à jour de chaque page, nous avons dû prendre en compte l’expérience utilisateur globale. Aujourd’hui, les utilisateurs s’attendent à une expérience fluide et cohérente lorsqu’ils visitent un site Web. S’ils font défiler une page et constatent que la conception est incohérente (chaque bloc utilise des styles différents), cela crée une impression décousue et peu 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 le sentiment de désordre.
L'incohérence allait au-delà de la mise en page. De nombreuses images du site étaient obsolètes, mal conçues 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 reflétait la qualité globale du site, laissant aux utilisateurs une impression négative du produit ou du service que nous proposions.
Il n’existait pas de 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 signifiait que les modifications ne pouvaient pas être apportées globalement. Si nous voulions mettre à jour le style du site, nous devions parcourir chaque page et mettre à jour manuellement chaque bloc, ce qui aurait pris du temps et aurait été 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 un nouveau design cohérent 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, il semble être un excellent outil qui permet de créer des pages rapidement et facilement. Cependant, après avoir beaucoup travaillé avec lui, nous avons rencontré plusieurs limitations qui nous ont fait décider de nous éloigner d'Elementor et d'opter pour un site Web personnalisé à la place.
Limitations et défis d'Elementor :
- Bugs et problèmes techniques : Bien qu’Elementor offre de nombreuses fonctionnalités utiles, il n’est pas exempt de problèmes techniques. Par exemple, lorsque nous copiions une page et essayions de la modifier, la nouvelle page était souvent différente de l’originale, même avant d’y apporter des modifications. Il y avait souvent des bugs dans la façon dont les éléments étaient affichés, comme la propriété « largeur maximale de l’image » qui ne fonctionnait pas correctement. Ces problèmes rendaient difficile de garantir un style cohérent sur toutes les pages.
- Trop de liberté créative, menant à l'incohérence : L'un des principaux arguments de vente d'Elementor est la possibilité de tout personnaliser. Cependant, cette flexibilité peut être une arme à double tranchant, en particulier lorsque plusieurs éditeurs travaillent sur le site. Il est facile pour les non-professionnels de créer involontairement des pages avec des conceptions incohérentes. 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 à une conception encombrée et déroutante. Sans un système de conception strict en place, il est devenu impossible de maintenir une identité visuelle cohérente.
- Personnalisation limitée pour les fonctionnalités avancées : bien qu'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, qui étaient difficiles à personnaliser pour des fonctionnalités plus complexes. Au fur et à mesure que nos besoins dépassaient les mises en page de base, les limites d'Elementor sont devenues de plus en plus évidentes.
- Code gonflé et problèmes de performances : la méthode de création de pages d'Elementor introduit une imbrication excessive d'éléments. Par exemple, Elementor génère automatiquement plusieursconteneurs dans d'autreséléments, chacun avec son propre ensemble de styles. Cela se traduit par une structure gonflée qui affecte négativement la vitesse de chargement, les performances des pages 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.
- Pas de fonctionnalités 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é de montrer différentes versions du site à différents utilisateurs. Tout le monde voit le même site, ce qui limite notre capacité à tester et à peaufiner 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.
- Gonflement de la base de données : l'un des inconvénients les plus importants d'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 à un nouveau framework ne résout pas le problème : ces styles restent intégrés dans les pages, continuant à causer des problèmes.
Avec tous ces défis à l’esprit, il est devenu évident que nous avions besoin d’une solution plus robuste. Nous avons pris la décision de créer un nouveau site Web indépendant sans Elementor, optant pour une approche plus durable et plus 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'occasion d'établir un processus clair et rationalisé pour la création de pages. Dans le nouveau système, la création d'une page est simple :
- Connectez-vous au panneau d’administration WordPress et cliquez sur Pages -> Ajouter une nouvelle page .
- 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é d'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 les 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 tels que 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 ainsi que la mise en page reste visuellement attrayante sans nécessiter de réglages manuels.
Pour les images, nous avons mis en place 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 s'alignent sur l'esthétique générale. 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 de publications sur le nouveau site suit le même processus simplifié que la création de pages, avec quelques différences clés :
- Les articles ont des URL qui incluent ../blog/.. , ce qui les distingue des pages.
- Dans la barre latérale droite, un bloc affiche automatiquement les trois derniers articles, contribuant à garder le blog dynamique et attrayant.
Le modèle de tous les articles se trouve dans le fichier template-parts/content/content-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 joué un rôle essentiel dans le 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 de WordPress. Des champs tels que content_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 importantes 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 est la plus performante auprès des 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 des paramètres GET 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 des couleurs de bouton ou des images d'arrière-plan différentes. 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
- Types de publications et taxonomies personnalisées
L'une des principales utilisations du fichier functions.php était de 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 des contenus spécifiques, 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 également d'améliorer 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 functions.php :
fonction create_case_study_post_type() {
register_post_type( 'études_de_cas',
tableau(
'étiquettes' =>tableau(
'name' => __( 'Études de cas' ),
'singular_name' => __( 'Étude de cas' )
),'public' => vrai,
'has_archive' => vrai,
'réécriture' => tableau('slug' => 'études-de-cas'),
)
);
}
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 essentielle de functions.php était de charger des scripts et des styles externes, garantissant que notre site Web disposait de toutes les bibliothèques et de tous les frameworks nécessaires. Par exemple, nous avons intégré des bibliothèques comme Slick.js pour les sliders et AOS (Animate on 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 surcharges inutiles et amélioré les vitesses de chargement des pages.
Voici comment nous avons géré le chargement des styles et des scripts :
fonction load_custom_scripts() {
// Charger le curseur Slick pour des modèles spécifiques
si( 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 );
} // Charger les animations AOS sur tout le site
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 vérifications conditionnelles (par exemple, is_page_template()), nous avons veillé à ce que les scripts inutiles ne soient pas chargés sur l'ensemble du 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 shortcodes personnalisés via functions.php . Ces shortcodes ont permis aux utilisateurs d'insérer facilement des fonctionnalités complexes ou des éléments de style sans avoir à toucher au code. Par exemple, nous avons créé un shortcode pour ajouter des boutons personnalisés n'importe où sur le site :
[SUPPRIMÉ]
Ce shortcode a permis aux éditeurs d'ajouter facilement des boutons avec du texte et des URL personnalisés, permettant des ajustements rapides sans perturber 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 d'origine, créé à l'aide d'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 (
,, etc.), garantissant que les moteurs de recherche puissent facilement analyser et comprendre la hiérarchie du contenu. Ceci est particulièrement important pour les classements SEO et l'accessibilité. - Balises méta et données Open Graph : nous avons utilisé le plugin Yoast SEO 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 article disposent de métadonnées optimisées, ce qui est essentiel pour la visibilité des moteurs de recherche et les taux de clics sur les plateformes de médias sociaux.
- Balisage de schéma : à l'aide du fichier functions.php , nous avons ajouté un balisage de schéma personnalisé pour les données structurées, améliorant ainsi la manière 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.
fonction add_schema_markup() {
écho '
{
"@context": "http://schema.org",
"@type": "Organisation",
"nom": "ConveyThis",
"url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head', 'add_schema_markup' );
Optimisation de la vitesse du site
Les performances sont un facteur essentiel non seulement pour l'expérience utilisateur, mais aussi pour le classement SEO. Nous avons pris plusieurs mesures pour améliorer la vitesse du site :
- Optimisation de l'image : nous avons utilisé des formats d'image modernes comme 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 différé : en implémentant le chargement différé pour les images, nous avons garanti que seules les images visibles sur l'écran de l'utilisateur étaient chargées initialement. Les images supplémentaires se chargeaient au fur et à mesure que l'utilisateur faisait défiler la page, réduisant ainsi les temps de chargement initiaux de la page.
- Mise en cache et minification : nous avons utilisé WP Rocket pour la mise en cache, la minification et la compression des fichiers HTML, CSS et JavaScript. 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 de la structure de base de données inefficace et du volume important d'Elementor. 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 ses paramètres étaient toujours intégrés à 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 des requêtes de base de données plus rapides et plus efficaces. Par exemple, en ajoutant un index à la colonne postdater La colonne a 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 des incohérences de conception, des styles gonflés et des problèmes de performances causés par Elementor. En créant un nouveau site avec un développement personnalisé et des 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 simplifiées et des fonctionnalités de test A/B. Ce nouveau site fournit une base solide pour la croissance et les améliorations futures.
Prêt à commencer ?
La traduction, bien plus que la simple connaissance des langues, est un processus complexe.
En suivant nos conseils et en utilisant ConveyThis , vos pages traduites trouveront un écho auprès de votre public, se sentant natives de la langue cible.
Même si cela demande des efforts, le résultat est gratifiant. Si vous traduisez un site Web, ConveyThis peut vous faire gagner des heures grâce à la traduction automatique.
Essayez ConveyThis gratuitement pendant 3 jours !
CONVEYTHIS