WordPress 添加自定义样式

自定义字段

Wordpress 一般使用的是主题自带的样式，但是有时候，我们需要添加其它的样式，这时候可以在header.php中添加。

一种添加方式是：给所有页面添加样式

一种添加方式是：给单独的某一页面添加样式

给所有网页添加样式

打开header.php，直接将样式添加进来，都可以使用，比如添加bootstrap

将其放在head标签内就可以了。

<link rel=\"stylesheet\" href=\"https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\"><script src=\"https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js\"></script><script src=\"https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js\"></script>

这样每一个页面加载时，都会将这个样式加载上。

给单独某页添加样式

单独某页都特殊样式，需要单独添加，其它页面不需要添加，以免造成冲突和资源的浪费。

这种情况下就需要使用页面的自定义栏目

打开某个页面，最下方有自定义栏目，在此添加额外样式。

比如：

然后在header.php中添加这一段代码，放在head标签内

这样页面就可以使用自定义样式了。

wordpress进阶教程(三十九)：wordpress输出bootstrap的菜单结构

现在自适应网页(即常说的响应式设计，一个网页在PC\\平板\\手机上显示不同的布局)用的越来越多，然而，对于大多数人来说，写一个自适应的网页并非易事，于是有了bootstrap。

Bootstrap是twitter的工程师利用业余时间制作推出的一个开源的用于前端开发的工具包，即里面已经写好了css js，你只需要引入它的js和css,然后根据要求，给网页的div添加相应的class属性，即可制作一个响应式网页。

说实话，bootstrap很方便，作者使用过一次，但是有一个缺点，那就是你需要引入bootstrap的框架的css和js，然而这个css里面，有很多代码都是你用不到的，这样就会产生很多冗余代码，而去除css的冗余代码绝对是个体力活，所以作者用过一次就不用了。

将bootstrap应用到wordpress上也很简单，唯一可能有困难的就是菜单，因为bootstrap的菜单有他自己的结构和属性，最新的菜单演示页面如下：http://v3.bootcss.com/examples/navbar/

查看网页源文件，可以看到菜单的结构大概是这样

1. <ul class=\"nav navbar-nav\">   
2.   <li class=\"active\"><a href=\"#\">Link</a></li>   
3.   <li class=\"dropdown\">   
4.     <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">Dropdown <b class=\"caret\"></b></a>   
5.     <ul class=\"dropdown-menu\">   
6.       <li><a href=\"#\">Action</a></li>   
7.       <li><a href=\"#\">Another action</a></li>   
8.     </ul>   
9.   </li>   
10. </ul>