侧边栏中的自定义 wp_nav_menu

Question

您好，我正在使用一个设置了自定义 wp_nav_menu 的 wordpress 主题，但是我想进一步自定义它。但我不知道该怎么做。

主题有一个菜单功能：

function litho_default_wp_menu()
{
    $args = array(
    'sort_column' => 'menu_order, post_title',
    'menu_class'  => 'menu',
    'include'     => '',
    'exclude'     => '',
    'echo'        => false,
    'show_home'   => false,
    'link_before' => '',
    'link_after'  => '' );

    $menu = wp_page_menu( $args );
    $menu = preg_replace('/^(<div class\="menu"><ul>)/i','',$menu);
    $menu = preg_replace('/(<\/ul><\/div>)$/i','',$menu);

    echo '<ul class="simple-nav">'.$menu.'</ul>';
}

这会输出一个菜单，其代码如下所示：

<div class="row" id="main_menu">
    <div class="columns six">
        <nav role="navigation">
            <ul class="simple-nav">
                <li class="page_item page-item-15 current_page_item"><a href="http://192.168.0.16:8888/">HOME</a></li>
                <li class="page_item page-item-38"><a href="http://192.168.0.16:8888/directing/">DIRECTING</a></li>
                <li class="page_item page-item-40"><a href="http://192.168.0.16:8888/compositing/">COMPOSITING</a></li>
            </ul>
        </nav>
    </div>
</div>

但是，我将 Isotope 用于我的主题，它过滤和排序页面内容，而不是转到另一个页面。并希望我的菜单如下所示：

<div class="row" id="main_menu">
    <div class="columns six">
        <nav role="navigation">
            <ul id="filters">
                <li><a href="#" class="all" data-filter="*">show all</a></li>
                <li><a href="#" class="directing" data-filter=".directing">directing</a></li>
                <li><a href="#" class="compositing" data-filter=".compositing">compositing</a></li>
            </ul>
        </nav>
    </div>
</div>

我该怎么做呢？我现在正在阅读有关 wp_nav_menu 以及如何自定义它的信息，但我想我也会在这里问。

谢谢

Answer 1

您可以创建自定义菜单。自定义菜单可使用 wordpress 管理功能进行编辑，因此您可以按您想要的任何顺序放置它们，添加外部链接或指向您在 wordpress 中的任何帖子/分类法的链接。文档在这里：https://codex.wordpress.org/Navigation_Menus

不过，只需将以下代码添加到插件或您的 functions.php 文件中即可：

function register_my_menus() {
 register_nav_menus(
   array(
    'custom-menu' => __('Custom Navigation Menu')
   )
 );
}
add_action( 'init', 'register_my_menus' );

接下来，您必须在 wordpress admin 中创建菜单，导航至：外观 > 菜单 > 创建新菜单（在页面顶部）。

为菜单命名，然后在其下方，将有带有由您的插件/主题指定的自定义菜单 ID 的复选框。这些被称为主题位置。您可以选中自定义菜单名称旁边的框 - 在本例中为“custom-menu”。

然后，您可以执行以下任一操作：

1. 在模板中添加代码以打印出导航。

   wp_nav_menu( array( 'theme_location' => 'custom-menu' ) ); 
   

2. 使用您创建的菜单将自定义菜单小部件添加到侧边栏。

最后，您可以使用 css 设置小部件的样式。

希望对您有所帮助。