邊欄中的自定義wp_nav_menu

Question

您好，我使用的Wordpress主題具有自定義的wp_nav_menu設置，但是我想進一步自定義此主題。 但是我不確定該怎么做。

主題具有菜單功能：

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>

但是，我將同位素用於主題，該主題對頁面內容進行過濾和排序，而不是轉到另一頁面。 並希望我的菜單顯示如下：

<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。這些被稱為主題位置。 您可以選中自定義菜單名稱旁邊的框，在本例中為“自定義菜單”。

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

1. 將代碼添加到模板以打印出導航。

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

2. 使用您創建的菜單將自定義菜單小部件添加到側欄。

最后，您可以使用CSS設置小部件的樣式。

希望能有所幫助。