WordPress中文开发手册

  1. Home
  2. WordPress中文开发手册
  3. WordPress主题开发
  4. 主题功能
  5. 核心支持的功能
  6. 自定义Headers

自定义Headers

自定义标头允许网站所有者将自己的“标题”图像上传到其网站,可以将其放置在某些页面的顶部。 这些可以由用户通过管理面板的“外观>标题”部分中的可视化编辑器定制和裁剪。 您也可以将文本放在标题下方或顶部。 为了支持流体布局和响应设计,这些头部也可能是灵活的。 标题使用get_custom_header()放置在主题中,但必须首先使用add_theme_support()将其添加到您的functions.php文件中。 自定义标题是可选的。

要使用文本设置基本的,灵活的自定义标题,您将包括以下代码:

function themename_custom_header_setup() {
    $args = array(
        'default-image'      => get_template_directory_uri() . 'img/default-image.jpg',
        'default-text-color' => '000',
        'width'              => 1000,
        'height'             => 250,
        'flex-width'         => true,
        'flex-height'        => true,
    )
    add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'themename_custom_header_setup' );

使用after_setup_theme钩子,以便在主题加载后自动标题被注册。

什么是自定义标题?

当您在主题中启用自定义标题时,用户可以使用WordPress主题定制程序更改其标题图像。 这给用户更多的控制和灵活性,在他们的网站的外观。

向您的主题添加自定义标题支持

要在主题中启用自定义标题,请将以下内容添加到您的functions.php文件中:

add_theme_support( 'custom-header' );

启用自定义头文件时,可以通过将参数传递给add_theme_support()函数来配置其他几个选项。

您可以使用数组将特定配置选项传递给add_theme_support函数:

function themename_custom_header_setup() {
    $defaults = array(
        // Default Header Image to display
        'default-image'         => get_template_directory_uri() . '/images/headers/default.jpg',
        // Display the header text along with the image
        'header-text'           => false,
        // Header text color default
        'default-text-color'        => '000',
        // Header image width (in pixels)
        'width'             => 1000,
        // Header image height (in pixels)
        'height'            => 198,
        // Header image random rotation default
        'random-default'        => false,
        // Enable upload of image file in admin 
        'uploads'       => false,
        // function to be called in theme head section
        'wp-head-callback'      => 'wphead_cb',
        //  function to be called in preview page head section
        'admin-head-callback'       => 'adminhead_cb',
        // function to produce preview markup in the admin screen
        'admin-preview-callback'    => 'adminpreview_cb',
        );
}
add_action( 'after_setup_theme', 'themename_custom_header_setup' );

灵活的头部图像

如果阵列中没有包含flex-height或flex-width,那么height和width将是固定的大小。 如果包括柔度高度和弹性宽度,则将使用高度和宽度作为建议的尺寸。

标题文字

默认情况下,用户可以选择是否在图像上显示标题文本。 没有选项强制用户的标题文本,但是如果要完全删除标题文本,可以在参数中将'header-text'设置为'false'。 这将删除标题文本和选项来切换它。

示例

设置自定义标题图像

当用户首次安装您的主题时,您可以在选择自己的标题之前添加默认标题。 这样,用户可以更快地设置主题,并使用默认图片,直到他们准备上传自己的主题。

设置默认标题图像980px宽度和60px高度:

$header_info = array(
    'width'         => 980,
    'height'        => 60,
    'default-image' => get_template_directory_uri() . '/images/sunset.jpg',
);
add_theme_support( 'custom-header', $header_info );
 
$header_images = array(
    'sunset' => array(
            'url'           => get_template_directory_uri() . '/images/sunset.jpg',
            'thumbnail_url' => get_template_directory_uri() . '/images/sunset_thumbnail.jpg',
            'description'   => 'Sunset',
    ),
    'flower' => array(
            'url'           => get_template_directory_uri() . '/images/flower.jpg',
            'thumbnail_url' => get_template_directory_uri() . '/images/flower_thumbnail.jpg',
            'description'   => 'Flower',
    ),  
);
register_default_headers( $header_images );

不要忘记调用register_default_headers()来注册默认映像。 在这个例子中,sunset.jpg是默认的图像,而flower.jpg是Customizer中的另类选择。

从管理屏幕,单击外观>标题以在定制器中显示标题图像菜单。 请注意,add_theme_support()中指定的宽度和高度按建议大小显示,而flower.jpg显示为可选项。

使用灵活的标题

默认情况下,用户必须裁剪上传的图像以适应您指定的宽度和高度。 但是,您可以通过将“flex-width”和“flex-height”指定为true,让用户上传任何高度和宽度的图像。 这将让用户在上传新照片时跳过裁剪步骤。

设置灵活的标题:

$args = array(
    'flex-width'    => true,
    'width'         => 980,
    'flex-height'   => true,
    'height'        => 200,
    'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );

将您的header.php文件更新为:

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

显示自定义标题

要显示自定义标题,函数get_header_image()将返回标题图像。 get_custom_header()获取自定义头文件数据。
例如。 下面显示了如何使用自定义标题图像来显示主题中的标题。 以下代码进入header.php文件。

<?php if ( get_header_image() ) : ?>
    <div id="site-header">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
            <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
        </a>
    </div>
<?php endif; ?>

向后兼容性

WordPress 3.4及更高版本支持自定义标题。 如果您希望您的主题支持早于3.4的WordPress安装,您可以使用以下代码,而不是add_theme_support('custom-header');

global $wp_version;
if ( version_compare( $wp_version, '3.4', '>=' ) ) :
    add_theme_support( 'custom-header' );
else :
    add_custom_image_header( $wp_head_callback, $admin_head_callback );
endif;

功能参考

  • header_image() 显示标题图片网址。
  • get_header_image() 检索自定义标头的标题图像。
  • get_custom_header() 获取标题图像数据。
  • get_random_header_image() 检索自定义标头的标题图像。
  • add_theme_support() 注册给定功能的主题支持。
  • register_default_headers() 注册要由Customizer显示的一些默认标题。