Question

所以我一直在为网站使用HTML模板，并添加了Wordpress功能。但是，我在Header.php中的导航只是使用get_permalink进行页面链接。我想保留相同的导航菜单及其所有功能，但允许在仪表板中添加页面。

目前的代码如下：

    <!-- Overlay Navigation Menu -->
<div class="overlay-navigation-wrapper enter-bottom" data-no-scrollbar data-animation="slide-in">
    <div class="overlay-navigation-scroll-pane">
        <div class="overlay-navigation-inner">
            <div class="v-align-middle">
                <div class="overlay-navigation-header row collapse full-width">
                    <div class="column width-12">
                        <div class="navigation-hide overlay-nav-hide">
                            <a href="#"> <span class="icon-cancel"></span> </a>
                        </div>
                    </div>
                </div>
                <div class="row collapse full-width">
                    <div class="column width-12">
                        <nav class="overlay-navigation nav-block">
                            <h4 class="menu-title">Website Title</h4>
                            <ul>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>">Home</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'About' ) ) ?>">About</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Services' ) ) ?>">Treatments &amp; Offers</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Shop' ) ) ?>">Store</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Contact' ) ) ?>">Contact</a> </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Overlay Navigation Menu End -->
<div class="wrapper reveal-side-navigation">
    <div class="wrapper-inner">
        <!-- Header -->
        <header class="header header-bottom header-fixed-on-mobile header-transparent" data-sticky-threshold="window-height" data-bkg-threshold="100">
            <div class="header-inner">
                <div class="row nav-bar">
                    <div class="column width-12 nav-bar-inner">
                        <div class="logo">
                            <div class="logo-inner"> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>"><img src="" alt="Sartre Logo" /></a> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>"><img src="" alt="Sartre Logo" /></a> </div>
                        </div>
                        <nav class="navigation nav-block secondary-navigation nav-right">
                            <ul>
                                <li>
                                    <!-- Button -->
                                    <div class="v-align-middle"> <a href="<?php echo get_permalink( get_page_by_path( 'Contact' ) ) ?>" class="button small text-uppercase pull-right no-margin-bottom">Book Now </span></a> </div>
                                </li>
                                <li class="aux-navigation hide">
                                    <!-- Aux Navigation -->
                                    <a href="#" class="navigation-show overlay-nav-show nav-icon"> <span class="icon-menu"></span> </a>
                                </li>
                            </ul>
                        </nav>
                        <nav class="navigation nav-block primary-navigation nav-center">
                            <ul>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Home' ) ) ?>">Home</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'About' ) ) ?>">About</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Services' ) ) ?>">Treatments &amp; Offers</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Shop' ) ) ?>">Store</a> </li>
                                <li> <a href="<?php echo get_permalink( get_page_by_path( 'Contact' ) ) ?>">Contact</a> </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
        <!-- Header End -->
        <!-- MAIN CONTENT GOES HERE-->
    </div>
</div>

代码相当臃肿，但允许移动响应和主题附带的其他Javascript效果。

最好的方法是什么？感谢

Answer 1

步骤1：在functions.php中注册导航菜单

<?php
function my_wp_nav_menu(){
    register_nav_menus( array(
        'primary' => 'Main Navigation'
    ) );
}
add_action( 'after_setup_theme', 'my_wp_nav_menu' );

步骤2：进入仪表板中的外观 - ＆gt;菜单，添加导航项，然后选择主导航作为菜单。

第3步：将HTML中导航的ul替换为：

<?php
wp_nav_menu( array(
    'container' => '',
    'theme_location' => 'primary'
) );

这将使用您可以在WordPress中控制的WordPress菜单替换您的列表。默认情况下，wp_nav_menu使用div包装菜单列表，这就是我们设置'container' => ''的原因所以您只需要菜单列表标记。

如何从现有的HTML模板代码创建Wordpress菜单？

1 个答案: