网站内点击链接时保持语言选择状态的实现方案

我把问题换成了解决方案，折腾了好久才搞定。给不想用插件实现网站语言切换功能的朋友分享下面的代码，希望能帮大家省点时间。;)

主导航菜单（WordPress/Elementor中添加到HTML小部件） #

<div class="main_nav_menu">
  <a href="Link 1" class="menu-item">Home</a>
  
  <div class="menu-item with dropdown">
    Products <span class="arrow">▼</span>
    <div class="nav_submenu">
      <a href="Link 2" class="submenu-item">Product 1</a>
      <a href="Link 3" class="submenu-item">Product 2</a>
    </div>
  </div>
    
  <a href="Link 4" class="menu-item">Contact</a>
  <a href="Link 5" class="menu-item">About us</a>
</div>

为菜单项添加语言参数的JavaScript代码（放在上述HTML小部件代码下方） #

这段代码会给所有菜单项添加事件监听器，点击链接时自动带上当前选中的语言参数：

<script>
    document.addEventListener('DOMContentLoaded', function() {
    
    // 获取main_nav_menu元素
    var mainNavMenu = document.querySelector('.main_nav_menu');

    // 为main_nav_menu绑定点击事件
    mainNavMenu.addEventListener('click', function(event) {
    var clickedElement = event.target;

        // 判断点击的是子菜单项还是主菜单项
        if (clickedElement.classList.contains('submenu-item') || clickedElement.classList.contains('menu-item')) {
            event.preventDefault();

            var selectedLanguage = (new URLSearchParams(window.location.search)).get('lang');
            var link = clickedElement.getAttribute('href') + '?lang=' + selectedLanguage;

            window.location.href = link;
        }
    });
  });
</script>

导航菜单样式CSS（可按需调整） #

.main_nav_menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 18px;
  height: 40px !important;
  transition: background-color 0.8s, color 0.8s;
}

.menu-item {
  padding: 12px 20px 12px 20px;
  color: #6e7384 !important;
  position: relative;
  /*transition: background-color 0.8s, color 0.8s;*/
}

.arrow {
  font-size: 15px;
  vertical-align: middle;
  margin-left: 2px;
  padding-bottom: 4px;
}

.menu-item:hover {
  padding: 12px 20px 12px 20px;
  color: #ffffff !important;
  transition: background-color 0.8s, color 0.8s;
}

.main_nav_menu .menu-item with dropdown {
  position: relative;
}

.nav_submenu {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #212b4d !important;
  width: 320px !important;
  transition: opacity 0.8s, transform 0.8s;
  opacity: 0;
}

.main_nav_menu .menu-item with dropdown:hover .nav_submenu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.submenu-item {
  display: block;
  color: #6e7384 !important;
  padding: 12px 20px 12px 20px;
  transition: background-color 0.8s, color 0.8s;
}

.submenu-item:hover {
  background-color: #181f3a;
  color: #ffffff !important;
}

语言选择菜单（单独的HTML小部件） #

这个菜单的作用是向URL添加?lang=en/de/fr参数，切换网站语言：

<div class="lang_menu">
  <div class="lang-dropdown">
    <a href="#" class="lang-menu-item">Lang</a>
    <div class="lang_submenu">
      <a href="?lang=en" class="submenu-item">EN</a>
      <a href="?lang=de" class="submenu-item">DE</a>
      <a href="?lang=fr" class="submenu-item">FR</a>
    </div>
  </div>
</div>

语言菜单样式CSS（可按需调整） #

.lang_menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 16px;
  height: 40px !important;
  transition: background-color 0.8s, color 0.8s;
}

.lang-menu-item {
  padding: 12px 20px 12px 20px;
  color: #6e7384 !important;
  position: relative;
}

.lang-menu-item:hover {
  padding: 12px 20px 12px 20px;
  color: #ffffff !important;
  transition: background-color 0.8s, color 0.8s;
}

.lang-dropdown {
  position: relative;
}

.lang_submenu {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #212b4d !important;
  width: 60px !important;
  text-align: center;
}

.lang-dropdown:hover .lang_submenu {
  display: block;
}

.submenu-item {
  display: block;
  color: #6e7384 !important;
  padding: 10px 15px 10px 15px;
  transition: background-color 0.8s, color 0.8s;
}

.submenu-item:hover {
  background-color: #181f3a;
  color: #ffffff !important;
}

WordPress自定义语言插件（language.php） #

将以下代码放到WordPress插件目录的独立文件夹中，它会从URL获取语言参数，并通过短代码加载对应语言文件的内容：

<?php
    
    /*
    Plugin Name:    My Language Plugin
    Description:    通过网站下拉菜单选择语言，自动切换网站内容的显示语言
    Version:        1.0
    Author:         My Name
    Example:        [my_constant name="Title"] 对应 define("Title","This is the displayed title!");
    */
    
    // 启动会话
    session_start();
    
    if (!defined('ABSPATH')) {
        exit;
    }
    
    // 获取语言文件夹的完整路径
    define('LANGUAGE_FOLDER', __DIR__ . '/');
    
    function constant_shortcode($atts) {
        $atts = shortcode_atts(array(
            'name' => '',
        ), $atts);
    
        $constant_name = $atts['name'];
        
        // 从URL参数获取选中的语言，默认 fallback 为英语
        $_SESSION['selected_language'] = isset($_GET['lang']) ? $_GET['lang'] : 'en';
            
        $language_file = LANGUAGE_FOLDER . 'language_' . $_SESSION['selected_language'] . '.php';
            
        if (!file_exists($language_file)) {
            $language_file = LANGUAGE_FOLDER . 'language_en.php';
        }
    
        include_once($language_file);
    
        if (defined($constant_name)) {
            return constant($constant_name);
        } else {
            return '';
        }
    }
    
    add_shortcode('my_constant', 'constant_shortcode');
    
?>

语言文件示例 #

在上述插件文件夹中，为每种语言创建单独的PHP文件，比如language_en.php、language_de.php、language_fr.php：

英语语言文件（language_en.php） #

<?php
        define("Title","This is the displayed title!");
?>

德语语言文件（language_de.php） #

<?php
        define("Title","Dies ist der angezeigte Titel!");
?>

使用短代码[my_constant name="Title"]时，会根据当前选中的语言显示对应内容：英语显示“This is the displayed title!”，德语显示“Dies ist der angezeigte Titel!”，以此类推。

内容的提问来源于stack exchange，提问作者Silverhawk