如何在WordPress中创建自定义菜单

好的，请看：

1. 咱们先唠唠这个事儿啊。WordPress它自己带的菜单功能其实挺够用了，但你有没有觉得，有时候就想在某个奇怪的地方，比如文章中间，或者页脚的一个小角落，塞一个特别的链接列表？默认功能搞不定对吧？这时候就得自己动手“捏”一个自定义菜单了。

2. 别怕，这事儿没想象中那么复杂。首先啊，我们得去跟主题“打个招呼”，告诉它：“喂，老兄，我准备要开辟一块新地盘来放菜单了，你给我预留个位置。” 这个招呼就是用代码打的，一般我们会把它写在 functions.php 文件里。就像这样：

function my_cool_theme_setup() {
    register_nav_menus( array(
        'my-custom-menu' => __( '我的神奇自定义菜单', 'my-textdomain' ),
    ) );
}
add_action( 'after_setup_theme', 'my_cool_theme_setup' );

看这段代码，my-custom-menu 就是这个位置的“代号”，后面那个‘我的神奇自定义菜单’是它在后台看起来的名字，这样你就知道哪个是哪个了。

3. 位置注册好了，但它现在还是个空位，啥也没有。下一步就是把这个空位，在你想要它出现的地方，“召唤”出来。比如你想让它出现在网站底部，那你可能就得去编辑 footer.php 这个模板文件。在合适的位置，写上“召唤咒语”：

<?php
wp_nav_menu( array(
    'theme_location' => 'my-custom-menu',
    'menu_class'     => 'my-custom-menu-class',
) );
?>

这个 theme_location 必须和上一步注册的那个‘代号’对上，不然系统就懵了，不知道你要叫哪个菜单出来。menu_class 是给你接下来用CSS给它打扮打扮准备的。

4. 好啦，代码层面搞定了。现在你喘口气，去WordPress后台刷新一下看看。外观 > 菜单 页面里，是不是多了一个选项让你选择“显示位置”？把你新建的那个“我的神奇自定义菜单”打上勾，然后保存菜单。这下逻辑就通了——后台创建内容，代码定义位置，前后端一关联，齐活。

5. 最后，如果你觉得它长得太随便了，就用CSS给它“整容”。因为前面我们给了它一个独特的类名 my-custom-menu-class，所以就可以精准地给它化妆了。

.my-custom-menu-class {
    list-style: none; /* 去掉难看的列表小黑点 */
    padding: 0;
    display: flex; /* 让菜单项横着排开 */
}

.my-custom-menu-class li a {
    color: #salmon; /* 链接颜色变成三文鱼色 */
    padding: 5px 10px;
    text-decoration: none;
}

.my-custom-menu-class li a:hover {
    background-color: #f0f0f0; /* 鼠标放上去有个背景色 */
}

这样一套组合拳下来，一个完全听你指挥的自定义菜单就诞生了。它不在常规的导航区，而是在你指定的任何地方，样子也由你说了算。本质上就是注册、调用、美化这三步曲，多试几次就熟了，跟玩一样。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。