WordPress菜单字体和颜色自定义指南

在WordPress网站设计中，菜单的字体和颜色直接影响用户体验和整体视觉效果。通过简单的设置，您可以轻松调整菜单样式，使其更符合品牌风格或设计需求。以下是详细的修改方法。

一、修改菜单字体

方法1：使用主题自定义选项

许多WordPress主题（如Astra、OceanWP等）内置了菜单字体设置功能：

1. 进入 外观 > 自定义
2. 找到 菜单 或 排版 选项
3. 选择目标菜单（主菜单/页脚菜单等）
4. 调整字体家族、大小、粗细等参数

方法2：通过CSS代码自定义

若主题不支持直接修改，可在 外观 > 自定义 > 额外CSS 中添加代码：

/* 修改主菜单字体 */
.main-navigation a {
font-family: "Microsoft YaHei", sans-serif;
font-size: 16px;
font-weight: 600;
}

二、调整菜单颜色

1. 常规颜色设置

通过主题编辑器（如Elementor、Divi）或WordPress原生自定义器：

• 文字颜色：通常标注为“菜单链接颜色”
• 悬停颜色：控制鼠标悬停效果
• 背景色：适用于下拉菜单或通栏菜单

2. CSS进阶样式示例

/* 修改菜单项默认颜色 */
.main-menu li a {
color: #333333;
}

/* 修改悬停及选中状态颜色 */
.main-menu li a:hover,
.main-menu li.current-menu-item a {
color: #ff5722;
}

/* 下拉菜单背景色 */
.sub-menu {
background-color: #f8f9fa;
}

三、实用建议

1. 保持对比度：文字与背景色需符合WCAG可访问性标准
2. 移动端适配：使用媒体查询确保小屏幕显示正常
3. 缓存问题：修改后按Ctrl+F5强制刷新浏览器

通过以上方法，您无需编写复杂代码即可实现专业级的菜单样式优化。如需更精细控制，推荐安装插件如 Menu Icons 或 CSS Hero 进行可视化编辑。