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

为WordPress主题添加顶部自定义图片功能

发表于38天前⁄Wordpress⁄作者原文⁄评论数3⁄被围观496次+

在WordPress主题中，头部（header）的自定义一般来说就是能让用户在后台能够自行更改主题默认显示的图片或者标题的大小颜色这些功能。而为一个主题添加上这些后台选项并不难，在WordPress较新的版本中已经为我们定义好了模块（add_custom_image_header），我们只需要对主题的一些文件简单修改即可。

这里我以自己制作的免费主题Js O4w为例简单说一下。首先我会建立一个新的文件并命名为banner.php，名字大家随便就可以了，把它放到主题的目录中去。而我放置的路径为inc/banner.php。文件的代码简单如下：

1.

2.//*HEAD

3.define('HEADER_IMAGE','%s/images/banner-white.jpg');//%s is theme d

ir uri

4.define('HEADER_IMAGE_WIDTH',930);

5.define('HEADER_IMAGE_HEIGHT',200);

6.define('NO_HEADER_TEXT',true);

7.define('HEADER_TEXTCOLOR','');

8.function admin_header_style(){?>

9.

30.

31.function header_style(){?>

32.

43.

44.if(function_exists('add_custom_image_header')){

45.add_custom_image_header('header_style','admin_header_style');

46.}

47.?>

其中，

1.define('HEADER_IMAGE','%s/images/banner-white.jpg');//%s is theme d

ir uri

这一句的路径是默认主题的图片路径。

而

1.define('HEADER_IMAGE_WIDTH',930);

2.define('HEADER_IMAGE_HEIGHT',200);

上面的两句是确认主题头部中使用图片的长度和宽度值，这个根据主题的不同而不同。设定这个数值一来是为了让图片符合主题的显示效果，另一个是用来在更换图标时候，对较大图片进行裁剪功能时候的尺寸限制。

接着的两句

1.define('NO_HEADER_TEXT',true);

2.define('HEADER_TEXTCOLOR','');

这里需要说明一下，在我使用的主题中，图片上是没有网站标题和描述显示的，所以我是需要这样的写。如果，在你的主题中，网站标题和描述是在图标内显示的，而你又需要在后台为其添加样式定义的话，可以改成如下：

1.define('HEADER_TEXTCOLOR','ffffff');

其中的ffffff是表示默认显示字样的颜色值，根据主题设计不同而不同。

然后我们需要为WordPress自带的这个模块定义两个样式，分别是在后台选项中头部的显示样式

1.function admin_header_style()

和主题前台中头部的显示样式

1.function header_style()

对于这两个样式的定义，大家在最文章开始的代码中能看到，当然也是需要根据主题不同而不同的了。对于我的情况，显示图标的区块定义是#banner。另外，因为我们已经在这个文件中定义了主题前台的头部显示样式，我们就不再需要在传统的style.css文件中重复定义它了。

基本的设置代码就是如上，重点需要设置的还是上面提及到的两个样式而已，其它的都好理解。最后我们需要把这一个文件包括在主题的function.php文件中，在其内添加一句：1.include_once(TEMPLATEPATH.'/inc/banner.php');