因此,我一直在为网站使用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 & 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 & 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效果。
解决此问题的最佳方法是什么?谢谢
步骤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:进入控制面板中的外观->菜单,添加导航项,然后选择主导航作为菜单。
第3步:将ul
HTML中的导航替换为:
<?php
wp_nav_menu( array(
'container' => '',
'theme_location' => 'primary'
) );
这将用可以在WordPress中控制的WordPress菜单替换您的列表。默认情况下,用来wp_nav_menu
包装菜单列表,div
这就是我们设置菜单的原因,'container' => ''
因此,您获得的只是菜单列表标记。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句