当我们使用wordpress开发主题的时候，通常需要注意一些用户体验小功能，自定义顶部图像功能对于成熟的网站来说至关重要，那今天就给大家分享下在开发wordpress主题时，自定义顶部图像的功能，执行起来超简单，相信每个人都能学会，无论你是否有代码基础，只要你了解wordpress主题的标准构架就可以完成。
1、添加主题支持

从 3.4 版本 开始, 主题必须在 functions.php 文件里使用 add_theme_support() 函数来添加自定义顶部的支持, 像这样:

add_theme_support( 'custom-header' );

添加的默认参数列表:

1.  

   $defaults = array(

2.  

   'default-image' => '', //默认图像

3.  

   'random-default' => false, //是否默认随机

4.  

   'width' => 0, //宽度

5.  

   'height' => 0, //高度

6.  

   'flex-height' => false,

7.  

   'flex-width' => false,

8.  

   'default-text-color' => '', //默认文本颜色

9.  

   'header-text' => true, //顶部文本开关

10.  

    'uploads' => true, //是否允许上传

11.  

    'wp-head-callback' => '',

12.  

    'admin-head-callback' => '',

13.  

    'admin-preview-callback' => '',

14.  

    );

15.  

    add_theme_support( 'custom-header', $defaults );

2、范例

设置自定义顶部图像 设置一个默认顶部图像(宽980px和高60px)：

1.  

   $args = array(

2.  

   'width' => 980,

3.  

   'height' => 60,

4.  

   'default-image' => get_template_directory_uri() . '/images/header.jpg',

5.  

   );

6.  

   add_theme_support( 'custom-header', $args );

上传其他自定义顶部图像 设置一个默认顶部图像，并允许网站所有者上传其他图片:

1.  

   $args = array(

2.  

   'width' => 980,

3.  

   'height' => 60,

4.  

   'default-image' => get_template_directory_uri() . '/images/header.jpg',

5.  

   'uploads' => true,

6.  

   );

7.  

   add_theme_support( 'custom-header', $args );

灵活定义你的主题头部

1.  

   $args = array(

2.  

   'flex-width' => true,

3.  

   'width' => 980,

4.  

   'flex-width' => true,

5.  

   'height' => 200,

6.  

   'default-image' => get_template_directory_uri() . '/images/header.jpg',

7.  

   );

8.  

   add_theme_support( 'custom-header', $args );

3、前台调用

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />

PS:主题可以在模板中通过get_header_image判断是否有顶部图像，通过header_image获得图像地址：

1.  

   <?php if ( get_header_image() ) : ?>

2.  

    

3.  

   <a href="<?php echo esc_url( home_url( '/' ) ); ?>">

4.  

   <img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />

5.  

   </a>

6.  

   <?php endif; ?>