在WordPress主题中，头部（header）的自定义一般来说就是能让用户在后台能够自行更改主题默认显示的图片或者标题的大小颜色这些功能。而为一个主题添加上这些后台选项并不难，在WordPress较新的版本中已经为我们定义好了模块（add_custom_image_header），我们只需要对主题的一些文件简单修改即可。
这里我以自己制作的免费主题Js O4w 为例简单说一下。首先我会建立一个新的文件并命名为banner.php，名字大家随便就可以了，把它放到主题的目录中去。而我放置的路径为 inc/banner.php。文件的代码简单如下：
- <?php
- //* HEAD
- define('HEADER_IMAGE', '%s/images/banner-white.jpg'); // %s is theme dir uri
- define('HEADER_IMAGE_WIDTH', 930);
- define('HEADER_IMAGE_HEIGHT', 200);
- define('NO_HEADER_TEXT', true );
- define('HEADER_TEXTCOLOR', '');
- function admin_header_style() { ?>
- <style type="text/css">
- #headimg{
- background: #fff url(<?php header_image(); ?>) no-repeat 0 0;
- color: #333;
- float: left;
- margin: 0;
- padding: 0;
- height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
- width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
- clear:both;
- }
- #headimg h1,#desc {
- display: none;
- }
- .wrap {
- clear:both;
- }
- #uploadForm {
- margin:0!important;
- }
- </style>
- <?php }
- function header_style() { ?>
- <style type="text/css">
- #banner{
- background: #fff url(<?php header_image(); ?>) no-repeat 0 0;
- color: #333;
- float: left;
- margin: 0;
- padding: 0;
- height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
- width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
- }
- </style>
- <?php }
- if ( function_exists('add_custom_image_header') ) {
- add_custom_image_header('header_style', 'admin_header_style');
- }
- ?>
其中，
- define('HEADER_IMAGE', '%s/images/banner-white.jpg'); // %s is theme dir uri
这一句的路径是默认主题的图片路径。
而
- define('HEADER_IMAGE_WIDTH', 930);
- define('HEADER_IMAGE_HEIGHT', 200);
上面的两句是确认主题头部中使用图片的长度和宽度值，这个根据主题的不同而不同。设定这个数值一来是为了让图片符合主题的显示效果，另一个是用来在更换图标时候，对较大图片进行裁剪功能时候的尺寸限制。
接着的两句
- define('NO_HEADER_TEXT', true );
- define('HEADER_TEXTCOLOR', '');
这里需要说明一下，在我使用的主题中，图片上是没有网站标题和描述显示的，所以我是需要这样的写。如果，在你的主题中，网站标题和描述是在图标内显示的，而你又需要在后台为其添加样式定义的话，可以改成如下：
- define('HEADER_TEXTCOLOR', 'ffffff');
其中的ffffff是表示默认显示字样的颜色值，根据主题设计不同而不同。
然后我们需要为WordPress自带的这个模块定义两个样式，分别是在后台选项中头部的显示样式
- function admin_header_style()
和主题前台中头部的显示样式
- function header_style()
对于这两个样式的定义，大家在最文章开始的代码中能看到，当然也是需要根据主题不同而不同的了。对于我的情况，显示图标的区块定义是#banner 。另外，因为我们已经在这个文件中定义了主题前台的头部显示样式，我们就不再需要在传统的style.css文件中重复定义它了。
基本的设置代码就是如上，重点需要设置的还是上面提及到的两个样式而已，其它的都好理解。最后我们需要把这一个文件包括在主题的function.php文件中，在其内添加一句：
- include_once(TEMPLATEPATH . '/inc/banner.php');
上面的路径什么的大家请根据自己的设置自行对上。这里补充要说的是，可能我这样多做一个文件有点多余，其实我们是可以直接把最初的一整段代码直接放入到主题的function.php文件中去的。但有一个情况，就是当你的function.php文件中已经有关于后台选项的代码存在了，那么为了避免不必要的出错修正，可以按我的方法加入，这样会方便点。
如上面的更改一切顺利，我们就能在后台的选项中看到自定义头部的选项了，因为这个模块是WordPress自带的，所以里面的翻译也是同步了。
点击上传按钮，选择自己喜欢的图片，如果图片尺寸大于我们的设定值，我们也可以直接对上传的图片进行裁剪，很方便的。如图，
指定裁剪位置后，点击“裁切头部”，OK, ALL DONE。（另外，当指定新图片后，后台是会多出一个恢复到默认图片的选项，我这里就不多说了。）
P.S. 目前这个功能在Js O4w的最新版1.1.5中已经内置，使用该主题的朋友直接在后台点升级则可。这样的话，大家想更换一下那个圈圈图片的话现在可以了，就象下图一样。希望这个功能能方便地让大家把主题弄得个性一点，尽管我一直觉得那个圈圈图案很好看，呵呵。
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
上海市 1F
虽然看的很茫然，但还是坚持看完了。
非常实用的教程！
中国 B1
@ 私人媒体 呵呵，我还没看呢
之后把这个功能加到主题中
浙江省金华市 2F
在哪里建立啊？
云南省昆明市 3F
求演示图上的主题
中国 B1
@ booleaner 把文章看全了，你就知道在哪下了
广东省广州市 4F
function header_style()；写在哪里？？？
河北省石家庄市 5F
求教，怎样把这个图片换成广告代码，可在后台选项中，任意更换。
中国 B1
@ 老徐 广告位，与这个功能无关
广东省潮州市 6F
不错，很强大，，感谢分享。已经用上去了。哈哈
广东省深圳市 7F
代码的，不大懂啊，学习一下。。。。。
韩国 8F
看起来蛮不错，作者花了蛮大工夫的，不过到我们改的时候估计又会出现好多问题，不敢去改。。。
北京市 9F
鸟哥
这个顶部图片能不能定义多个啊
江苏省苏州市常熟市 10F
我想实现那个图片的广告功能，请指教
浙江省金华市 11F
这个东西好，保留！
广西南宁市 12F
后台是见有他就爱的选项了 但是如何在前台显示出来啊？其它没见显示出来
广东省东莞市 13F
哥，在后台加了顶部图片但是现实不出来
中国 B1
@ 罗谨 需要在主题设置中关闭热点文章
北京市 14F
光这些还不行,还要在function.php里加代码,最简单的就是把自带主题 twentytelwe里的function.php直接copy进来
河南省郑州市 15F
我的也是这个滴，想问下鸟叔如何添加超链接呢
中国 B1
@ ifonder主题 哈，这可能是WP最无聊的功能之一，目前的默认主题根本没有放这玩意的地方
自己在主题上弄个图片并加上链接没那么难吧
浙江省嘉兴市 16F
按步骤设置了，后台是出现了选项功能，但是后台设置完后 首页没反应？
山东省滨州市 17F
鸟叔，我按照你的教程完整的来了一遍，并且确实可以在自定义中进行头部图像的设置，但是设置后头部图像并没有改变。我个人认为可能和我的主题有关，我的主题style样式表有两个，一个是style.css，一个是style.min.css，就好比一个网页有了两个图层，其中style.css负责背景，而style.min.css才显示页面。而我所要更改的头部是属于style.min.css来管理，请问在这种情况下，我该如何设置呢？谢谢鸟叔[img]https://img.alicdn.com/imgextra/i3/1791760094/TB2cytBfVXXXXatXpXXXXXXXXXX_!!1791760094.png[/img]
来自外部的引用