什么是自定义页眉
自定义页眉(Header)允许站点所有者将自己的“页眉”图像上传到其站点,该图像可以放置在某些页面的顶部。 您也可以在页眉下方或上方放置文本。
在主题中启用自定义页眉后,用户可以使用WordPress主题自定义程序更改其页眉图像。这为用户提供了对其网站外观的更多控制和灵活性。
为了支持流畅的布局和响应式设计,这些页眉也可以是灵活的。
步骤如下
一、 为主题添加自定义页眉支持
使用 add_theme_support() 将页眉添加到您的functions.php文件中。 配置后用户可以通过管理面板的“外观”>“页眉”部分中的可视编辑器来自定义和裁剪这些内容。
使用after_setup_theme挂钩,以便在加载主题之后注册自定义页眉。 要在主题中启用自定义页眉,请在您的主题的 functions.php
文件添加以下内容:
function themename_custom_header_setup() {
$args = array(
// 要显示的默认页眉图片
'default-image' => get_template_directory_uri() . '/images/headers/default.jpg',
// 是否要显示页眉文本
'header-text' => false,
// 页眉文本颜色
'default-text-color' => '000',
// 页眉图片宽度(像素)
'width' => 1000,
// 页眉图片高度(像素)
'height' => 198,
// 页眉图片随机旋转默认
'random-default' => false,
// 在后台启用图片上传
'uploads' => false,
// 主题页眉部分的回调函数
'wp-head-callback' => 'wphead_cb',
// 在预览中页眉部分的回调函数
'admin-head-callback' => 'adminhead_cb',
// 在管理屏幕中生成预览标记的函数
'admin-preview-callback' => 'adminpreview_cb',
)
add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'themename_custom_header_setup' );
补充说明:
1、如果数组中不包含flex-height或flex-width,则height和width将为固定大小。如果包括flex-height和flex-width,则将高度和宽度用作建议的尺寸。
2、页眉文本:
默认情况下,用户可以选择是否在图像上显示页眉文本。没有选项可以将页眉文本强制显示在用户网站上,但是如果要完全删除页眉文本,可以在参数中将'header-text'
设置为'false'
。这将删除页眉文本和用于切换页眉的选项。
3、默认图像
用户首次安装主题时,您可以包括一个默认页眉,该页眉将在他们选择自己的页眉之前被选择。这使用户可以更快地设置您的主题并使用您的默认图像,直到他们准备上传自己的图片为止。
$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 );
举例:
设置默认的页眉图片宽度980px和高度60px:
指定的宽度和高度将显示为建议的大小,并flower.jpg显示为可选选项。
$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中的替代选择。
二、在模板文件中使用
使用“get_custom_header() ” 等函数调用页眉。
管理
在自定义–>顶部图像(增加theme_support后就会显示):
如下包括:
点击“添加新图像”来从您的计算机上传图像文件。图片头部尺寸为1440 × 500像素时最适合您的主题,您可以在上传后裁切您的图片来适应尺寸。
当前顶部图像
已经上传
建议的


设置
默认情况下,用户将必须裁剪其上传的所有图像以适合您指定的宽度和高度。但是,您可以通过将’flex-width’和’flex-height’指定为true,让用户上传任何高度和宽度的图像。用户上传新图片时,这将允许用户跳过裁剪步骤。
设置灵活的页眉:
将header.php
文件更新为:
<img alt="" src="<?php header_image(); ?>"
width="<?php echo absint( get_custom_header()->width ); ?>"
height="<?php echo absint( 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 absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div>
<?php endif; ?>
参考函数
header_image() 显示页眉图像的网址。
get_header_image() 检索自定义页眉的页眉图像。
get_custom_header() 获取页眉图像数据。
get_random_header_image() 检索自定义页眉的页眉图像。
add_theme_support() 注册对给定功能的主题支持。
register_default_headers() 注册要由定制程序显示的默认页眉的选择。