如何给WordPress主题添加自定义头部图像

WordPress 3.0给我们带来了以往版本所没有的一些明显的新特性，其中一个显著的亮点就是让我们可以在后台控制面板中设定主题的头部图像，这个功能同时也被整合到了其默认主题 Twenty Ten中。到了WordPress3.2，在新的默认主题Twenty Eleven中，我们还可以设定随机显示头部图像。这篇文章将要讲述的是，如果你使用的并不是WordPress的默认主题，你的主题又不支持自定义头部图像（Custom Header），但你又很需要这个功能，那怎么办呢？下文所介绍的方法可以帮你轻松实现你的这个愿望。 

 

添加代码到Functions.php文件

你的主题中应该有一个功能函数文件functions.php，如果没有则自建一个，然后复制并粘贴以下代码进去：

1. <?php
2. //Check see if the customisetheme_setup exists
3. if ( !function_exists('customisetheme_setup') ):
4.     //Any theme customisations contained in this function
5.     function customisetheme_setup() {
6.         //Define default header image
7.         define( 'HEADER_IMAGE', '%s/header/default.jpg' );
8.  
9.         //Define the width and height of our header image
10.         define( 'HEADER_IMAGE_WIDTH', apply_filters( 'customisetheme_header_image_width',960 ) );
11.         define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'customisetheme_header_image_height',220 ) );
12.  
13.         //Turn off text inside the header image
14.         define( 'NO_HEADER_TEXT', true );
15.  
16.         //Don't forget this, it adds the functionality to the admin menu
17.         add_custom_image_header( '', 'customisetheme_admin_header_style' );
18.  
19.         //Set some custom header images, add as many as you like
20.         //%s is a placeholder for your theme directory
21.         $customHeaders = array (
22.                 //Image 1
23.                 'perfectbeach' => array (
24.                 'url' => '%s/header/default.jpg',
25.                 'thumbnail_url' => '%s/header/thumbnails/pb-thumbnail.jpg',
26.                 'description' => __( 'Perfect Beach', 'customisetheme' )
27.             ),
28.                 //Image 2
29.                 'tiger' => array (
30.                 'url' => '%s/header/tiger.jpg',
31.                 'thumbnail_url' => '%s/header/thumbnails/tiger-thumbnail.jpg',
32.                 'description' => __( 'Tiger', 'customisetheme' )
33.             ),
34.                 //Image 3
35.                 'lunar' => array (
36.                 'url' => '%s/header/lunar.jpg',
37.                 'thumbnail_url' => '%s/header/thumbnails/lunar-thumbnail.jpg',
38.                 'description' => __( 'Lunar', 'customisetheme' )
39.             )
40.         );
41.         //Register the images with WordPress
42.         register_default_headers($customHeaders);
43.     }
44. endif;
45.  
46. if ( ! function_exists( 'customisetheme_admin_header_style' ) ) :
47.     //Function fired and inline styles added to the admin panel
48.     //Customise as required
49.     function customisetheme_admin_header_style() {
50.     ?>
51.         <style type="text/css">
52.             #wpbody-content #headimg {
53.                 height: <?php echo header_image_height; ?>px;
54.                 width: <?php echo header_image_width; ?>px;
55.                 border: 1px solid #333;
56.             }
57.         </style>
58.     <?php
59.     }
60. endif;
61.  
62. //Execute our custom theme functionality
63. add_action( 'after_setup_theme', 'customisetheme_setup' );
64. ?>

说明：上面代码中设定了三张头部图像，分别为default.jpg、tiger.jpg、lunar.jpg以及它们各自的缩略图（分别为tiger-thumbnail.jpg、pb-thumbnail.jpg、lunar-thumbnail.jpg）。你可以自己制作这些图像（包括它们相应的缩略图），然后将这些图像都放到主题目录下面的header文件夹（没有则自建一个）中。其中，

 

Default.jpg 是默认显示的头部图像，名称可自定

960 是默认头部图像的宽度

220 是默认头部图像的高度

保存好上面的代码之后，你会在WordPress后台的左侧【外观】菜单下看到一个叫做【顶部】的子菜单，就跟WordPress默认主题Twenty Ten或Twenty Eleven一样，打开【顶部】菜单即可看到如下图所示的自定义顶部图像选项页面：

 

进入自定义顶部图像选项页面之后，你可以自己再上传一张图片作为固定的主题头部图像，也可以从预先制作好的图像中（默认图像一栏）选择一张，或者选择随机显示也可以。

 

让头部图像在你的主题中显示出来

这是最后一步，你还得在主题的header.php文件中适当的位置插入以下代码，这样头部图像才能正常显示出来 :

 

1. <div id="header">
2.     <!-- other header code here.... -->
3.  
4.     <!-- This line adds the header to the theme -->
5.     <img id="headerimg" src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="Header image alt text" />
6. </div>

一般情况下，你找到id 为header的那对<div>···</div> 标签，将代码放到里面即可。