网站中使用导航栏是为了让访客能够清晰明了地找到网站相应的板块内容。

网站建设中导航栏是非常常见并且有效的。

1.先引入导航栏功能

在主题文件夹中创建一个functions.php的文件

然后在开头添加如下代码:

<?php
function register_my_menus() {
 register_nav_menus(
 array( 'header-menu' => __( 'Header Menu' ) )
 );
 }
add_action( 'init', 'register_my_menus' );
?>

2.在主题的头部文件里添加导航栏

案例中已存在导航栏功能,那么我们

打开header.php,找到如下代码:

<nav id="mainNav" class="grd-vt-tertiary shdw-centered">
 <h2 class="screen-reader-text">Main Navigation:</h2>
 <ul class="sfTab">
 <li class="current_page_item"><a href="#">The Zine</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Resources</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</nav><!--//top_navlist-->

然后修改为:

<nav id="mainNav" class="grd-vt-tertiary shdw-centered">
 <h2 class="screen-reader-text">Main Navigation:</h2>
 <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 
'container_class' => 'sfTab' ) ); ?>
</nav><!--//top_navlist-->

保存然后在浏览器刷新

修改前效果图

修改后

修改后导航栏显示所有文章

 

修改导航栏-添加菜单

在导航栏里添加菜单可以存放更多的链接或者我们需要的的东西

在后台仪表盘—->appearance—->menus—->create a new menu

为菜单栏添加页面

显示效果

为菜单栏添加一个自定义链接

在后台仪表盘—->appearance—->menus—->custom links

显示效果

 

专业网站开发网页设计公司

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

wechat logo