自定义页眉

文章目录

自定义页眉（Header）允许站点所有者将自己的“页眉”图像上传到其站点，该图像可以放置在某些页面的顶部。用户可以通过管理面板的“外观”>“页眉”部分中的可视编辑器来自定义和裁剪这些内容。您也可以在页眉下方或上方放置文本。为了支持流畅的布局和响应式设计，这些页眉也可以是灵活的。可以在主题中使用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 文件添加以下内容：

function themename_custom_header_setup() {
    $defaults = 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_action( 'after_setup_theme', 'themename_custom_header_setup' );

灵活页眉标题

如果数组中不包含flex-height或flex-width，则height和width将为固定大小。如果包括flex-height和flex-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中的替代选择。

在管理屏幕中，单击外观>页眉以在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 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; ?>

向后兼容

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() 注册要由定制程序显示的默认页眉的选择。

这篇文章对您有用吗？是 29 否 1

{{userData.name}}已认证