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


How to create this wordpress navbar menu from html template?

我有一个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,并将以前属于.art菜单的属性赋予了.site菜单,但它不起作用,我的菜单看起来不需要。这个菜单周围有很多包装,这个菜单的css非常长。所以,作为一个初学者,一切都让我感到困惑。我应该如何格式化我的代码来创建一个看起来像html中的菜单?如果有人想看css文件,那么我会发送它。如果有人需要更多信息来回答,我会发送。

菜单的css声明可能包括外包装元素。仅仅更改一个内部菜单包装是不够的,您必须梳理整个css,看看还需要复制什么。

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

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

有关更多详细信息,请查看文档:http://codex.wordpress.org/Function_Reference/wp_nav_menu

您必须使用Wordpress菜单助行器。例如:

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