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

Question

I have html website template which I am trying to convert into wordpress theme. Everything is going fine, but now I ran into a problem. I am trying to create a navbar menu. It isn't hard task if menu is simple, but this particular one is hard to accomplish for me.

The html of this navbar menu is follwing:

<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>

Which i tried to do:

<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>

Then I changed the css too and gave .site-menu the properties which previously belonged to .art-menu, but it did not work, my menu does not look like it needs to. There are so many wrappers around this menu and css of this menu is very very long. So everything is very confusing for me as I am a beginner. How should I format my code to create a menu which looks like the one in html? If someone wants to see the css file, then I will send it. Also if someone needs more information for answering, I will send it.

Answer 1

The menu's css declarations probably include outer wrapping elements. Just changing one inner menu wrapper is not enough, you'd have to comb through the entire css to see what else you need to copy.

A simpler solution would be to keep the html template's classes intact and modify the wp_nav_menu arguments.

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

wp_nav_menu( $menu_args );

For more details, check out the documentation: http://codex.wordpress.org/Function_Reference/wp_nav_menu

Answer 2

You must use Wordpress menu walker. For example:

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
        );
    }

}

And details in here: http://codex.wordpress.org/Class_Reference/Walker