自定义Headers · WordPress开发手册

自定义标头允许网站所有者将自己的“标题”图像上传到其网站，可以将其放置在某些页面的顶部。这些可以由用户通过管理面板的“外观>标题”部分中的可视化编辑器定制和裁剪。您也可以将文本放在标题下方或顶部。为了支持流体布局和响应设计，这些头部也可能是灵活的。标题使用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显示的一些默认标题。