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

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

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

显示效果

 

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

深度阅读:

WordPress主题制作教程2.6-WordPress的条件标签(一) 很多WordPress新手不懂如何根据当前页面匹配的条件,在模板文件中使用条件标签来更改内容的显示。条件标签通常使用if else条件语句。改代码首先检查语句的真假,如果发现语句为真,则执行第一组代码,如果语句假的,则跳过第一组代码,直接执行第二组代码例如,下面这段代码:&n...
wordpress主题制作开发实战教程3.10 – 新建Footer.php文件 新建Header.php文件 我们使用与sidebar和header相同的步骤创建footer的页面模板1.在主题模板中创建一个Footer.php文件2.打开你的Index.php文件,剪切你的footer文件,该文件通常位于
标签中至
如何处理wordpress中JavaScript文件冲突问题 在编写WordPress主题中,如果第三方提供的HTML/JS/CSS文章中,包含了很多.js文件,在引入这些JavaScript文件过程中会这样那样的错误,比如什么“$ is not a function”之类的,这时候可以通过以下方式来一一排查。 1.正确在functi...
wordpress主题制作开发实战教程3.11 – 插件回调与模板创建 1.插件回调 Wordpress插件利用自定制主题API执行插件中的许多命令,为了确保我们的代码适应各种插件,我们需要在header.php 和 footer.php文件中插入以下代码。在header.php文件中, 标签上方插入以下代码:
wordpress主题制作开发实战教程3.1(2)- 主题制作基本流程及一些小功能 在学习了上一节的WordPress主题基础之后,在本章节我们将学习主题制作的基本流程以及一些小功能。基本流程:1.创建主题文件夹2.创建主题模板文件3.模板文件引入css小功能:显示作者,时间,评论数量等 主题制作基本流程 创建一个主题,首先我们需要的是一...
WordPress主题制作开发实战教程4.4- 图片功能 有时我们需要在文章中添加一些图片,让我们更好的理解,并且使得文章更美观,所以在主题中添加图片功能也是必须的添加图片功能 首先我们需要添加图片功能,然后才能使用。打开function.php文件在php结束标签?>之前添加如下代码: add_theme_sup...
wordpress的网站设置与插件及主题之间的联系 许多wordpress站长在开发网站的初期会使用多个主题并来回切换,选择其中较好的风格样式锁定主题。但在网站设计开发过程中,突然反悔,临时想换一个主题进行开发,这样的情况并不少见。但一个wordpress站点只能使用一种主题。如果随意切换其他主题是否站点中的设置和数据就都消失了呢,答案是并不尽然。那...
WordPress主题制作教程2.6-WordPress的条件标签(二) 页面模板  is_page_template()检测是否使用了页面模板 is_page_template(‘post.php’)检测是否使用页面模板‘post’,页面模板与其他标签有所不同,用户需要使用文件名(如post.php或my...

发表评论

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.