WordPress主题教程:制作水平导航栏

作为一个Blogger，我一直以来都是使用WordPress博客系统，也一直使用其他人制作的博客主题，为什么不自己尝试做一个主题呢？自己做一个WordPress博客主题，其实这个想法一直都有，我觉得这是对于目前的自己来说，是一个挑战。既然是挑战，就直面迎战吧！

怎么去学习制作WordPress博客主题

善用网络，利用网络资源来学习，是目前我们最好的选择。这是个资源共享、信息泛滥的时代，工具和资源超多，能否自我学习并取得好结果的关键是自己怎么去选择和结合使用网络工具，然后是优化和在选择。这里推荐萧秋水在他的博客中写的《陌生领域快速学习四大技巧》，又兴趣的同学可以看一下，值得我们参考一下。

关于wordpress主题制作的自我学习，我首选选择了我爱水煮鱼的博客主题制作教程。这款主题浅显易懂，很好的阐述了几个基本文件的构造和函数代码之间的联系，即使是代码初学者也可以看懂《WordPress 主题教程》。

但是这款主题教程是2007年编写的，虽然通俗易懂，但是也只是说明了最基本的内容。如果我们想要进一步学习来达到制作一个满意的主题，我们还需要学习更多。我搜索了一下网络，发现其他好的教程不多，于是转战Wordpress官方网站，幸好中文文档中提供了很多这类信息。但是缺点也很明显，大部分都是英文的。

WordPress博客主题:制作水平导航栏

我们言归正传，回到怎么制作水平的导航栏这个问题上来。整个WordPress主题制作的最大难点是关于导航栏和菜单的问题，其他旁枝末节基本用CSS来搞定就行了，当然这里也是用到了CSS知识。

我一下面的例子来看，逐步使用CSS来调整导航栏。

<div id="navmenu">
<ul>
	<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
	<li><a href="wordpress/recipes/">RECIPES</a></li>
	<li><a href="wordpress/travel/">TRAVEL</a></li>
	<li><a href="http://www.ecmoment.com">WORDPRESS</a></li>
</ul>
</div>

正如你看到的，这些代码在你的主题上显示了一列文字。

• HOME
• RECIPES
• TRAVEL
• WORDPRESS

你也可以使用wp_list_categories()主题标签来陈列你的分类。如果你只想要分类ID为1、3、4、5以及其余的，你可以这样排列：

<div id="navmenu">
<ul>
 <li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<?php wp_list_categories('orderby=name&include=1,3,4,5'); ?>
 <li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>

你可以把这些代码放在header里面，这样方便管理。

运用CSS来调整导航样式

默认情况下，列表在每个项目中垂直竖立，还有作为bullet的图片。所以我们需要添加CSS来除去bullet并设置整个列表的margin和padding为0。

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }

当你保存并更新了你的样式表之后，在浏览器中刷新你的测试页面，你将会看到列表没有bullets和缩进。接下来我们需要使这些列表水平排列，使用一下代码：

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }

因为这些都是链接，我们不得不花时间来清理。现在我们可以添加一些空间给这些链接列表，以至于他们不会看起来太拥挤，同时移除默认链接的下划线，当鼠标移动到上面时，链接的颜色改变。

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
#navmenu a:hover {color: purple; }

接下来，我们看看我们还能不能做点其他的来使得导航更加美观。

#navmenu ul {margin: 0; padding: 0;
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none;  margin: 4px;
	padding: 5px 20px 5px 20px; color: blue;
	background: pink;}
#navmenu ul li a:hover {color: purple;
	background: yellow; }

如果你正确地使用以上的代码，刷新浏览器，你可以看到这样的效果。

WordPress主题制作总结

如果你想要制作更加精美的主题导航，请自学一下CSS吧。本博客近期会写一些关于WordPress主题制作的相关内容，我们一起学习自己做WordPress主题吧！！

 

Incoming search terms:

• wordpress水平
• wordpress导航主题
• css做wordpress导航栏
• wordpress主题制作教程
• wordpress主题导航栏代码
• wordpress导航栏制作
• wordpress导航栏怎么做
• wordpress怎么制作水平
• wordpres博客导航栏制作
• 取消wordpress导航栏搜索