WordPress 主題教程：如何讓你的主題具有自定義頭部的功能

WordPress 支援自定義頭部的功能，但是很多主題並沒有讓使用者有這個選擇的自由。實際上這個是非常重要的，它是首先吸引使用者的東西。以下的教程將會一步一步教你如何讓你的主題也具有這個功能。

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%20header_image();%20?>" 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 。

WordPress 主題教程：如何讓你的主題具有自定義頭部的功能