Comment mettre WordPress en français (guide complet)

Sommaire de l'article

WordPress est un système de gestion de contenu extrêmement populaire, utilisé par des millions de sites web dans le monde. Par défaut, de nombreuses installations se font en anglais, mais WordPress est entièrement traduit en français et en plus de 200 autres langues. Si vous souhaitez mettre WordPress en français, traduire l’interface d’administration, afficher votre site en français ou créer un site multilingue, vous pouvez le faire très facilement en suivant les étapes détaillées dans ce guide.

1. Installer WordPress directement en français

La manière la plus simple d’avoir WordPress en français est de l’installer dès le départ avec la langue française. Cela permet d’obtenir immédiatement un tableau de bord, des messages système et une interface en français.

1.1 Télécharger WordPress en français

Téléchargez la version française de WordPress depuis le site officiel français : fr.wordpress.org.
Décompressez l’archive ZIP sur votre ordinateur.
Transférez les fichiers WordPress vers votre serveur (via FTP, SFTP ou le gestionnaire de fichiers de votre hébergeur).

1.2 Lancer le processus d’installation

Ouvrez votre navigateur et accédez à l’URL de votre site (par exemple https://www.monsite.com).
Suivez l’assistant d’installation WordPress (création de la base de données, informations de connexion, titre du site, etc.).
À l’étape de sélection de la langue, choisissez Français.
Finalisez l’installation.

Avec cette méthode, l’interface d’administration, les messages système et la majorité des textes par défaut seront immédiatement en français, à condition que votre thème et vos extensions disposent eux aussi de traductions françaises.

2. Mettre un site WordPress existant en français

Si vous avez déjà installé WordPress en anglais (ou dans une autre langue) et que vous souhaitez tout basculer en français, vous n’êtes pas obligé de tout réinstaller. Depuis plusieurs années, WordPress permet de changer la langue du site depuis le tableau de bord, sans passer par le fichier wp-config.php pour les versions récentes.

2.1 Changer la langue du site dans les réglages

Connectez-vous à l’administration de WordPress.
Allez dans Réglages > Général.
Repérez le champ Langue du site.
Sélectionnez Français dans la liste déroulante.
Cliquez sur Enregistrer les modifications.

WordPress va automatiquement télécharger et installer les fichiers de traduction en français pour le cœur (core) de WordPress. Si des traductions existent pour votre thème et vos extensions, elles seront également récupérées automatiquement.

Cette action bascule :

l’interface d’administration (tableau de bord, menus, écrans d’édition) en français ;
les messages système (messages d’erreur, confirmations, textes standard) en français ;
les textes fournis par les thèmes et extensions compatibles et traduits en français.

2.2 Différence entre langue du site et langue de l’utilisateur

WordPress permet aussi de choisir une langue différente par utilisateur, pratique si vous travaillez en équipe internationale.

Allez dans Utilisateurs > Profil (ou Votre profil).
Dans la section Langue, choisissez Français comme langue de l’interface.
Enregistrez les modifications.

Dans ce cas, seul votre tableau de bord sera en français. Le site public reste dans la langue définie dans Réglages > Général > Langue du site.

3. Utiliser les fichiers de traduction (MO et PO)

WordPress utilise des fichiers de traduction au format .po (fichiers éditables) et .mo (fichiers compilés) pour traduire le cœur, les thèmes et les extensions. Dans les installations récentes, ces fichiers sont généralement gérés automatiquement, mais il peut être utile de savoir comment les manipuler manuellement.

3.1 Où sont stockées les traductions

Les traductions du cœur de WordPress sont généralement dans /wp-content/languages/.
Les traductions des thèmes se trouvent souvent dans /wp-content/languages/themes/ ou dans un sous-dossier /languages/ à l’intérieur du thème.
Les traductions des extensions se trouvent dans /wp-content/languages/plugins/ ou dans un sous-dossier /languages/ de l’extension.

3.2 Installer manuellement les fichiers de traduction français

Téléchargez les fichiers de traduction français de WordPress (ou d’un thème/extension) au format .mo et, si disponible, .po.
Créez le dossier /wp-content/languages/ s’il n’existe pas encore.
Placez les fichiers de langue dans le dossier approprié (par exemple /wp-content/languages/ pour le cœur, /wp-content/languages/plugins/ pour une extension).
Vérifiez dans les réglages de WordPress que la langue du site est bien définie sur Français.

Cette méthode est surtout utile pour :

installer une traduction qui n’est pas encore disponible automatiquement ;
corriger ou personnaliser une traduction existante ;
gérer des traductions pour des thèmes ou extensions premium distribués sans pack de langue complet.

4. Mettre l’interface administrative en français uniquement

Vous pouvez vouloir utiliser WordPress en français pour l’administration, tout en gardant le site public dans une autre langue (par exemple un site vitrine en anglais). Deux niveaux sont possibles :

4.1 Changer la langue globale du site

Comme vu plus haut, via Réglages > Général > Langue du site, vous pouvez sélectionner Français. Cette option a un impact sur :

l’interface d’administration ;
les textes par défaut côté visiteur (commentaires, formulaires standards, messages d’erreur génériques) ;
les textes de thèmes et extensions traduits.

4.2 Utiliser une langue différente pour votre compte

Si vous souhaitez uniquement mettre votre tableau de bord en français, sans modifier la langue du site pour les visiteurs :

Accédez à Utilisateurs > Profil.
Dans Langue, choisissez Français.
Enregistrez.

Cette option est particulièrement utile lorsque le site est destiné à un public non francophone, mais que l’administrateur préfère gérer WordPress en français.

5. Mettre WordPress.com en français

Il est important de distinguer WordPress.org (version auto-hébergée) et WordPress.com (plateforme hébergée). Sur WordPress.com, le changement de langue se fait via l’interface de votre compte, sans accès FTP ni fichiers serveur.

5.1 Modifier la langue de l’interface WordPress.com

Connectez-vous à votre compte WordPress.com.
Cliquez sur votre avatar ou votre nom d’utilisateur.
Accédez aux Paramètres de compte.
Dans la section Langue, choisissez Français.
Enregistrez les modifications.

5.2 Modifier la langue d’un site WordPress.com

Dans l’interface WordPress.com, sélectionnez le site concerné.
Allez dans Réglages > Général (ou équivalent selon l’interface).
Choisissez Français comme langue du site.
Enregistrez.

Le principe est similaire à celui de WordPress.org, mais l’accès se fait exclusivement depuis le tableau de bord WordPress.com.

6. Mettre un site WordPress en français ≠ créer un site multilingue

Beaucoup d’utilisateurs confondent le fait de « mettre WordPress en français » avec la création d’un site réellement multilingue. Il s’agit de deux choses différentes :

Mettre WordPress en français : changer la langue de l’interface d’administration et des textes par défaut (et éventuellement du site public) en français.
Créer un site multilingue : proposer plusieurs langues aux visiteurs (par exemple français, anglais, espagnol), avec un sélecteur de langue et des URLs dédiées pour chaque version.

Pour un site strictement francophone, vous n’avez pas besoin de plugin multilingue. En revanche, si vous souhaitez proposer plusieurs langues, il est recommandé d’utiliser une extension dédiée.

6.1 Plugins populaires pour site WordPress multilingue

Pour créer un site multilingue, plusieurs extensions font référence :

WPML : plugin premium très complet, adapté aux sites professionnels complexes.
Polylang : extension très utilisée, disponible en version gratuite et payante.
TranslatePress : plugin orienté édition visuelle, permettant de traduire les pages directement depuis le front-end.
Weglot : solution SaaS avec plugin WordPress, spécialisée dans la traduction automatique et la gestion centralisée des langues.

Ces outils permettent notamment de :

gérer plusieurs langues pour les pages, articles, menus, widgets ;
afficher un sélecteur de langue pour les visiteurs ;
gérer le référencement multilingue (balises hreflang, URLs distinctes, sitemaps par langue selon le plugin utilisé) ;
traduire les chaînes de thèmes et d’extensions.

6.2 Utiliser WPML ou Polylang pour un site bilingue français/anglais

Pour illustrer, voici les grandes étapes communes avec ce type de plugins :

Installez et activez le plugin choisi (WPML, Polylang, etc.).
Choisissez Français comme langue principale et ajoutez les langues secondaires (par exemple Anglais).
Traduisez vos pages, articles, menus et taxonomies (catégories, étiquettes).
Configurez l’affichage du sélecteur de langue (menu, widget, en-tête, etc.).
Vérifiez les URLs, les slugs traduits et la cohérence des liens internes.

Ces plugins ne sont pas nécessaires si votre objectif est uniquement d’avoir WordPress en français, mais ils deviennent indispensables dès que vous voulez un site réellement multilingue.

7. Impact de la langue sur les thèmes et extensions

Passer WordPress en français ne garantit pas que tout votre site sera traduit. Le résultat dépend de la manière dont votre thème et vos extensions ont été développés.

7.1 Thèmes et extensions « translation-ready »

Un thème ou une extension doit être conçu pour être traduisible :

tous les textes doivent être enveloppés dans des fonctions de traduction WordPress (par exemple __ ou _e) ;
un text domain doit être défini pour le thème ou l’extension ;
des fichiers .pot, .po et .mo doivent être fournis ou générables.

Si votre thème est « translation-ready » et que des traductions françaises existent, le passage de WordPress en français affichera automatiquement les textes du thème en français.

7.2 Traduire un thème ou une extension avec un plugin dédié

Si certains textes restent en anglais, vous pouvez utiliser un plugin de traduction interne comme Loco Translate pour créer ou modifier les fichiers de langue :

Installez et activez Loco Translate.
Allez dans le menu Loco Translate puis choisissez Thèmes ou Extensions.
Sélectionnez l’élément à traduire.
Créez ou modifiez la traduction en choisissant la langue Français.
Traduisez les chaînes de texte une par une et enregistrez.

Les traductions seront alors stockées sous forme de fichiers .po et .mo et utilisées automatiquement par WordPress lorsque la langue est définie sur français.

8. Bonnes pratiques SEO pour un site WordPress en français

Une fois votre site WordPress en français, il est important d’optimiser son référencement naturel pour le public francophone. Cela passe par le choix des bons mots-clés, une structure claire et une optimisation technique de base.

8.1 Choisir des mots-clés en français adaptés

Identifiez les requêtes que vos clients francophones saisissent réellement (par exemple « créer un site WordPress », « agence WordPress Paris », « thème WordPress responsive gratuit »).
Utilisez des outils de recherche de mots-clés (Google Keyword Planner, outils SEO spécialisés) pour évaluer le volume de recherche et l’intention de vos visiteurs.
Préférez des expressions naturelles en français, en tenant compte des variantes régionales (France, Canada, Belgique, Suisse, etc.).

Intégrez ensuite ces mots-clés de façon naturelle dans :

les titres de pages (balise </code>) ;</li> <li>les titres de contenu (<code><h1></code>, <code><h2 id="etc-les-paragraphes-listes-et-ancres-de-liens-les-attributs-alt-des-images-8-2-rediger-des-titres-et"></code>, etc.) ;</li> <li>les paragraphes, listes et ancres de liens ;</li> <li>les attributs <code>alt</code> des images.</li> </ul> <h3>8.2 Rédiger des titres et méta-descriptions en français</h2> <p>Les méta-descriptions influencent le taux de clics depuis les résultats de recherche. Pour un site en français :</p> <ul> <li>rédigez une méta-description unique pour chaque page, en français correct et naturel ;</li> <li>résumez clairement le contenu de la page en une ou deux phrases ;</li> <li>intégrez au moins un mot-clé principal de manière fluide ;</li> <li>ajoutez un appel à l’action pertinent (par exemple « Découvrez nos services », « Téléchargez le guide gratuit », etc.).</li> </ul> <p>Vous pouvez gérer ces éléments via des extensions comme Yoast SEO, Rank Math ou All in One SEO, qui sont également disponibles en français.</p> <h3 id="8-3-structurer-le-contenu-pour-le-public-francophone">8.3 Structurer le contenu pour le public francophone</h3> <p>Un contenu bien structuré en français améliore la lisibilité et le référencement :</p> <ul> <li>utilisez une structure claire avec un seul <code><h1></code> par page, puis <code><h2 id="etc-pour-les-sous-parties-privilegiez-des-phrases-courtes-et-un-vocabulaire-accessible-a-votre-audie"></code>, <code><h3></code>, etc. pour les sous-parties ;</li> <li>privilégiez des phrases courtes et un vocabulaire accessible à votre audience cible ;</li> <li>évitez le jargon technique non expliqué, sauf si vous vous adressez à des professionnels ;</li> <li>mettez en avant les informations importantes en début de paragraphe.</li> </ul> <h3>8.4 Améliorer les performances et l’expérience utilisateur</h2> <p>La vitesse de chargement et l’expérience utilisateur sont des critères importants, quel que soit le langage du site :</p> <ul> <li>optimisez les images (compression, format adapté, dimensions correctes) ;</li> <li>utilisez un système de cache pour accélérer l’affichage des pages ;</li> <li>choisissez un hébergeur performant, idéalement avec des serveurs situés proches de votre audience francophone ;</li> <li>assurez-vous que votre site est <strong>responsive</strong> (adapté aux mobiles et tablettes).</li> </ul> <p>Un site WordPress en français, rapide et bien structuré, a plus de chances de se positionner sur des requêtes francophones compétitives.</p> <h2 id="9-cas-particuliers-et-conseils-pratiques">9. Cas particuliers et conseils pratiques</h2> <h3 id="9-1-traduire-uniquement-certaines-parties-du-site">9.1 Traduire uniquement certaines parties du site</h3> <p>Vous pouvez souhaiter garder un site principalement en français, mais conserver certains contenus en anglais (articles techniques, documentation, etc.). Dans ce cas :</p> <ul> <li>laissez la langue du site sur <strong>Français</strong> ;</li> <li>rédigez les contenus spécifiques en anglais dans vos pages ou articles concernés ;</li> <li>précisez éventuellement dans le contenu que la section est en anglais pour ne pas surprendre les visiteurs.</li> </ul> <p>Si ces contenus en anglais deviennent nombreux, il sera plus pertinent de mettre en place un véritable système multilingue avec un plugin dédié.</p> <h3 id="9-2-gerer-les-mises-a-jour-de-traduction">9.2 Gérer les mises à jour de traduction</h3> <p>Les traductions de WordPress, des thèmes et des extensions sont régulièrement mises à jour. Pour profiter des dernières corrections :</p> <ul> <li>gardez WordPress, vos thèmes et vos extensions à jour ;</li> <li>vérifiez ponctuellement dans <strong>Tableau de bord > Mises à jour</strong> si de nouveaux fichiers de langue sont disponibles ;</li> <li>mettez à jour les traductions personnalisées créées avec des outils comme Loco Translate lorsque les thèmes ou extensions changent.</li> </ul> <h3 id="9-3-participer-a-la-traduction-de-wordpress-en-francais">9.3 Participer à la traduction de WordPress en français</h3> <p>WordPress dispose d’une communauté francophone active qui contribue à la traduction du cœur, des thèmes et des extensions. Si vous souhaitez améliorer la qualité des traductions françaises, vous pouvez rejoindre ces efforts de contribution et proposer des corrections ou de nouvelles traductions pour les projets que vous utilisez.</p> <h2 id="10-resume-des-etapes-pour-mettre-wordpress-en-francais">10. Résumé des étapes pour mettre WordPress en français</h2> <p>Pour terminer, voici un récapitulatif des principales actions à effectuer pour mettre WordPress en français et optimiser votre site :</p> <ul> <li>Installer directement WordPress en français depuis le site officiel ou</li> <li>Changer la langue d’un site existant via <strong>Réglages > Général > Langue du site</strong>.</li> <li>Ajuster la langue de l’interface utilisateur pour chaque compte dans <strong>Utilisateurs > Profil</strong>.</li> <li>Vérifier que votre thème et vos extensions sont compatibles avec la traduction et disposent de fichiers de langue français.</li> <li>Utiliser si nécessaire des fichiers <strong>.po</strong>/<strong>.mo</strong> ou un plugin comme <strong>Loco Translate</strong> pour compléter ou personnaliser les traductions.</li> <li>Installer un plugin multilingue (WPML, Polylang, TranslatePress, Weglot…) si vous souhaitez proposer plusieurs langues à vos visiteurs.</li> <li>Optimiser votre contenu, vos titres, vos méta-descriptions et votre structure en français pour améliorer votre référencement naturel.</li> <li>Soigner les performances et l’expérience utilisateur pour votre audience francophone.</li> </ul> <p>En suivant ces étapes, vous pouvez transformer un site WordPress initialement en anglais en un site entièrement francophone, professionnel, bien positionné sur les moteurs de recherche et agréable à utiliser pour vos visiteurs.</p> </div>  <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>  <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>  <div id="comments-list" class="mb-8 space-y-6">  </div>  <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-mettre-wordpress-en-francais-guide-complet"> <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>  <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> const articleSlug = 'comment-mettre-wordpress-en-francais-guide-complet'; // 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="/#brands" class="hover:text-white transition text-sm">Nos marques</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">© 2025 VRAIVEX. Tous droits réservés.</p> </div> </div> </div> </footer>  <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 cardsPerView = { mobile: 1, tablet: 2, desktop: 3, large: 4 }; function getCardsPerView() { const width = window.innerWidth; if (width >= 1280) return cardsPerView.large; if (width >= 1024) return cardsPerView.desktop; if (width >= 768) return cardsPerView.tablet; return cardsPerView.mobile; } function updateCarousel() { const cardsPerViewCount = getCardsPerView(); const containerWidth = brandsCarousel.offsetWidth; const cardWidth = containerWidth / cardsPerViewCount; const maxIndex = Math.max(0, cards.length - cardsPerViewCount); currentIndex = Math.min(currentIndex, maxIndex); brandsContainer.style.transform = `translateX(-${currentIndex * cardWidth}px)`; // Update button states const isAtStart = currentIndex === 0; const isAtEnd = currentIndex >= maxIndex; if (brandsPrevBtn) { brandsPrevBtn.style.opacity = isAtStart ? '0.5' : '1'; brandsPrevBtn.style.cursor = isAtStart ? 'not-allowed' : 'pointer'; } if (brandsNextBtn) { brandsNextBtn.style.opacity = isAtEnd ? '0.5' : '1'; brandsNextBtn.style.cursor = isAtEnd ? 'not-allowed' : 'pointer'; } if (brandsPrevBtnMobile) { brandsPrevBtnMobile.style.opacity = isAtStart ? '0.5' : '1'; brandsPrevBtnMobile.style.cursor = isAtStart ? 'not-allowed' : 'pointer'; } if (brandsNextBtnMobile) { brandsNextBtnMobile.style.opacity = isAtEnd ? '0.5' : '1'; brandsNextBtnMobile.style.cursor = isAtEnd ? 'not-allowed' : 'pointer'; } } function nextSlide() { const cardsPerViewCount = getCardsPerView(); const maxIndex = Math.max(0, cards.length - cardsPerViewCount); if (currentIndex < maxIndex) { currentIndex++; updateCarousel(); } } function prevSlide() { if (currentIndex > 0) { currentIndex--; updateCarousel(); } } // Event listeners if (brandsNextBtn) brandsNextBtn.addEventListener('click', nextSlide); if (brandsPrevBtn) brandsPrevBtn.addEventListener('click', prevSlide); if (brandsNextBtnMobile) brandsNextBtnMobile.addEventListener('click', nextSlide); if (brandsPrevBtnMobile) brandsPrevBtnMobile.addEventListener('click', prevSlide); // Set responsive width for cards function setCardWidths() { const cardsPerViewCount = getCardsPerView(); const containerWidth = brandsCarousel.offsetWidth; const gap = 24; // 24px gap const cardWidth = (containerWidth - (gap * (cardsPerViewCount - 1))) / cardsPerViewCount; cards.forEach(card => { card.style.width = `${cardWidth}px`; card.style.flexShrink = '0'; }); } // Initialize setCardWidths(); updateCarousel(); // Update on resize 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>