Question

我有html网站模板，我试图将其转换为wordpress主题。一切都很顺利，但现在我遇到了问题。我正在尝试创建一个导航栏菜单。如果菜单很简单，这不是一项艰巨的任务，但对我来说这个特别难以实现。

此导航栏菜单的html如下：

<div class="art-nav">
    <div class="art-nav-l"></div>
    <div class="art-nav-r"></div>
<div class="art-nav-outer">
<div class="art-nav-wrapper">
<div class="art-nav-inner">
    <ul class="art-hmenu">
        <li>
            <a href="./new-page.html" class="active"><span class="l"></span><span class="r"></span><span class="t">New Page</span></a>
        </li>   
        <li>
            <a href="./new-page-2.html"><span class="l"></span><span class="r"></span><span class="t">New Page 2</span></a>
        </li>   
    </ul>


</div>
</div>
</div>
</div>

我试图这样做：

<div class="art-nav">
    <div class="art-nav-l"></div>
    <div class="art-nav-r"></div>
<div class="art-nav-outer">
<div class="art-nav-wrapper">
<div class="art-nav-inner">
    <nav class="site-menu">
        <?php wp_nav_menu(); ?>
    </nav>


</div>
</div>
</div>
</div>

然后我也改变了css并给了.site-menu以前属于.art-menu的属性，但它没有用，我的菜单看起来不像它需要。这个菜单周围有很多包装器，这个菜单的css非常长。所以一切都让我很困惑，因为我是初学者。我应该如何格式化我的代码来创建一个看起来像html中的菜单？如果有人想看到css文件，那么我会发送它。此外，如果有人需要更多信息进行回答，我会发送。

Answer 1

菜单的css声明可能包含外包装元素。只更改一个内部菜单包装是不够的，你必须梳理整个CSS以查看你需要复制的其他内容。

更简单的解决方案是保持html模板的类不变并修改wp_nav_menu参数。

$menu_args = array(
    'container'       => false,
    'menu_class'      => 'art-hmenu',
);

wp_nav_menu( $menu_args );

有关详细信息，请查看文档：{{3}}

Answer 2

您必须使用Wordpress菜单walker。例如：

class Walker_Quickstart_Menu extends Walker {

    // Tell Walker where to inherit it's parent and id values
    var $db_fields = array(
        'parent' => 'menu_item_parent', 
        'id'     => 'db_id' 
    );

    /**
     * At the start of each element, output a <li> and <a> tag structure.
     * 
     * Note: Menu objects include url and title properties, so we will use those.
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $output .= sprintf( "\n<li><a href='%s'%s>%s</a></li>\n",
            $item->url,
            ( $item->object_id === get_the_ID() ) ? ' class="current"' : '',
            $item->title
        );
    }

}

详情请点击此处：http://codex.wordpress.org/Class_Reference/Walker

如何从html模板创建这个wordpress导航栏菜单？

2 个答案: