WordPress主题中头部图片自定义功能的实现

在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自带的,所以里面的翻译也是同步了。

 WordPress主题中头部图片自定义功能的实现

点击上传按钮,选择自己喜欢的图片,如果图片尺寸大于我们的设定值,我们也可以直接对上传的图片进行裁剪,很方便的。如图,

 WordPress主题中头部图片自定义功能的实现

指定裁剪位置后,点击“裁切头部”,OK, ALL DONE。(另外,当指定新图片后,后台是会多出一个恢复到默认图片的选项,我这里就不多说了。)

P.S. 目前这个功能在Js O4w的最新版1.1.5中已经内置,使用该主题的朋友直接在后台点升级则可。这样的话,大家想更换一下那个圈圈图片的话现在可以了,就象下图一样。希望这个功能能方便地让大家把主题弄得个性一点,尽管我一直觉得那个圈圈图案很好看,呵呵。

 WordPress主题中头部图片自定义功能的实现

分类:theme skill, WordPress;标签:, , ;收藏本文的永久链接

48 Responses to “WordPress主题中头部图片自定义功能的实现”

  1. Showfom 回复此留言 2010/03/06 09:33 #comment-13230

    沙发啊啊!!!!

  2. Sivan 回复此留言 2010/03/06 09:41 #comment-13235

    正准备加这个功能但是不会呢 :lol:

  3. underone 回复此留言 2010/03/06 10:08 #comment-13236

    学习ing...

  4. mencase 回复此留言 2010/03/06 10:45 #comment-13237

    博主现在还美国?

    • Jinwen 回复此留言 2010/03/06 11:06 #comment-13238

      不是呢,我没去过美国,应该是法国吧 :wink:

  5. JOY 回复此留言 2010/03/06 14:14 #comment-13239

    学习了~~~ :oops:

  6. Danny Chang 回复此留言 2010/03/06 14:43 #comment-13240

    thanks for sharing ;)

  7. Bee君 回复此留言 2010/03/06 15:00 #comment-13242

    这样主题就有趣很多了 :razz:

  8. 托尔·银月 回复此留言 2010/03/06 16:58 #comment-13246

    前几天刚提起这个功能~~
    没想到这么快就实现了啊!
    而且比预想中的还要功能丰富呢 :grin:

  9. bolo 回复此留言 2010/03/06 18:17 #comment-13248

    这样对菜鸟来说就方便多了,哈哈

  10. feicun 回复此留言 2010/03/06 23:42 #comment-13258

    我也准备开始尝试做主题了,先学习一下~

  11. disinfeqt 回复此留言 2010/03/07 00:08 #comment-13260

    好久没来了~ 主题越来越漂亮 :)
    我的建议是,给顶部的 nav 按钮加上 jQuery 的淡入渐变吧,那么大的按钮,外加这么强烈的颜色对比,hover 的时候挺晃眼的,加上渐变会优雅很多 :lol:

  12. 设计是空 回复此留言 2010/03/07 10:16 #comment-13264

    呀和~~~好强大,要考虑是不是换这个主题了,呵呵~~

  13. zwwooooo 回复此留言 2010/03/07 13:35 #comment-13268

    学习备用,现在的主题没header图片……

  14. adsfa 回复此留言 2010/03/07 18:51 #comment-13273

    :grin: 亲爱的博主 我想请教您一个问题 我现在使用的主题不支持回复和嵌套 WordPress Thread Comment这个插件跟我的一个分页插件有出入 我想找个嵌套回复的方法 不知道能否给个方法或者可以的插件 非常感谢

    • Jinwen 回复此留言 2010/03/07 22:13 #comment-13286

      好像在WordPress2.7后就内置了嵌套的功能,所以也没有必要再使用插件了。
      如果你需要嵌套的实现那就要主题的支持了,或者只能换一个主题,要不,给主题作者要求下修改吧。 :wink:

  15. william 回复此留言 2010/03/07 18:56 #comment-13274

    博主您好!!我非常激动,因为我和你一样,是真妮的歌迷。我十几年前上中学时曾买过一盒真妮的《紫色的玫瑰》磁带,我非常喜欢里面的歌,但是后来被同学弄丢了。后来我曾经在网上找过她的歌,都没有找到。今天忽然翻起年轻时的旧东西,看到我自己手抄的歌本上有她的歌词,很感动,于是上网搜寻。没想到看到你的07年一篇帖子说下载到了她的歌曲。我非常希望能得到您的无私分享,让我也能感受到从前那快乐的时光。如果您愿意,请与我联系:williamelf@163.com QQ57456485.非常感谢!

  16. 羽中 回复此留言 2010/03/07 19:07 #comment-13276

    也可以用这个方法修改非banner图片吧?如果图片位置不是在banner上?

  17. Lene 回复此留言 2010/03/07 21:03 #comment-13280

    菜鸟学习了 :lol: :lol:

  18. ansonyi 回复此留言 2010/03/08 19:22 #comment-13292

    学习一下

  19. LETCG 回复此留言 2010/03/08 19:23 #comment-13293

    博主 您好 我是问嵌套评论的那个人~~ 感谢能回复我的问题 但是我实在是不想换皮肤 不过现在使用其他插件解决啦~~~已订阅您的文章 学了不少东东

  20. edikud 回复此留言 2010/03/08 20:06 #comment-13294

    学习ing... :shock:

  21. edikud 回复此留言 2010/03/08 20:12 #comment-13295

    加了个链接 :cool:

  22. Jutoy 回复此留言 2010/03/10 12:30 #comment-13318

    这个蛮有用~收藏了!

  23. 皓辰 回复此留言 2010/03/16 20:13 #comment-13366

    对呀,我曾使用过一个外国主题就可以自定义header图片的

  24. WANGJIARONG 回复此留言 2010/03/16 23:32 #comment-13374

    学习中、
    关注博主

  25. QiQiBoY 回复此留言 2010/03/17 00:06 #comment-13378

    很棒。。 :lol:

  26. kevin 回复此留言 2010/03/20 23:22 #comment-13442

    好久没来了,先来支持一下! :cool:

  27. 赢在网络 回复此留言 2010/03/21 23:17 #comment-13458

    不错,就是布置起来有点麻烦。有傻瓜安装就好了。

    • Jinwen 回复此留言 2010/03/21 23:35 #comment-13459

      哎呀,这已经不算是麻烦的啦。。。 :?:

  28. popdo 回复此留言 2010/03/22 18:30 #comment-13476

    挺有意思的。收藏啦!

  29. Carrie 回复此留言 2010/03/25 22:48 #comment-13534

    Jinwen, 我使用你這個代碼實現了在後台設定頁首圖片的功能,但有一點很奇怪,我在本地 WordPress 測試時,卻出現了 banner 圖片左上角有圖片網址出現的怪事,以下是截圖網址:
    http://lh3.ggpht.com/_OjXGtr7Gy5s/S6t1n-AMsII/AAAAAAAAARI/El4eaTZ2u_Q/banner-erron.png

    另外,我是在 header.php 檔案裏 < div id="header" > 底下加入以下代碼:

    <div id="banner" >
    <?php header_image(); ? >
    </div >

    (當然是半形、無空格的代碼)

    不曉得是否哪裏有錯呢!?

  30. 大脚下载 回复此留言 2010/04/15 15:11 #comment-13865

    我不懂程序也可以吗

  31. dongbinghua 回复此留言 2010/09/13 16:56 #comment-15806

    不错,学习wordpress中;

  32. 小游 回复此留言 2010/10/26 23:54 #comment-16135

    不错,很强大,我也要试试 :grin:

  33. 中山SEO 回复此留言 2010/11/03 14:26 #comment-16264

    哇~很漂亮,很方便!


The trackbacks and pingpacks: