Code Selecteur de Langue – A Copier

Copier tout le code ci-dessous et le coller dans ‘Scripts in Footer’ du plugin ‘Insert Headers and Footers’:

<style>
/* Language Switcher SVG Flags */
.ps-language-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.ps-lang-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.ps-lang-button:hover {
    background: #f3f4f6;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.ps-lang-button svg {
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ps-lang-text {
    font-size: 14px;
    color: #4b5563;
    font-weight: 500;
}

@media (max-width: 768px) {
    .ps-language-switcher {
        top: 15px;
        right: 15px;
    }
    .ps-lang-button {
        padding: 5px 8px;
    }
    .ps-lang-text {
        font-size: 12px;
    }
}
</style>
<div class="ps-language-switcher">
    <a href="#" class="ps-lang-button" id="ps-lang-toggle" title="Switch language">
        <svg width="20" height="14" viewBox="0 0 60 42" class="rounded-sm shadow-sm" id="flag-icon">
            <!-- Le SVG sera change dynamiquement -->
        </svg>
        <span class="ps-lang-text" id="lang-text"></span>
    </a>
</div>

<script>
(function() {
    // Drapeaux SVG
    const flagFR = '<rect width="20" height="42" fill="#002395"/><rect x="20" width="20" height="42" fill="#fff"/><rect x="40" width="20" height="42" fill="#ED2939"/>';
    const flagEN = '<rect width="60" height="42" fill="#012169"/><path d="M0,0 L60,42 M60,0 L0,42" stroke="#fff" stroke-width="7"/><path d="M0,0 L60,42 M60,0 L0,42" stroke="#C8102E" stroke-width="4"/><path d="M30,0 V42 M0,21 H60" stroke="#fff" stroke-width="11"/><path d="M30,0 V42 M0,21 H60" stroke="#C8102E" stroke-width="7"/>';

    // Detecter la langue actuelle
    const currentPath = window.location.pathname;
    const isFrench = !currentPath.startsWith('/en/') && !currentPath.includes('-en/');

    // Elements
    const flagIcon = document.getElementById('flag-icon');
    const langText = document.getElementById('lang-text');
    const toggle = document.getElementById('ps-lang-toggle');

    // Fonction de mise a jour de l'affichage
    function updateDisplay() {
        if (isFrench) {
            flagIcon.innerHTML = flagEN;
            langText.textContent = 'EN';
            toggle.title = 'Switch to English';
        } else {
            flagIcon.innerHTML = flagFR;
            langText.textContent = 'FR';
            toggle.title = 'Passer en Français';
        }
    }

    // Fonction de changement de langue
    function switchLanguage(e) {
        e.preventDefault();

        // Construire l'URL de la langue opposee
        let newUrl;
        if (isFrench) {
            // FR -> EN : ajouter /en/ ou -en
            if (currentPath === '/' || currentPath === '') {
                newUrl = '/en/';
            } else {
                // Trouver l'URL EN correspondante
                // Heuristique simple: ajouter -en au slug
                const parts = currentPath.split('/').filter(p => p);
                if (parts.length > 0) {
                    newUrl = '/en/' + parts.join('/') + '/';
                } else {
                    newUrl = '/en/';
                }
            }
        } else {
            // EN -> FR : enlever /en/ et -en
            newUrl = currentPath.replace('/en/', '/').replace(/-en\//, '/');
            if (newUrl === '//' || newUrl === '') {
                newUrl = '/';
            }
        }

        window.location.href = newUrl;
    }

    // Initialisation
    updateDisplay();
    toggle.addEventListener('click', switchLanguage);
})();
</script>

Ou utiliser directement (visible sur cette page):