利用polylang多语言插件自定义调用到导航任意位置实操教程-FUNION数字营销

大家好，我是Funion数字营销实战派飞小优，最近在搭建官网英文站点，在搭建过程中由于需要对多语言菜单进行自定义位置输出调用，因此官方出一篇实操教程教大家如何快速实现该功能，先看看前端具体展示如下：

为什么要自定义进行调用？

很简单，由于官方的样式太丑，而且一般是固定输出在导航菜单上，很少有在导航右侧的，另一方面主要是基于站点的样式进行美化协调，因此考虑到该需求所以我进行二次优化，如默认在主菜单中的调用切换器：

如何实现这一功能？

主要是需要解决3个文件，header.php,新增两个js和css文件，然后引入到functions.php中。

具体步骤如下：

Header.php文件修改

找到你的header.php文件，然后更新代码如下

<!-- 语言切换器（下拉菜单样式） -->
                <?php if (function_exists('pll_the_languages')) { ?>
                    <div class="language-switcher">
                        <a href="#" class="current-language">
                            <?php echo pll_current_language('name'); ?> <!-- 显示当前语言 -->
                            <i class="dropdown-icon"></i> <!-- 下拉菜单图标 -->
                        </a>
                        <ul class="language-menu">
                            <?php
                            // 调用 Polylang 的语言切换器
                            pll_the_languages(array(
                                'show_flags'          => 0,  // 不显示国旗
                                'show_names'          => 1,  // 显示语言名称
                                'dropdown'            => 0,  // 不使用默认下拉菜单
                                'hide_if_empty'       => 0,  // 显示空语言项
                                'hide_if_no_translation' => 0,  // 显示没有翻译的语言
                                'echo'                => 1   // 直接输出
                            ));
                            ?>
                        </ul>
                    </div>
                <?php } ?>

上述的数字可以按需求进行修改。

新增js和css两个自定义文件

新增两个自定义文件然后封装到指定位置，由于采用的是子站点搭建，所以你最好是新建下目录然后封装到目录下，代码文件以此为：

// 语言切换器下拉菜单功能
const languageSwitcher = document.querySelector('.language-switcher');

if (languageSwitcher) {
    // 鼠标移入时显示下拉菜单
    languageSwitcher.addEventListener('mouseenter', function() {
        const languageMenu = languageSwitcher.querySelector('.language-menu');
        if (languageMenu) {
            languageMenu.style.display = 'block';
        }
    });

    // 鼠标移出时隐藏下拉菜单
    languageSwitcher.addEventListener('mouseleave', function() {
        const languageMenu = languageSwitcher.querySelector('.language-menu');
        if (languageMenu) {
            languageMenu.style.display = 'none';
        }
    });
}

然后就是自定义css代码如下：

/* 语言切换器容器 */
.language-switcher {
    position: relative;
    display: inline-block;
    font-size: 16px;
}

/* 当前语言链接 */
.language-switcher .current-language {
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* 下拉菜单图标 */
.language-switcher .current-language .dropdown-icon {
    display: inline-block;
    margin-left: 5px;
    width: 8px;
    height: 8px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}

/* 鼠标移入时旋转图标 */
.language-switcher:hover .current-language .dropdown-icon {
    transform: rotate(135deg);
}

/* 语言菜单 */
.language-switcher .language-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    min-width: 150px;
}

/* 鼠标移入时显示菜单 */
.language-switcher:hover .language-menu {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* 语言菜单项 */
.language-switcher .language-menu li {
    padding: 0;
}

/* 语言菜单链接 */
.language-switcher .language-menu li a {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
    transition: background 0.3s ease;
}

/* 鼠标移入菜单项 */
.language-switcher .language-menu li a:hover {
    background: #f5f5f5;
    color: #000;
}

/* 动画效果：淡入 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}/*end-lang*/

/* Call-to-Action 按钮样式 */
.call-to-action .free-diagnosis-button {
    display: inline-block;
    background-color: #014dff;
    color: #ffffff;
    font-size: 16px;
    padding: 7px 14px;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    margin-top: -10px;
}

/* 鼠标悬停效果 */
.call-to-action .free-diagnosis-button:hover {
    background-color: #003bcc; 
}

引入到functions.php代码

引入代码如下：

function funionchild_enqueue_parent_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'funionchild_enqueue_parent_styles');
function funionchild_enqueue_language_switcher_style() {
    wp_enqueue_style('language-switcher', get_stylesheet_directory_uri() . '/你的文件夹名称/language-switcher.css', array(), '1.0');
}
add_action('wp_enqueue_scripts', 'funionchild_enqueue_language_switcher_style');

按照上述3个步骤操作，你将会实现具体的下来菜单展示效果，以上就是关于如何自定义调用polylang多语言菜单实操教程，更多建站需求请联系我们！