如何將 static HTML5 導航菜單轉換為 wordpress 動態菜單

Question

如何將 static HTML5 導航菜單轉換為 WordPress 動態菜單。 我想 output 這個 HTML 菜單在 WordPress 中。我不知道如何以這種形式制作 ul 和 li。 謝謝你的幫助。 這是我的 HTML5 導航菜單

    <ul class="nav topnav">
        <li class="dropdown active">
            <a href="index.html"><i class="icon-home"></i> Home <i class="icon-angle-down"></i></a>
            <ul class="dropdown-menu">
                <li><a href="index-alt2.html">Homepage 2</a></li>
                <li><a href="index-alt3.html">Homepage 3</a></li>
                <li><a href="index-alt4.html">Parallax slider</a></li>
                <li><a href="index-landingpage.html">Landing page</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">Features <i class="icon-angle-down"></i></a>
            <ul class="dropdown-menu">
                <li><a href="typography.html">Typography</a></li>
                <li><a href="components.html">Components</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="icon-variations.html">Icon variations</a></li>
                <li class="dropdown"><a href="#">3rd menus<i class="icon-angle-right"></i></a>
                    <ul class="dropdown-menu sub-menu-level1">
                        <li><a href="index.html">Sub menu</a></li>
                        <li><a href="index.html">Sub menu</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">Pages <i class="icon-angle-down"></i></a>
            <ul class="dropdown-menu">
                <li><a href="about.html">About us</a></li>
                <li><a href="faq.html">FAQ</a></li>
                <li><a href="team.html">Team</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="pricingbox.html">Pricing boxes</a></li>
                <li><a href="404.html">404</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">Portfolio <i class="icon-angle-down"></i></a>
            <ul class="dropdown-menu">
                <li><a href="portfolio-2cols.html">Portfolio 2 columns</a></li>
                <li><a href="portfolio-3cols.html">Portfolio 3 columns</a></li>
                <li><a href="portfolio-4cols.html">Portfolio 4 columns</a></li>
                <li><a href="portfolio-detail.html">Portfolio detail</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#">Blog <i class="icon-angle-down"></i></a>
            <ul class="dropdown-menu">
                <li><a href="blog-left-sidebar.html">Blog left sidebar</a></li>
                <li><a href="blog-right-sidebar.html">Blog right sidebar</a></li>
                <li><a href="blog-fullwidth.html">Blog fullwidth</a></li>
                <li><a href="post-left-sidebar.html">Post left sidebar</a></li>
                <li><a href="post-right-sidebar.html">Post right sidebar</a></li>
            </ul>
        </li>
        <li>
            <a href="contact.html">Contact </a>
        </li>
    </ul>
</nav> 

我想將其轉換為 WordPress 菜單

wp_nav_menu()

我怎樣才能制作這個自定義菜單？ 我不想使用任何插件來制作自定義菜單。

Answer 1

首先，您需要在functions.php中注冊導航菜單，如下所示：

function register_menu(){
    register_nav_menu('main-menu', 'Main menu');
}
add_action('init', 'register_menu');

執行此操作時，新選項將出現在您的管理面板中。 Go 到外觀 > 菜單並開始在菜單中添加鏈接、頁面或任何您想要的內容。 您也可以指定深度。 完成菜單后，菜單的 select 位置，在這種情況下將是您新創建的“主菜單”。 現在您想在代碼編輯器中將 go 返回到您的頁面模板以顯示該菜單。 使用wp_nav_menu() function 來顯示如此復雜的菜單非常困難，因此我們將使用不同的方法。 我們將抓取菜單項開始：

$menuLocation = get_nav_menu_locations();
$mainMenuID = $menuLocation['main-menu'];
$topMenuItems = wp_get_nav_menu_items($mainMenuID);

現在是主要部分。 我們正在遍歷菜單項並結合自定義 html 元素顯示其數據：

<?php

$menuLocation = get_nav_menu_locations();
$mainMenuID = $menuLocation['main-menu'];
$topMenuItems = wp_get_nav_menu_items($mainMenuID);
                        
                // check if menu has items
                if(!empty($topMenuItems)){
                            ?>
                     <ul>
                        <?php
                                
                          foreach ($topMenuItems as $topMenuItem){
                                     //Check if menu_item_parent property is set to 0. 
                                      That means that menu item is top level item.

                                     if($topMenuItem->menu_item_parent == 0){
                                         
                              $topItemID = $topMenuItem->ID;
                              $submenuItems = array();

                              //check if there are submenu items for current top menu 
                              item.
                              foreach ($topMenuItems as $submenuItem){
                                             
                              if($submenuItem->menu_item_parent == $topItemID){
                                                 $submenuItems[] = $submenuItem;
                                             }
                                         }
  
                                        ?>
                                         <li>
<a href="<?php echo $topMenuItem->url ?>"><?php echo $topMenuItem->title ?> </a>
                                                    
                                            <?php
                                   // If there are submenu items for current item, display 
                                    them.
                                            if(!empty($submenuItems)){
                                                ?>
                                            <ul class="submenu">
                                                <?php
                                                    foreach ($submenuItems as $subitem){
                                                        ?>
                                                <li>
 <a  href="<?php echo $subitem->url ?>"><?php echo $subitem->title ?></a>
                                                </li>
                                                    <?php
                                                        
                                                    }
                                                ?>
                                            </ul>
                                                <?php
                                            }
                                            ?>
                                         </li>
                                        <?php  
                                     }    
                                 }
                                ?>
                            </ul>
                               
                            <?php
                            }
      
                        ?>
// Using this logic, you can go in depth how much you want to.