Comment changer le titre du site sur WordPress (guide complet 2025)
Introduction
Le titre de votre site WordPress est l’un deséléments les plus importants pour attirer et retenir l’attention de vos visiteurs. Il participe à l’identité de votre marque, influence la manière dont votre site apparaît dans les résultats de recherche et sur les réseaux sociaux, et joue un rôle central dans la confiance que les utilisateurs accordent à votre contenu.
Sur WordPress, il existe plusieurs types de titres à bien distinguer : le titre du site, le titre des pages et articles, et le titre SEO utilisé dans la balise
pour les moteurs de recherche. Dans ce guide détaillé, vous allez apprendre pas à pas comment modifier le titre de votre site WordPress, que vous utilisiez WordPress.com ou une installation auto‑hébergée WordPress.org, ainsi que les bonnes pratiques pour optimiser vos titres du point de vue SEO et expérience utilisateur.</p> <h2 id="concepts-cles-a-comprendre-avant-de-modifier-le-titre">Concepts clés à comprendre avant de modifier le titre</h2> <h3 id="qu-est-ce-que-le-nbsp-titre-du-site-nbsp-sur-wordpress-nbsp">Qu’est-ce que le « titre du site » sur WordPress ?</h3>
<p>Le <strong>titre du site</strong> est le nom global de votre site, défini dans les réglages généraux de WordPress. Il est stocké en base de données dans l’option interne nommée <code>blogname</code>. Concrètement, ce titre :</p>
<ul> <li>apparaît souvent dans l’en-tête de votre site (dans le thème) si vous n’utilisez pas de logo seul,</li> <li>peutêtre utilisé comme base pour la balise <title> de la page d’accueil,</li> <li>est repris par de nombreux thèmes dans l’onglet du navigateur,</li> <li>peutêtre affiché dans les résultats des moteurs de recherche et sur les réseaux sociaux, selon la configuration de votre thème et de vos extensions SEO.</li>
</ul> <h3 id="difference-entre-nbsp-titre-du-site-nbsp-nbsp-titre-de-page-nbsp-nbsp-titre-seo-nbsp-et-nbsp-nom-de-">Différence entre « titre du site », « titre de page », « titre SEO » et « nom de domaine »</h3>
<p>Une source fréquente de confusion vient du fait que plusieurs types de titres coexistent :</p>
<ul> <li><strong>Titre du site</strong> : le nom global de votre site, défini dans les réglages généraux ou le personnalisateur. Il représente votre marque ou votre projet.</li> <li><strong>Titre de page / article</strong> : le titre unique de chaque contenu (page, article, produit, etc.), saisi dans l’éditeur de blocs ou l’éditeur classique.</li> <li><strong>Titre SEO (balise <title>)</strong> : le titre affiché dans l’onglet du navigateur et dans les résultats des moteurs de recherche. Il peutêtre généré automatiquement à partir du titre du site et du titre de la page, ou défini manuellement via une extension SEO.</li> <li><strong>Nom de domaine</strong> : l’adresse de votre site (par exemple <em>monsite.com</em>). Le modifier est une opération totalement distincte du changement de titre, et se fait via votre hébergeur ou vos réglages d’URL.</li>
</ul>
<p><strong>Changer le titre du site ne change jamais votre nom de domaine</strong> ni l’URL de vos pages. Il s’agit uniquement d’une modification textuelle et « visuelle » pour les visiteurs et les moteurs de recherche.</p> <h3 id="le-titre-du-site-et-son-importance-pour-votre-image-de-marque">Le titre du site et son importance pour votre image de marque</h3>
<p>Le titre du site doit refléter clairement votre activité, votre positionnement et, si possible, votre bénéfice principal. Il contribue à :</p>
<ul> <li>affirmer votre <strong>identité de marque</strong> (nom de votre entreprise, de votre blog, de votre boutique, etc.),</li> <li>renforcer la <strong>crédibilité</strong> de votre site auprès de nouveaux visiteurs,</li> <li>faciliter la <strong>reconnaissance</strong> de votre site lorsqu’il apparaît dans les résultats de recherche ou lorsqu’il est partagé.</li>
</ul>
<p>Un titre confus ou trop générique risque de diminuer votre taux de clics et de rendre votre site moins mémorable.</p> <h3 id="comment-le-titre-du-site-influence-t-il-le-seo-nbsp">Comment le titre du site influence-t-il le SEO ?</h3>
<p>Les moteurs de recherche utilisent plusieurs signaux pour comprendre le thème de votre site. Le <strong>titre du site</strong> fait partie de ces signaux, en particulier pour la page d’accueil. Selon votre thème ou votre extension SEO :</p>
<ul> <li>le titre du site peutêtre utilisé tel quel dans la balise <title> de la page d’accueil,</li> <li>il peutêtre combiné avec un slogan (tagline) ou avec le titre de la page d’accueil,</li> <li>les plugins SEO peuvent générer automatiquement une structure type « Titre de la page | Nom du site » pour chaque contenu.</li>
</ul>
<p>Un titre de site clair, contenant un ou deux <strong>mots-clés principaux</strong> liés à votre activité, peut aider les moteurs de recherche à mieux catégoriser votre site et améliorer votre visibilité à long terme. Il ne s’agit pas du seul facteur SEO, mais il reste stratégique.</p> <h2 id="modifier-le-titre-du-site-sur-wordpress-org-site-auto-heberge">Modifier le titre du site sur WordPress.org (site auto‑hébergé)</h2> <h3 id="methode-1-nbsp-via-les-reglages-general">Méthode 1 : via les Réglages > Général</h3>
<p>La méthode la plus directe pour modifier le titre du site sur un WordPress auto‑hébergé consiste à passer par les réglages généraux :</p>
<ol> <li>Connectez-vous à votre tableau de bord WordPress (adresse type : <em>votresite.com/wp-admin</em>).</li> <li>Dans le menu de gauche, cliquez sur <strong>Réglages</strong> (ou <strong>Paramètres</strong>) puis sur <strong>Général</strong>.</li> <li>Repérez le champ <strong>Titre du site</strong>.</li> <li>Saisissez votre nouveau titre, en veillant à ce qu’il soit clair, concis et représentatif de votre activité.</li> <li>Vérifiezéventuellement le champ <strong>Slogan</strong> (ou « Description du site »), qui peut parfois apparaître sous le titre ou dans la balise <title> selon le thème.</li> <li>Descendez en bas de la page et cliquez sur <strong>Enregistrer les modifications</strong>.</li>
</ol>
<p>Le changement est généralement immédiat sur le front‑end. Si vous ne voyez pas le nouveau titre, pensez à vider le cache de votre navigateur et, si vous utilisez un plugin de cache ou un CDN, à purger le cache du site.</p> <h3 id="methode-2-nbsp-via-le-personnalisateur-apparence-personnaliser">Méthode 2 : via le Personnalisateur (Apparence > Personnaliser)</h3>
<p>De nombreux thèmes modernes permettent aussi de modifier le titre du site via le <strong>personnalisateur</strong> :</p>
<ol> <li>Dans le tableau de bord WordPress, cliquez sur <strong>Apparence</strong> puis sur <strong>Personnaliser</strong>.</li> <li>Ouvrez la section généralement nommée <strong>Identité du site</strong> ou <strong>Site Identity</strong>.</li> <li>Saisissez votre nouveau <strong>Titre du site</strong> dans le champ correspondant.</li> <li>Si disponible, ajustezégalement le <strong>Slogan</strong> et le logo du site.</li> <li>Observez l’aperçu en direct pour vérifier le rendu dans l’en-tête.</li> <li>Cliquez sur <strong>Publier</strong> pour valider les changements.</li>
</ol>
<p>Cette méthode a l’avantage de vous montrer immédiatement comment le titre s’intègre visuellement dans votre thème (taille, emplacement, lisibilité, etc.).</p> <h3 id="methode-3-nbsp-via-le-bloc-nbsp-titre-du-site-nbsp-dans-l-editeur-de-site-themes-blocs">Méthode 3 : via le bloc « Titre du site » dans l’éditeur de site (thèmes blocs)</h3>
<p>Si vous utilisez un thème basé sur l’éditeur de site (Full Site Editing) comme les thèmes par défaut récents, vous pouvez modifier le titre directement dans le <strong>modèle d’en-tête</strong> :</p>
<ol> <li>Dans le tableau de bord, allez dans <strong>Apparence</strong> puis <strong>Éditeur</strong> (ou « Éditeur du site »).</li> <li>Ouvrez le modèle d’<strong>En-tête</strong>.</li> <li>Cliquez sur le bloc <strong>Titre du site</strong>.</li> <li>Modifiez le texte du titre directement dans le bloc.</li> <li>Enregistrez les modifications de modèle.</li>
</ol>
<p>Cette action met à jour le titre du site dans toute la structure, car le bloc « Titre du site » est lié à l’option globale <code>blogname</code>. Vous pouvez aussi ajuster l’alignement, la typographie, la couleur et d’autres paramètres d’apparence.</p> <h3 id="methode-4-nbsp-via-une-extension-seo-pour-le-titre-seo">Méthode 4 : via une extension SEO (pour le titre SEO)</h3>
<p>Les extensions SEO comme <strong>Yoast SEO</strong>, <strong>Rank Math</strong> ou <strong>All in One SEO</strong> permettent de définir des <strong>modèles de titres SEO</strong> distincts pour la page d’accueil, les pages, les articles, les catégories, etc. Cela ne modifie pas nécessairement le « titre du site » stocké dans WordPress, mais le titre utilisé dans la balise <title> vue par Google.</p>
<p>Exemple de démarche générale (le nom précis des menus varie selon l’extension) :</p>
<ol> <li>Installez et activez votre extension SEO préférée.</li> <li>Rendez-vous dans ses réglages (souvent dans un menu dédié « SEO » ou « Référencement »).</li> <li>Ouvrez la section consacrée à la <strong>page d’accueil</strong> ou aux <strong>modèles de titres</strong>.</li> <li>Définissez un modèle de type : <em>« %site_title% | Votre bénéfice principal »</em> ou « %page_title% | %site_title% ».</li> <li>Personnalisez, si souhaité, le titre SEO de la page d’accueil et des pages clés une par une.</li> <li>Enregistrez les changements et testez le rendu avec un outil de prévisualisation de résultats de recherche.</li>
</ol>
<p>C’est ce titre SEO qui s’affiche généralement dans Google, même si le moteur de recherche peut parfois le réécrire en fonction de la requête.</p> <h3 id="methode-5-nbsp-via-le-fichier-functions-php-utilisateurs-avances">Méthode 5 : via le fichier functions.php (utilisateurs avancés)</h3>
<p>Il est possible de modifier le titre du site par le biais de code PHP, par exemple lors d’un déploiement automatisé ou pour imposer un nom précis :</p>
<ol> <li>Connectez-vous à votre site via FTP, SFTP ou le gestionnaire de fichiers de votre hébergeur.</li> <li>Accédez au dossier <code>/wp-content/themes/votre-theme-actif/</code>.</li> <li>Ouvrez le fichier <code>functions.php</code> avec unéditeur de code.</li> <li>Ajoutez un extrait similaire à la fin du fichier : <pre><code>update_option( 'blogname', 'Nouveau titre de votre site' );</code></pre> </li> <li>Enregistrez le fichier et rechargez le site.</li>
</ol>
<p>Cette méthode doitêtre utilisée avec prudence : un code mal inséré peut provoquer une erreur critique. Il est recommandé de la réserver à des besoins spécifiques (migration, script de configuration, etc.) et de supprimer ou commenter l’appel après exécution pouréviter de réécrire le titre à chaque chargement.</p> <h3 id="methode-6-nbsp-via-phpmyadmin-base-de-donnees">Méthode 6 : via phpMyAdmin (base de données)</h3>
<p>Enfin, vous pouvez modifier directement le titre du site dans la base de données WordPress :</p>
<ol> <li>Connectez-vous au panneau de gestion de votre hébergeur et ouvrez <strong>phpMyAdmin</strong>.</li> <li>Sélectionnez la base de données utilisée par votre site.</li> <li>Ouvrez la table généralement nommée <strong><code>wp_options</code></strong> (le préfixe peutêtre différent).</li> <li>Recherchez la ligne dont <code>option_name</code> est <strong><code>blogname</code></strong>.</li> <li>Modifiez le champ <code>option_value</code> pour y saisir le nouveau titre de votre site.</li> <li>Enregistrez les changements.</li>
</ol>
<p>Cette méthode est utile en cas de problème d’accès au back‑office, mais elle doitêtre réalisée avec précaution. Une sauvegarde préalable de la base de données est toujours recommandée.</p> <h2 id="modifier-le-titre-du-site-sur-wordpress-com">Modifier le titre du site sur WordPress.com</h2>
<p>Sur WordPress.com, l’interface est légèrement différente mais le principe reste le même : le titre du site se modifie dans les réglages généraux ou via le bloc « Titre du site ».</p> <h3 id="changer-le-titre-via-reglages-general">Changer le titre via Réglages > Général</h3>
<ol> <li>Connectez-vous à votre compte WordPress.com et accédez au <strong>Tableau de bord</strong> du site concerné.</li> <li>Dans le menu, cliquez sur <strong>Réglages</strong> puis sur <strong>Général</strong>.</li> <li>Dans la section consacrée à l’identité du site, localisez le champ <strong>Titre du site</strong>.</li> <li>Saisissez votre nouveau titre.</li> <li>Enregistrez les modifications.</li>
</ol> <h3 id="changer-le-titre-via-le-bloc-nbsp-titre-du-site-nbsp">Changer le titre via le bloc « Titre du site »</h3>
<ol> <li>Ouvrez l’éditeur de site ou l’éditeur de modèles de votre thème.</li> <li>Repérez le bloc <strong>Titre du site</strong> situé en général dans la zone d’en-tête.</li> <li>Cliquez sur le texte et remplacez-le par le nouveau titre souhaité.</li> <li>Enregistrez le modèle.</li>
</ol>
<p>Sur WordPress.com comme sur WordPress.org, la modification de ce bloc met à jour l’option globale du titre du site et se répercute partout où le bloc est utilisé.</p> <h2 id="bonnes-pratiques-pour-optimiser-le-titre-de-votre-site">Bonnes pratiques pour optimiser le titre de votre site</h2> <h3 id="choisir-un-titre-clair-pertinent-et-memorable">Choisir un titre clair, pertinent et mémorable</h3>
<p>Pour qu’un titre de site fonctionne à la fois pour vos visiteurs et pour les moteurs de recherche, veillez à </p>
<ul> <li><strong>Préciser votre activité</strong> : au lieu d’un nom de marque seul, ajoutez parfois un mot descriptif (par exemple « Studio Nova – Agence web à Lyon »).</li> <li><strong>Intégrer des mots-clés principaux</strong> de manière naturelle, sans sur-optimisation.</li> <li><strong>Éviter les titres trop longs</strong> et difficiles à lire dans un onglet de navigateur ou un résultat de recherche.</li> <li><strong>Limiter les caractères spéciaux</strong> ou les emojis qui peuvent mal s’afficher dans certains contextes.</li>
</ul> <h3 id="eviter-les-doublons-et-les-confusions">Éviter les doublons et les confusions</h3>
<p>Assurez-vous que :</p>
<ul> <li>le <strong>titre du site</strong> est unique et cohérent sur toutes vos plateformes (site, réseaux sociaux, fiches d’annuaires, etc.),</li> <li>le <strong>titre de la page d’accueil</strong> n’est pas strictement identique au titre du site si vous souhaitez vous positionner sur des requêtes plus précises,</li> <li>chaque <strong>page ou article</strong> dispose d’un titre distinct pouréviter les titres en double dans les résultats de recherche.</li>
</ul> <h3 id="structurer-les-titres-de-pages-avec-le-titre-du-site">Structurer les titres de pages avec le titre du site</h3>
<p>Une structure classique et efficace consiste à utiliser un modèle de type :</p>
<ul> <li><strong>Page d’accueil</strong> : « Nom du site – Bénéfice ou secteur d’activité principal ».</li> <li><strong>Autres pages</strong> : « Titre de la page | Nom du site ».</li>
</ul>
<p>Cette structure peutêtre configurée dans les réglages de votre extension SEO pourêtre appliquée automatiquement à tout votre contenu, tout en gardant la possibilité de surcharger le titre au cas par cas.</p> <h3 id="prendre-en-compte-l-affichage-dans-les-serp">Prendre en compte l’affichage dans les SERP</h3>
<p>Dans les résultats de recherche, la balise <title> est généralement tronquée au‑del à d’une certaine largeur d’affichage. Il est judicieux de :</p>
<ul> <li>placer les <strong>mots-clés importants</strong> au début du titre SEO,</li> <li>garder un titre <strong>relativement concis</strong> (souvent entre 50 et 65 caractères est une zone de confort, même si Google se base surtout sur la largeur en pixels),</li> <li>éviter les titres génériques du type « Accueil » sans autre information.</li>
</ul> <h2 id="outils-et-ressources-utiles-pour-gerer-vos-titres">Outils et ressources utiles pour gérer vos titres</h2> <h3 id="outils-gratuits">Outils gratuits</h3>
<ul> <li><strong>Google Search Console</strong> : permet de voir comment vos pages apparaissent dans les résultats de recherche, de vérifier si Google reprend bien vos titres, et d’identifier les pages dont le taux de clics pourraitêtre amélioré.</li> <li><strong>Google Analytics</strong> ou autre solution de mesure d’audience : permet de suivre l’impact de la modification de vos titres (du site et des pages) sur le trafic, le comportement des utilisateurs et les conversions.</li> <li><strong>Prévisualisateurs de snippets</strong> : certains outils en ligne vous aident à simuler l’affichage de vos titres et meta descriptions dans les résultats de recherche.</li>
</ul> <h3 id="extensions-wordpress-utiles">Extensions WordPress utiles</h3>
<ul> <li><strong>Yoast SEO</strong> : permet de définir les titres SEO de chaque page, de configurer des modèles de titres globaux et de vérifier la lisibilité et l’optimisation de vos contenus.</li> <li><strong>All in One SEO</strong> : propose des fonctionnalités similaires pour personnaliser les titres, les meta descriptions et la prévisualisation des extraits.</li> <li><strong>Rank Math</strong> : autre extension très complète pour gérer les titres SEO, les schémas de données structurées et de nombreux réglages avancés.</li>
</ul>
<p>Ces plugins ne remplacent pas le titre du site dans les réglages généraux, mais ils vous donnent un contrôle fin sur la manière dont vos titres apparaissent dans les moteurs de recherche.</p> <h2 id="questions-frequentes-faq">Questions fréquentes (FAQ)</h2> <h3 id="pourquoi-mon-nouveau-titre-ne-s-affiche-t-il-pas-dans-les-resultats-de-recherche-nbsp">Pourquoi mon nouveau titre ne s’affiche-t-il pas dans les résultats de recherche ?</h3>
<p>Il est normal que le nouveau titre de votre site ne s’affiche pas immédiatement dans Google ou les autres moteurs de recherche. Plusieurs raisons possibles :</p>
<ul> <li>Les moteurs de recherche doivent <strong>réexplorer</strong> votre site pour prendre en compte la modification.</li> <li>Le <strong>cache</strong> de votre site ou de votre CDN peut encore servir l’ancienne version.</li> <li>Google peut décider de <strong>réécrire le titre</strong> en fonction de la requête de l’utilisateur ou du contenu de la page.</li>
</ul>
<p>Vous pouvez accélérer la prise en compte du changement en :</p>
<ul> <li>vérifiant que la nouvelle balise <title> est bien en place,</li> <li>envoyant à nouveau la page à l’index via la <strong>Search Console</strong> (outil d’inspection d’URL),</li> <li>purgeant le cache de votre site si vous utilisez un plugin de cache ou un CDN.</li>
</ul> <h3 id="puis-je-modifier-le-titre-du-site-apres-avoir-publie-mon-site-nbsp">Puis-je modifier le titre du site après avoir publié mon site ?</h3>
<p>Oui, vous pouvez modifier le titre de votre site WordPress à tout moment. Cette modification n’a pas d’impact direct sur les URL existantes, mais elle peut :</p>
<ul> <li>changer la façon dont votre site apparaît dans les résultats de recherche,</li> <li>modifier la perception de votre marque par vos visiteurs,</li> <li>nécessiter une mise à jour de certains visuels ou mentions sur vos réseaux sociaux, documents, signatures d’e‑mail, etc.</li>
</ul>
<p>Les liens internes et externes restent valides tant que les URL ne changent pas. Il n’est donc pas nécessaire de modifier tous vos liens si vous changez uniquement le titre du site.</p> <h3 id="quelle-est-la-difference-entre-le-titre-du-site-et-la-meta-description-nbsp">Quelle est la différence entre le titre du site et la meta description ?</h3>
<p>Le <strong>titre du site</strong> est le nom global de votre site, utilisé notamment dans les réglages WordPress. La <strong>meta description</strong>, elle, est un court texte descriptif (souvent une à deux phrases) affiché sous le titre dans les résultats de recherche.</p>
<p>Pour chaque page, vous pouvez :</p>
<ul> <li>définir un <strong>titre SEO</strong> (balise <title>), généralement distinct du simple titre du site,</li> <li>renseigner une <strong>meta description</strong> pour inciter davantage au clic.</li>
</ul>
<p>Les moteurs de recherche peuvent toutefois réécrire la meta description et le titre en se basant sur le contenu réel de la page et la requête de l’utilisateur.</p> <h3 id="changer-le-titre-du-site-va-t-il-modifier-mon-nom-de-domaine-nbsp">Changer le titre du site va-t-il modifier mon nom de domaine ?</h3>
<p>Non. Le <strong>nom de domaine</strong> (par exemple <em>monsite.com</em>) est indépendant du titre du site. Modifier le titre ne change ni votre domaine, ni les URL de vos pages, ni vos adresses e‑mail associées au domaine.</p>
<p>Pour changer de nom de domaine, vous devrez réaliser une opération spécifique : achat d’un nouveau domaine, configuration chez l’hébergeur, mise à jour des URL dans WordPress et redirectionséventuelles vers le nouveau domaine.</p> <h3 id="pourquoi-mon-logo-s-affiche-au-lieu-du-titre-du-site-nbsp">Pourquoi mon logo s’affiche au lieu du titre du site ?</h3>
<p>De nombreux thèmes WordPress privilégient l’affichage d’un <strong>logo</strong> dans l’en-tête, et masquent le texte du titre du site pour des raisons esthétiques. Selon votre thème, vous pouvez :</p>
<ul> <li>afficher à la fois le logo et le titre du site,</li> <li>n’afficher que le logo,</li> <li>ou n’afficher que le titre du site, sans logo.</li>
</ul>
<p>Ce réglage se trouve généralement dans <strong>Apparence > Personnaliser > Identité du site</strong> ou dans un panneau de configuration propre au thème ou au constructeur de thème (Divi, Elementor, etc.).</p> <h3 id="comment-verifier-que-mon-titre-de-site-est-bien-pris-en-compte-nbsp">Comment vérifier que mon titre de site est bien pris en compte ?</h3>
<p>Pour vérifier votre nouveau titre :</p>
<ul> <li>regardez l’onglet de votre navigateur sur la page d’accueil,</li> <li>inspectez le code source pour vérifier la balise <title>,</li> <li>utilisez un outil de prévisualisation ou votre extension SEO pour voir le rendu du snippet,</li> <li>consultez votre site en navigation privée ou sur un autre navigateur en cas de cache persistant.</li>
</ul> <h2 id="check-list-rapide-pour-bien-changer-le-titre-de-votre-site-wordpress">Check-list rapide pour bien changer le titre de votre site WordPress</h2>
<ul> <li>Identifier si vous utilisez <strong>WordPress.org</strong> (auto‑hébergé) ou <strong>WordPress.com</strong>.</li> <li>Modifier le <strong>titre du site</strong> dans <strong>Réglages > Général</strong> ou dans le <strong>personnalisateur</strong>.</li> <li>Adapter si besoin le <strong>slogan</strong> pour qu’il complète le titre.</li> <li>Vérifier le <strong>titre SEO</strong> via votre extension SEO pour la page d’accueil et les pages clés.</li> <li>Contrôler le rendu dans l’en-tête du site, dans l’onglet du navigateur et dans un simulateur de snippet.</li> <li>Vider le cache (navigateur, plugin, CDN) si le changement n’apparaît pas immédiatement.</li> <li>Mettre à jour vos supports externes (profil d’entreprise, réseaux sociaux, signatures) si le changement de titre est lié à un rebranding.</li>
</ul> <p>En appliquant ces bonnes pratiques et en utilisant les différentes méthodes proposées selon votre type de site WordPress, vous pourrez changer le titre de votre site en toute sécurité, optimiser sa visibilité dans les moteurs de recherche et renforcer la cohérence de votre identité en ligne.</p>
</div>
<!-- Articles similaires -->
<div class="mt-12 pt-8 border-t border-gray-200">
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
<i class="fas fa-newspaper text-purple-600"></i>
Articles similaires
</h2>
<div class="grid gap-4">
<a href="/blog/comment-securiser-un-site-wordpress-en-2025/" class="block p-4 bg-white rounded-lg border border-gray-200 hover:border-purple-300 hover:shadow-md transition">
<span class="text-purple-600 font-semibold hover:text-purple-800">Comment sécuriser un site WordPress en 2025</span>
</a>
<a href="/blog/comment-securiser-son-site-wordpress-guide-complet-2025/" class="block p-4 bg-white rounded-lg border border-gray-200 hover:border-purple-300 hover:shadow-md transition">
<span class="text-purple-600 font-semibold hover:text-purple-800">Comment Sécuriser Son Site WordPress : Guide Complet 2025</span>
</a>
<a href="/blog/comment-securiser-son-site-wordpress-en-2025/" class="block p-4 bg-white rounded-lg border border-gray-200 hover:border-purple-300 hover:shadow-md transition">
<span class="text-purple-600 font-semibold hover:text-purple-800">Comment sécuriser son site WordPress en 2025</span>
</a>
</div>
</div>
<!-- CTA Section -->
<div class="mt-12 pt-8 border-t border-gray-200">
<div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl p-8 text-center text-white">
<h3 class="text-2xl font-bold mb-4">Besoin d'aide avec votre SEO ?</h3>
<p class="mb-6 text-purple-100">Notreéquipe d'experts peut vous aider à optimiser votre site e-commerce</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/seo-ecommerce" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-purple-50 transition inline-block">
Découvrir nos services SEO
</a>
<a href="/#contact" class="bg-purple-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-900 transition inline-block">
Nous contacter
</a>
</div>
</div>
</div>
</article>
<!-- Section Commentaires -->
<div class="mt-12 max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 md:p-12">
<h2 class="text-3xl font-bold text-gray-900 mb-6 flex items-center gap-3">
<i class="fas fa-comments text-purple-600"></i>
Commentaires
</h2>
<!-- Liste des commentaires approuvés -->
<div id="comments-list" class="mb-8 space-y-6">
<!-- Les commentaires approuvés seront chargés ici via JavaScript -->
</div>
<!-- Formulaire de commentaire -->
<div class="border-t border-gray-200 pt-8">
<h3 class="text-xl font-semibold text-gray-900 mb-4">Laisser un commentaire</h3>
<form id="comment-form" class="space-y-4">
<input type="hidden" id="article-slug" value="comment-changer-le-titre-du-site-sur-wordpress-guide-complet-2025">
<div class="grid md:grid-cols-2 gap-4">
<div>
<label for="comment-name" class="block text-sm font-medium text-gray-700 mb-2">Nom *</label>
<input type="text" id="comment-name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
</div>
<div>
<label for="comment-email" class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
<input type="email" id="comment-email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
</div>
</div>
<div>
<label for="comment-message" class="block text-sm font-medium text-gray-700 mb-2">Message *</label>
<textarea id="comment-message" name="message" rows="5" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent"></textarea>
</div>
<div class="text-sm text-gray-600">
<i class="fas fa-info-circle text-purple-600"></i>
Votre commentaire sera soumis à modération avant publication.
</div>
<button type="submit" class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-blue-700 transition inline-flex items-center gap-2">
<i class="fas fa-paper-plane"></i>
Publier le commentaire
</button>
</form>
<div id="comment-status" class="mt-4 hidden"></div>
</div>
</div>
<!-- Navigation Articles -->
<div class="mt-12 max-w-4xl mx-auto">
<a href="/blog" class="inline-flex items-center gap-2 text-purple-600 hover:text-purple-800 transition font-semibold">
<i class="fas fa-arrow-left"></i>
Retour au blog
</a>
</div>
</div>
</section>
<!-- Script pour les commentaires -->
<script>
const articleSlug = 'comment-changer-le-titre-du-site-sur-wordpress-guide-complet-2025';
// Charger les commentaires approuvés
async function loadComments() {
try {
const response = await fetch(`/gestion-commentaires/get-comments.php?slug=${articleSlug}`);
const data = await response.json();
const commentsList = document.getElementById('comments-list');
if (data.success && data.comments.length > 0) {
commentsList.innerHTML = data.comments.map(comment => `
<div class="border-l-4 border-purple-600 pl-4 py-2">
<div class="flex items-center gap-2 mb-2">
<strong class="text-gray-900">${comment.name}</strong>
<span class="text-sm text-gray-500">•</span>
<span class="text-sm text-gray-500">${new Date(comment.date).toLocaleDateString('fr-FR')}</span>
</div>
<p class="text-gray-700">${comment.message}</p>
</div>
`).join('');
} else {
commentsList.innerHTML = '<p class="text-gray-500 italic">Aucun commentaire pour le moment. Soyez le premier à commenter !</p>';
}
} catch (error) {
console.error('Erreur lors du chargement des commentaires:', error);
}
}
// Gérer la soumission du formulaire
document.getElementById('comment-form').addEventListener('submit', async function(e) {
e.preventDefault();
const formData = {
slug: articleSlug,
name: document.getElementById('comment-name').value,
email: document.getElementById('comment-email').value,
message: document.getElementById('comment-message').value
};
const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn.innerHTML;
submitBtn.disabled = true;
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Envoi en cours...';
try {
const response = await fetch('/gestion-commentaires/submit-comment.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
const result = await response.json();
const messageDiv = document.getElementById('comment-status');
if (result.success) {
messageDiv.className = 'mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg';
messageDiv.textContent = 'Merci ! Votre commentaire aété soumis et sera publié après modération.';
messageDiv.classList.remove('hidden');
this.reset();
} else {
messageDiv.className = 'mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg';
messageDiv.textContent = result.message || 'Une erreur est survenue. Veuillez réessayer.';
messageDiv.classList.remove('hidden');
}
} catch (error) {
const messageDiv = document.getElementById('comment-status');
messageDiv.className = 'mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg';
messageDiv.textContent = 'Erreur de connexion. Veuillez réessayer plus tard.';
messageDiv.classList.remove('hidden');
} finally {
submitBtn.disabled = false;
submitBtn.innerHTML = originalText;
}
});
// Charger les commentaires au chargement de la page
loadComments();
</script>
<footer class="bg-gray-950 text-gray-400 py-12">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0 flex items-start gap-4">
<img src="/images/logo.png" alt="Logo VRAIVEX" class="h-32 w-32 md:h-40 md:w-40 object-contain">
<div>
<a href="#" class="text-2xl font-bold block">
<span class="gradient-text">VRAIVEX</span>
</a>
<p class="mt-2 text-sm">Automatisation, IA et SEO au service de la performance e-commerce</p>
</div>
</div>
<div class="flex flex-col items-center md:items-end">
<div class="grid grid-cols-2 md:flex md:flex-wrap gap-3 md:space-x-6 mb-4 text-center md:text-right">
<a href="/#about" class="hover:text-white transition text-sm">À propos</a>
<a href="/#services" class="hover:text-white transition text-sm">Services</a>
<a href="/#prestations" class="hover:text-white transition text-sm">Prestations</a>
<a href="/#bestsellers" class="hover:text-white transition text-sm">Best Sellers</a>
<a href="/#realisations" class="hover:text-white transition text-sm">Réalisations</a>
<a href="/#brands" class="hover:text-white transition text-sm">Nos Sites</a>
<a href="/creation-site-ecommerce" class="hover:text-white transition text-sm">Création Sites</a>
<a href="/seo-ecommerce" class="hover:text-white transition text-sm">SEO E-commerce</a>
<a href="/partenaires" class="hover:text-white transition text-sm">Partenaires</a>
<a href="/#contact" class="hover:text-white transition text-sm">Contact</a>
</div>
<p class="text-sm text-center md:text-right">© 2026 VRAIVEX. Tous droits réservés.</p>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="backToTop" class="fixed bottom-8 right-8 bg-gradient-to-r from-purple-600 to-blue-600 text-white p-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-110 transition-all duration-300 z-50 hidden">
<i class="fas fa-arrow-up text-xl"></i>
</button>
<script>
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.getElementById('header');
if (window.scrollY > 100) {
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobileMenuButton');
const mobileMenu = document.getElementById('mobileMenu');
const menuIcon = document.getElementById('menuIcon');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
// Toggle icon between bars and times
if (mobileMenu.classList.contains('hidden')) {
menuIcon.classList.remove('fa-times');
menuIcon.classList.add('fa-bars');
} else {
menuIcon.classList.remove('fa-bars');
menuIcon.classList.add('fa-times');
}
});
// Close menu when clicking on a link
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
menuIcon.classList.remove('fa-times');
menuIcon.classList.add('fa-bars');
});
});
}
// Brands Carousel
const brandsCarousel = document.getElementById('brandsCarousel');
const brandsContainer = document.getElementById('brandsContainer');
const brandsPrevBtn = document.getElementById('brandsPrevBtn');
const brandsNextBtn = document.getElementById('brandsNextBtn');
const brandsPrevBtnMobile = document.getElementById('brandsPrevBtnMobile');
const brandsNextBtnMobile = document.getElementById('brandsNextBtnMobile');
if (brandsContainer && brandsCarousel) {
let currentIndex = 0;
const cards = brandsContainer.querySelectorAll('.brand-card');
const gap = 24;
const cardsPerView = { mobile: 1, tablet: 2, desktop: 3, large: 4 };
function getCardsPerView() {
const w = window.innerWidth;
if (w >= 1280) return cardsPerView.large;
if (w >= 1024) return cardsPerView.desktop;
if (w >= 768) return cardsPerView.tablet;
return cardsPerView.mobile;
}
function getCardWidth() {
const cpv = getCardsPerView();
const cw = brandsCarousel.offsetWidth;
return (cw - gap * (cpv - 1)) / cpv;
}
function updateCarousel() {
const cpv = getCardsPerView();
const cardW = getCardWidth();
const maxIdx = Math.max(0, cards.length - cpv);
currentIndex = Math.min(currentIndex, maxIdx);
const offset = currentIndex * (cardW + gap);
brandsContainer.style.transform = `translateX(-${offset}px)`;
const atStart = currentIndex === 0;
const atEnd = currentIndex >= maxIdx;
[brandsPrevBtn, brandsPrevBtnMobile].forEach(function(btn) {
if (btn) { btn.style.opacity = atStart ? '0.4' : '1'; btn.style.pointerEvents = atStart ? 'none' : 'auto'; }
});
[brandsNextBtn, brandsNextBtnMobile].forEach(function(btn) {
if (btn) { btn.style.opacity = atEnd ? '0.4' : '1'; btn.style.pointerEvents = atEnd ? 'none' : 'auto'; }
});
if (document.getElementById('brandsCounter')) {
document.getElementById('brandsCounter').textContent = (currentIndex + 1) + ' / ' + (maxIdx + 1);
}
}
function nextSlide() {
const cpv = getCardsPerView();
const maxIdx = Math.max(0, cards.length - cpv);
if (currentIndex < maxIdx) { currentIndex++; updateCarousel(); }
}
function prevSlide() {
if (currentIndex > 0) { currentIndex--; updateCarousel(); }
}
if (brandsNextBtn) brandsNextBtn.addEventListener('click', nextSlide);
if (brandsPrevBtn) brandsPrevBtn.addEventListener('click', prevSlide);
if (brandsNextBtnMobile) brandsNextBtnMobile.addEventListener('click', nextSlide);
if (brandsPrevBtnMobile) brandsPrevBtnMobile.addEventListener('click', prevSlide);
function setCardWidths() {
const cardW = getCardWidth();
cards.forEach(function(card) {
card.style.width = cardW + 'px';
card.style.minWidth = cardW + 'px';
card.style.flexShrink = '0';
});
}
let touchStartX = 0;
let touchEndX = 0;
brandsCarousel.addEventListener('touchstart', function(e) { touchStartX = e.changedTouches[0].screenX; }, { passive: true });
brandsCarousel.addEventListener('touchend', function(e) {
touchEndX = e.changedTouches[0].screenX;
const diff = touchStartX - touchEndX;
if (Math.abs(diff) > 50) { diff > 0 ? nextSlide() : prevSlide(); }
}, { passive: true });
setCardWidths();
updateCarousel();
let resizeTimeout;
window.addEventListener('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
setCardWidths();
currentIndex = 0;
updateCarousel();
}, 250);
});
}
</script>
<script>
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.getElementById('header');
if (window.scrollY > 50) {
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
});
// Scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
// Observe all fade-in-up elements
document.querySelectorAll('.fade-in-up').forEach(el => {
observer.observe(el);
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Counter animation for stats
function animateCounter(element, target, duration = 2000) {
let start = 0;
const increment = target / (duration / 16);
const timer = setInterval(() => {
start += increment;
if (start >= target) {
element.textContent = target + (element.textContent.includes('+') ? '+' : '') + (element.textContent.includes('K') ? 'K€' : '');
clearInterval(timer);
} else {
element.textContent = Math.floor(start) + (element.textContent.includes('+') ? '+' : '') + (element.textContent.includes('K') ? 'K€' : '');
}
}, 16);
}
// Observe stats section
const statsObserver = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting && !entry.target.classList.contains('animated')) {
entry.target.classList.add('animated');
const statsCards = entry.target.querySelectorAll('.stats-card');
statsCards.forEach((card, index) => {
setTimeout(() => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
setTimeout(() => {
card.style.transition = 'all 0.6s ease';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 100);
}, index * 100);
});
}
});
}, { threshold: 0.3 });
const statsSection = document.querySelector('section.bg-gradient-to-r');
if (statsSection) {
statsObserver.observe(statsSection);
}
</script>
<script>
// Gestion du formulaire de contact
const contactForm = document.getElementById('contact-form');
const formMessage = document.getElementById('form-message');
const submitBtn = document.getElementById('submit-btn');
if (contactForm) {
contactForm.addEventListener('submit', async function(e) {
e.preventDefault();
// Désactiver le bouton pendant l'envoi
submitBtn.disabled = true;
submitBtn.textContent = 'Envoi en cours...';
// Récupérer les données du formulaire
const formData = new FormData(contactForm);
try {
// Vérifier que les données sont bien dans le FormData
const formDataObj = {
name: formData.get('name'),
email: formData.get('email'),
subject: formData.get('subject'),
message: formData.get('message')
};
console.log('Données du formulaire:', formDataObj);
// Vérifier que tous les champs sont remplis
if (!formDataObj.name || !formDataObj.email || !formDataObj.subject || !formDataObj.message) {
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
formMessage.textContent = 'Veuillez remplir tous les champs du formulaire.';
submitBtn.disabled = false;
submitBtn.textContent = 'Envoyer le message';
return;
}
// Essayer d'abord avec JSON (plus fiable)
// Siça ne fonctionne pas, on essaiera avec FormData
let response;
try {
// Méthode 1 : Envoyer en JSON (plus fiable selon les forums)
response = await fetch('gestion-formulaire-contact/send-email-json.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formDataObj)
});
} catch (jsonError) {
console.warn('Erreur avec JSON, essai avec FormData:', jsonError);
// Méthode 2 : Fallback avec FormData
response = await fetch('send-email.php', {
method: 'POST',
body: formData
});
}
// Lire le texte de la réponse d'abord pour déboguer
const responseText = await response.text();
console.log('Réponse serveur:', responseText.substring(0, 500));
// Vérifier si la réponse est OK
if (!response.ok) {
// Essayer de parser le JSON d'erreur
try {
const errorResult = JSON.parse(responseText);
// Afficher le message d'erreur du serveur directement à l'utilisateur
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
formMessage.textContent = errorResult.message || `Erreur ${response.status}: ${response.statusText}`;
submitBtn.disabled = false;
submitBtn.textContent = 'Envoyer le message';
return; // Sortir de la fonction pour ne pas continuer
} catch (e) {
throw new Error(`Erreur HTTP ${response.status}: ${response.statusText}. Réponse: ${responseText.substring(0, 200)}`);
}
}
// Vérifier si PHP n'est pas exécuté (le serveur renvoie le code PHP brut)
if (responseText.trim().startsWith('<?php') || responseText.includes('<?php')) {
console.error('ERREUR: PHP n\'est pas exécuté par le serveur. Le code PHP est renvoyé brut.');
console.error('Le serveur web n\'est pas configuré pour exécuter PHP.');
// Utiliser la solution de secours : sauvegarder dans localStorage
const messageData = {
name: formData.get('name'),
email: formData.get('email'),
subject: formData.get('subject'),
message: formData.get('message'),
timestamp: new Date().toISOString()
};
// Sauvegarder dans localStorage comme solution de secours
const savedMessages = JSON.parse(localStorage.getItem('vraivex_messages') || '[]');
savedMessages.push(messageData);
localStorage.setItem('vraivex_messages', JSON.stringify(savedMessages));
// Afficher un message spécial
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-yellow-600 text-white';
formMessage.innerHTML = '⚠️ PHP n\'est pas configuré sur le serveur. Votre message aété sauvegardé localement. <br>Veuillez nous contacter directement à <strong>contact@vraivex.fr</strong> ou consulter les messages sauvegardés dans la console du navigateur.';
// Afficher les messages sauvegardés dans la console
console.log('Messages sauvegardés localement:', savedMessages);
console.log('Pour consulter les messages, tapez dans la console: JSON.parse(localStorage.getItem("vraivex_messages"))');
return; // Sortir de la fonction
}
// Essayer de parser le JSON
let result;
try {
result = JSON.parse(responseText);
} catch (parseError) {
console.error('Erreur de parsing JSON:', parseError);
console.error('Réponse reçue:', responseText.substring(0, 500));
throw new Error('Le serveur a renvoyé une réponse invalide. Vérifiez la console pour plus de détails.');
}
// Afficher le message de résultat
formMessage.classList.remove('hidden');
if (result.success) {
formMessage.className = 'mb-6 p-4 rounded-lg bg-green-600 text-white';
formMessage.textContent = 'Message envoyé avec succès ! Nous vous répondrons dans les plus brefs délais.';
contactForm.reset();
} else {
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
let errorMsg = result.message || 'Une erreur est survenue. Veuillez réessayer.';
// Afficher le message de debug en développement (à retirer en production)
if (result.debug) {
console.error('Erreur détaillée:', result.debug);
}
formMessage.textContent = errorMsg;
}
} catch (error) {
formMessage.classList.remove('hidden');
formMessage.className = 'mb-6 p-4 rounded-lg bg-red-600 text-white';
// Message d'erreur plus détaillé pour le débogage
let errorMsg = 'Une erreur est survenue lors de la communication avec le serveur. ';
errorMsg += 'Veuillez réessayer plus tard ou nous contacter directement à contact@vraivex.fr';
// En mode développement, afficher plus de détails
if (error.message) {
console.error('Erreur détaillée:', error);
console.error('Message:', error.message);
console.error('Stack:', error.stack);
}
formMessage.textContent = errorMsg;
} finally {
// Réactiver le bouton
submitBtn.disabled = false;
submitBtn.textContent = 'Envoyer le message';
// Masquer le message après 5 secondes
setTimeout(() => {
formMessage.classList.add('hidden');
}, 5000);
}
});
}
// Back to Top Button functionality
const backToTopButton = document.getElementById('backToTop');
// Show/hide button based on scroll position
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('hidden');
} else {
backToTopButton.classList.add('hidden');
}
});
// Smooth scroll to top when clicked
backToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>
</body>
</html> 