Développement web CMS avec WordPress et DIVI, programmation de plugins

Introduction à WordPress

Les systèmes de gestion de contenu (CMS) facilitent considérablement la création et la gestion de sites web. Sans connaissances en programmation, les entreprises et les particuliers peuvent gérer le contenu, personnaliser le design et rendre les sites web interactifs. Les CMS les plus connus sont WordPress, Joomla, Drupal, Contao et TYPO3, WordPress étant désormais utilisé par environ 43 % de tous les sites web dans le monde, ce qui en fait de loin le système le plus utilisé.

J'ai moi-même commencé avec Joomla, puis j'ai utilisé Contao et je suis passé à WordPress pour de bonnes raisons. Chez mes clients, je vois encore souvent des sites TYPO3 dans le domaine professionnel, mais ils nécessitent plus de formation en raison de TypoScript et n'offrent donc pas une prise en main rapide pour tous les utilisateurs, en particulier les développeurs web. Il est également plus difficile de trouver quelqu'un pour prendre en charge les extensions ou la maintenance.

Tant que les systèmes fonctionnent de manière stable et respectent toutes les exigences techniques (version PHP actuelle, mises à jour de sécurité, RGPD, performances), il n'y a aucune raison de procéder à un développement complet. En général, les sites web fonctionnent généralement pendant 4 à 6 ans avant d'être fondamentalement repensés.

Hébergement chez all-inkl.com et autres

WordPress ne nécessite pas grand-chose. PHP et MySQL/MariaDB suffisent, et les sites WordPress sont donc compatibles avec pratiquement tous les fournisseurs. Cependant, on s'attend désormais à un peu plus – par exemple :

• un domaine de développement/staging
• une gestion confortable des e-mails
• des certificats Let's Encrypt pour HTTPS avec renouvellement automatique
• des accès FTP/SFTP ou un gestionnaire de fichiers web
• des sauvegardes automatiques et une restauration facile
• un support rapide et gratuit
• suffisamment de mémoire vive et des versions PHP actuelles (par exemple 8.1/8.2+)
• la possibilité de configurer ses propres paramètres DNS
• un transfert rapide et la mise à disposition de codes d'authentification en un clic
• un assistant d'installation simple pour WordPress et autres

Un fournisseur privilégié depuis de nombreuses années est all-inkl.com (Lien d'affiliation), qui convainc par des prix de forfaits très justes et un excellent support. Ceux qui veulent simplement héberger des systèmes CMS sont parfaitement servis.

Ceux qui ont besoin de MongoDB, Node.js ou Express en plus devraient soit louer leur propre serveur/VPS, soit se tourner vers des fournisseurs qui proposent ces fonctionnalités. Cependant, 99 % de tous les sites web classiques n'en ont toujours pas besoin. Grâce aux outils basés sur l'IA, des applications individuelles voient de plus en plus le jour – comme des applications web, des API ou des automatisations. nuonu.com est également une telle application qui étend WordPress avec ses propres plugins et offre ainsi des fonctions très individuelles.

Pourquoi WordPress et DIVI ?

WordPress offre une interface conviviale, un vaste choix d'extensions (plugins) et de thèmes, ainsi qu'une communauté très forte. Qu'il s'agisse d'un blog, d'un site d'entreprise, d'une landing page ou d'une boutique en ligne – WordPress permet de réaliser presque tous les types de sites web. L'installation et la configuration de base sont rapides, et grâce à des constructeurs de pages comme DIVI, même les non-initiés peuvent créer des mises en page professionnelles.

Avantages de DIVI en tant que constructeur de pages

DIVI se distingue de nombreux autres constructeurs de pages par le fait qu'il peut être utilisé comme un thème + constructeur complet et qu'aucun thème supplémentaire n'est nécessaire. Cela signifie :

• Design complet tout-en-un – pas de dépendances de thème supplémentaires.
• Options de conception flexibles avec un éditeur visuel par glisser-déposer.
• Possibilités d'édition côté client directement sur la page (édition front-end).
• Excellente adaptation responsive pour les ordinateurs de bureau, les tablettes et les appareils mobiles.
• Mises en page et modules prédéfinis qui accélèrent considérablement la création de nouvelles pages.

Nouveau : DIVI 5 – Performance & Pérennité

DIVI 5 est plus qu'une simple mise à jour : le constructeur a été entièrement reconstruit en interne et repose sur une base moderne et nettement plus légère. Cela se traduit par des temps de chargement nettement plus rapides, moins de code superflu et une meilleure base pour les fonctionnalités futures.

• Nouveau système de base léger – le constructeur a été entièrement repensé et fonctionne de manière plus économe en ressources.
• Temps de chargement plus rapides & éditeur réactif – les pages complexes avec de nombreux modules bénéficient particulièrement de la nouvelle architecture.
• Moins de shortcodes, code plus propre – cela facilite la maintenance à long terme, la migration et a un impact positif sur le SEO.
• Nouvelles fonctionnalités de design telles que les variables de design, les unités étendues, les lignes imbriquées et les points de rupture personnalisables pour des mises en page responsives encore plus précises.
• Meilleure gestion des grands projets – DIVI 5 est conçu pour les sites web volumineux avec de nombreux modèles, éléments globaux et mises en page de bibliothèque.

État actuel chez nous : Le site nuonu.com fonctionne déjà sur la version bêta de DIVI 5. Tous les projets clients actuellement réalisés avec DIVI 4 pourront être migrés progressivement et de manière contrôlée après la sortie finale de DIVI 5 – idéalement d'abord sur un environnement de staging. Ainsi, les sites existants restent stables, mais peuvent profiter des avantages de performance et de confort de la nouvelle version dès que cela est judicieux et sûr.

La structure générale des sites web modernes

Les sites web actuels sont clairement structurés, percutants et doivent avant tout être responsives. Les aspects suivants sont cruciaux :

• Couleurs & polices doivent être cohérentes avec l'identité visuelle de l'entreprise.
• Logo & espacements doivent être intégrés harmonieusement dans la mise en page.
• En-tête & menu individuels pour une navigation intuitive.
• Pied de page structuré, contenant les liens légaux, les profils de médias sociaux et les options de contact.
• Définir la page d'accueil, afin que la page principale soit définie via « Réglages > Lecture ».

Exigences légales : Mentions légales, protection des données & consentement aux cookies

Chaque site web nécessite des mentions légales et une politique de confidentialité. De plus, un outil de consentement aux cookies fonctionnel est nécessaire pour se conformer au RGPD et au TTDSG. Un exemple est Reel Cookie Consent, qui peut être testé et étendu avec des scripts personnalisés pour, par exemple, intégrer Matomo de manière conforme au RGPD.

Utilisation de Matomo en sous-domaine

Matomo peut être hébergé soit sur le domaine principal, soit sur un sous-domaine. Les avantages de l'utilisation d'un sous-domaine sont :

• Meilleur contrôle des données & sécurité – les données restent entièrement sur votre propre serveur.
• Configuration respectueuse de la vie privée, car les données ne sont pas transmises à des tiers.
• Possibilités d'opt-out propres aux utilisateurs, pour répondre aux exigences du RGPD.

Plugins obligatoires pour un site WordPress-Webseite

Pour un site WordPress professionnel et fonctionnel, certains plugins sont, à notre avis, presque indispensables (la liste peut bien sûr varier selon le projet) :

• RankMath – Plugin SEO avec support de schéma, redirections et de nombreuses aides on-page
• Happy Files – Gestion de fichiers avec dossiers pour les médias, articles, pages, etc.
• Reel Cookie Consent – Gestion des cookies (ou alternatives comme Real Cookie Banner, Borlabs Cookie ou Complianz)
• DIVI Supreme – Modules et effets étendus pour DIVI
• WP Armour – Protection contre le spam de formulaires
• AIOS (All in One Security) – Plugin de sécurité complet pour le durcissement du login, du système de fichiers et du pare-feu

Configuration de la sécurité dans WordPress

Après l'installation, les paramètres de sécurité doivent être optimisés immédiatement :

• Activer AIOS & WP Armour pour la protection contre les attaques par force brute, le spam et les attaques de bots simples.
• Changer le nom d'utilisateur administrateur par défaut pour rendre les attaques ciblées plus difficiles.
• Authentification à deux facteurs pour plus de sécurité (facultatif, mais recommandé).
• Mettre en place des sauvegardes régulières (par exemple avec Duplicator, UpdraftPlus ou BackWPup) et tester la restauration.

Adaptation des paramètres médias de WordPress

Par défaut, WordPress enregistre les médias dans des dossiers divisés par mois. C'est utile pour les blogs, mais souvent peu pratique pour les sites web d'entreprise. Il est donc recommandé de désactiver la structure de dossiers automatique sous « Réglages > Médias » et d'organiser la médiathèque avec un outil comme Happy Files.

Phase de conception après l'installation de base

Après l'installation de base, la conception proprement dite commence :

• Définir les couleurs, polices & espacements – globalement dans DIVI comme base de design (ou dans DIVI 5 en plus via des variables de design).
• Créer un en-tête & un menu individuels pour rendre la navigation intuitive.
• Adapter le pied de page, qui contient les mentions légales, la politique de confidentialité, les liens vers les médias sociaux et les options de contact.
• Rendre les numéros de téléphone cliquables avec tel: et les adresses e-mail avec mailto:.
• Créer la page d'accueil et la définir ensuite comme page principale sous « Réglages > Lecture ».

Avec cette structure, les clients reçoivent un guide clair pour construire leur site web de manière moderne, légale et fonctionnelle. Si d'autres ajustements sont nécessaires, les plugins et outils mentionnés peuvent être configurés individuellement.

Processus de développement collaboratif

Il est important pour nous d'impliquer le client – si désiré – le plus tôt possible dans le développement. Cela concerne la décision et l'approbation de l'apparence visuelle, mais aussi la création de pages, de menus, la gestion des données SEO, les téléchargements de médias, et bien plus encore. Plus le client peut faire lui-même, mieux c'est – et plus la maintenance autonome sera facile par la suite.

Logo et Favicon

Souvent, des designs obsolètes ou inexistants sont disponibles. Dans ce cas, nous créons également des logos et des favicons sous forme de fichier vectoriel et de PNG transparent. Grâce à Midjourney et Illustrator, nous pouvons, sur demande, fournir une sélection de logos 2D et 3D. Nous nous occupons également de la recherche de noms, y compris la vérification et l'enregistrement de domaines libres ou leur transfert.

Liens vers les médias sociaux

DIVI intègre un module propre avec des logos prêts à l'emploi et légalement sécurisés de nombreux fournisseurs de médias sociaux. Des liens globaux peuvent également être définis dans le tableau de bord sous DIVI > Options du thème. Vous pouvez également voir un en-tête avec logo, menu et pied de page personnalisé sur cette page.

Création de contenu SEO

À partir de maintenant, nous commençons à créer page par page – en tenant compte immédiatement de RankMath. Titre, description, og:image, h1, h2, h3… Des titres et des textes optimisés pour le SEO et faciles à lire avec des mises en évidence pertinentes, ainsi que des images significatives et bien optimisées. SEO first signifie : le contenu est conçu non seulement pour les visiteurs, mais aussi pour les moteurs de recherche et les médias sociaux. Ce qu'il faut prendre en compte et les outils dont vous avez besoin se trouvent dans le guide de notre stratégie SEO.

Finalisation de tous les contenus et données SEO

La création peut prendre plus ou moins de temps par page. Certaines pages nécessitent des configurations supplémentaires, telles que des formulaires et leur envoi sécurisé via SSL ou des paramètres de suivi/consentement spéciaux. En moyenne, il faut compter environ une heure ou plus par page. Ce n'est que lorsque toutes les pages sont terminées et que le dernier lien a été testé que le site est prêt pour un test en direct.

Phase de test avec optimisations de performance

Un site terminé est toujours une expérience – mais il doit maintenant être testé de manière approfondie. Nous vérifions :

• tous les liens internes et externes,
• toutes les recommandations RankMath,
• l'affichage sur les réseaux sociaux (par exemple avec le débogueur Facebook / débogueurs d'URL),
• les temps de chargement avec des tests de vitesse (par exemple PageSpeed Insights, GTmetrix, WebPageTest).

Ce n'est que lorsque toutes les erreurs sont éliminées et que le site est convaincant lors des tests de performance qu'il est finalement mis en ligne.

Génération de sitemap et enregistrement dans la Google Search Console

L'acte final de la création est l'enregistrement dans la Google Search Console. La sitemap générée par RankMath ou WordPress est déposée afin que Google puisse indexer tous les contenus pertinents de manière structurée.

Surveillance à court et long terme

Après quelques jours, le site devrait apparaître dans les résultats de recherche. Avec site:domain.de ou directement dans la Google Search Console, nous vérifions si tous les contenus importants ont bien été listés. C'est au plus tard à ce moment-là que d'éventuelles erreurs devraient être détectées et corrigées.

À partir de maintenant, nous pouvons également visiter régulièrement notre sous-domaine Matomo et évaluer en direct le succès du site. Selon l'intérêt des visiteurs, le contenu peut être étendu, les mots-clés affinés et de nouvelles pages de destination créées. Ainsi, le site web ne reste pas statique, mais évolue avec les objectifs de l'entreprise.

Fiche Google My Business

Quiconque s'occupe de la création et de l'optimisation de sites web devrait également jeter un œil à Google My Business, Maps, Images, Vidéos, Actualités, etc. Nous sommes des prestataires de services et sommes également responsables des données qu'un visiteur voit. Ce sont souvent précisément ces données qui attirent l'attention d'un visiteur sur le site web ou déclenchent un appel.