首页 » WP教程 » 主题教程 » 如何让你的主题具有自定义头部的功能

如何让你的主题具有自定义头部的功能

2012/04/27

wordpress支持自定义头部的功能，但是很多主题并没有让用户有这个选择的自由。实际上这个是非常重要的，它是首先吸引用户的东西。以下的教程将会一步一步教你如何让你的主题也具有这个功能。

本文涉及的内容包括：

Step 1. 创建默认头部图像的位置.
Step 2. 添加下面的代码到functions.php 文件中.
Step 3. 把下面的代码加到 header.php 文件内.
Step 4. 创建 header.css 样式文件.

Step 1. 创建默认头部图像的位置.

最好是放在你主题的目录下，如 %s/images/headers。变量 %s 主题目录的预置符。

Step 2. 添加下面的代码到functions.php 文件中.

注意: 此代码来自 Twenty Ten的 functions.php 文件.

add_action( 'after_setup_theme', 'padd_theme_header_setup' );

if ( ! function_exists('padd_theme_header_setup') ):
 function padd_theme_header_setup() {
 add_theme_support( 'post-thumbnails' );
 define( 'HEADER_IMAGE', '%s/images/headers/default-header.jpg' );
 define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 920 ) );
 define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height', 225 ) );
 set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
 define( 'NO_HEADER_TEXT', true );
 add_custom_image_header( '', 'padd_theme_header_img_style' );

register_default_headers( array (
 'film' => array (
 'url' => '%s/images/headers/film.jpg',
 'thumbnail_url' => '%s/images/headers/film-thumbnail.jpg',
 'description' => __( 'Film', 'yourtheme' )
 ),
 'pills' => array (
 'url' => '%s/images/headers/pills.jpg',
 'thumbnail_url' => '%s/images/headers/pills-thumbnail.jpg',
 'description' => __( 'Pills', 'yourtheme' )
 )
 ) );
 }
 endif;

if ( ! function_exists( 'padd_theme_header_img_style' ) ) :
 function padd_theme_header_img_style() {
 ?>

<style type="text/css">
   	#header-img {
   		height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
  		width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
   	}
 	#header-img img {
 		border: 0;
 		padding: 0;
 	}
 	#header-img h1, #header-img #desc {
 		display: none;
 	}
 </style>

<?php
}
endif;
 ?>

这个代码创建了一个默认图像，可以让使用者在后台看到它。同时也使后台出现自定义头部图像的功能。

上面的图就是自定义头部图像的管理面板，以下是对代码的简短说明：

这个 add_action() 函数是将函数链接到指定的动作。

add_action( 'after_setup_theme', 'padd_theme_header_setup' );

这行告诉WordPress 在after_setup_theme完成任务后运行 padd_theme_header_setup() 。

function padd_theme_header_setup() {
 add_theme_support( 'post-thumbnails' );
 define( 'HEADER_IMAGE', '%s/images/headers/default-header.jpg' );
 define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 920 ) );
 define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height', 225 ) );
 set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
 define( 'NO_HEADER_TEXT', true );
 add_custom_image_header( '', 'padd_theme_header_img_style' );

第一行是让主题支持文章缩略图的，下一行是设置默认图像的路径

接下来是设置头部图像的宽度和高度。

NO_HEADER_TEXT 设置为 true，是头部图像的文本颜色功能。

另外可以增加一个自定义样式的方法。通过add_custom_image_header() 函数实现的。

Step 3. 把下面的代码加到 header.php 文件内.

<?php
 // Check if this is a post or page, if it has a thumbnail, and if it's a big one
 if ( is_singular() && has_post_thumbnail( $post->ID ) &&
 ( /* $src, $width, $height */
 $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail') ) &&
 $image[1] >= HEADER_IMAGE_WIDTH ) :
 // We have a new header image!
 echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
 else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

这是定义头部图像放置的地方。

Step 4. 创建 header.css 样式文件.

/* = Header, Blog Title and Slogan.
 --------------------------------------------------- */
div#header {
       position: relative;
 }
 div#header-pad {
      height: 225px;
      width: 920px;
      margin: 0 auto;
 }
 div#header h3 {
     display: none;
 }
 div#header .box-masthead {
     float: left;
 }
 div#header .box-masthead .title {
     display: block;
     position: absolute;
     top: 117px;
     left: 0px;
     bottom: 0px;
     background: #fff;
     opacity: 0.8;
     width: 920px;
     z-index: 89;
     margin: 0 0 0 20px;
     padding: 0;
     overflow: hidden;
 }
 div#header .box-masthead .title a {
     display: block;
     margin: 0;
     padding: 30px;
     width: 1000px;
     height: 98px;
     outline: none;
     color: #4a3f2d;
     text-shadow: 0 -1px #000;
     font-size: 45px;
     font-weight: normal;
     line-height: 49px;
     text-decoration: none;
}
 div#header .description {
     display: none;
 }
 div#header .header-img img {
     border: 0;
     padding: 0;
 }

标题是绝对位置，离顶部117px，背景色是白色，透明度是0.8。

打赏赞