Divi主题导航栏右侧添加图标区域及心愿单图标链接问题求助

嘿，我来帮你搞定这两个Divi主题的问题！针对你的需求，我整理了最实用的解决方案，分两部分来说：

我推荐两种方法，你可以根据自己的技术能力和需求选择：

方法1：用Divi自带功能（无代码，新手友好） #

这是最简单的方式，完全不需要写代码：

• 先去WordPress后台的「外观」→「菜单」，新建一个菜单（比如叫「右侧图标菜单」），只添加购物篮、搜索、心愿单这三个菜单项：
  • 购物篮：如果用WooCommerce，直接在「屏幕选项」里勾选「购物车」，就能添加对应的菜单项
  • 搜索：可以添加一个自定义链接，地址填#，后面再用CSS或JS实现点击弹出搜索框；或者用Divi的搜索模块（需要结合布局调整）
  • 心愿单：添加对应的心愿单页面链接
• 打开「外观」→「自定义」进入Divi定制器，找到「导航栏」→「主导航栏布局」，把「主菜单布局」改成「左侧菜单，右侧模块」
• 接着在「导航栏」→「右侧模块」里选择「菜单」，并选中你刚创建的「右侧图标菜单」
• 最后在定制器里调整这个菜单的样式：比如去掉菜单项文字（把菜单标题留空，只保留图标代码）、调整图标大小、间距、颜色等

方法2：子主题代码定制（更灵活，适合有基础的用户） #

如果需要更个性化的布局，比如自定义图标触发的行为，可以用子主题代码实现：

1. 确保你已经启用了Divi子主题（避免主题更新丢失修改）
2. 打开子主题的functions.php文件，添加以下代码来插入图标区域：

// 在导航栏右侧添加自定义图标区域
function divi_right_nav_icons() {
    ?>
    <div class="custom-right-nav-icons">
        <!-- WooCommerce购物篮图标，自动获取购物篮链接 -->
        <a href="<?php echo wc_get_cart_url(); ?>" class="nav-cart-icon">
            <i class="fas fa-shopping-cart"></i>
        </a>
        <!-- 搜索图标，可搭配Divi默认搜索弹窗 -->
        <a href="#" class="nav-search-icon" onclick="et_pb_toggle_search(); return false;">
            <i class="fas fa-search"></i>
        </a>
        <!-- 心愿单图标，替换成你的心愿单页面URL -->
        <a href="https://你的网站.com/wishlist/" class="nav-wishlist-icon">
            <i class="fas fa-heart"></i>
        </a>
    </div>
    <?php
}
// 把图标区域添加到导航栏的合适位置
add_action('et_header_top', 'divi_right_nav_icons', 15);

3. 再在子主题的style.css里添加样式，调整图标位置和外观：

.custom-right-nav-icons {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-left: auto;
    padding-right: 20px;
}
.custom-right-nav-icons a {
    color: #333; /* 替换成你想要的图标颜色 */
    font-size: 22px; /* 调整图标大小 */
    transition: color 0.3s ease;
}
.custom-right-nav-icons a:hover {
    color: #ff6600; /* 替换成你的悬停颜色 */
}

你遇到的图标不显示问题，大概率是这几个原因，逐一排查：

1. 确认Font Awesome正确加载 #

先检查插件是否正常工作：

• 打开网站前端，右键→「检查」，切换到「网络」标签，搜索font-awesome，看看有没有对应的CSS文件成功加载
• 如果没加载，先确认Font Awesome插件已经激活，或者换用官方的「Font Awesome」插件（更稳定）

2. 让Divi允许菜单标签里的HTML #

Divi默认会过滤菜单中的HTML代码，你需要添加代码解除限制：
在子主题的functions.php里加入这段代码：

// 允许菜单标签使用HTML代码
function allow_html_menu_labels($items, $args) {
    foreach ($items as $item) {
        $item->title = html_entity_decode($item->title);
    }
    return $items;
}
add_filter('wp_nav_menu_objects', 'allow_html_menu_labels', 10, 2);

然后回到「外观」→「菜单」，把心愿单的标签改成<i class="fas fa-heart"></i>，保存后刷新页面试试

3. 检查图标类名是否匹配Font Awesome版本 #

如果你用的是Font Awesome 6，类名已经从fas改成了fa-solid，所以把代码改成：

<i class="fa-solid fa-heart"></i>

就能正常显示了

4. 清除缓存 #

最后别忘了清除WordPress缓存、浏览器缓存，或者CDN缓存，有时候缓存会导致图标无法及时显示

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