如何從html模板創建此wordpress導航欄菜單？

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

有關更多詳細信息，請查看文檔： http : //codex.wordpress.org/Function_Reference/wp_nav_menu

Answer 2

您必須使用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