該功能的Wordpress 函數為：

add_theme_support()

add_theme_support() - wordpress主題自定義頂部圖像功能

Muze

• 19年8月15日
• 喜歡：0
• 瀏覽：292

Xitou 主題由以下程序構建：

_s - Wordpress 主題開發板子

Muze

• 19年6月1日
• 喜歡：0
• 瀏覽：531

文件位于：

/inc/custom-header.php

代碼為（Xitou 為我的主題名）：

<?php
/**
 * Sample implementation of the Custom Header feature
 * 自定義標頭功能的示例實現
 *
 * 
 *
 * You can add an optional custom header image to header.php like so ...
 * 您可以添加一個可選的自定義標題圖像到標題. php 喜歡這樣..。
 *
????<?php the_header_image_tag(); ?>
 *
 * @link https://developer.wordpress.org/themes/functionality/custom-headers/
 *
 * @package xitou
 */


/**
 * Set up the WordPress core custom header feature.
 * 設置 WordPress 核心自定義標頭功能。
 *
 * @uses xitou_header_style()
 */
function xitou_custom_header_setup() {
????add_theme_support( 'custom-header', apply_filters( 'xitou_custom_header_args', array(
????????'default-image'          => '',
????????'default-text-color'     => '000000',
????????'width'                  => 1000,
????????'height'                 => 250,
????????'flex-height'            => true,
????????'wp-head-callback'       => 'xitou_header_style',
????) ) );
}
add_action( 'after_setup_theme', 'xitou_custom_header_setup' );


if ( ! function_exists( 'xitou_header_style' ) ) :
????/**
???? * Styles the header image and text displayed on the blog.
???? * 設置標題圖像和博客上顯示的文本的樣式。
???? *
???? * @see xitou_custom_header_setup().
???? */
????function xitou_header_style() {
????????$header_text_color = get_header_textcolor();


????????/*
???????? * If no custom options for text are set, let's bail.
???????? * 如果沒有設置文本的自定義選項, 讓我們保釋。
???????? * get_header_textcolor() options: Any hex value, 'blank' to hide text. Default: add_theme_support( 'custom-header' ).
???????? */
????????if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) {
????????????return;
????????}


????????// If we get this far, we have custom styles. Let's do this.
????????//如果我們走了這么遠, 我們就有了自定義樣式。讓我們這樣做。
?????????>
????????<style type="text/css">
????????<?php
????????// Has the text been hidden?
????????if ( ! display_header_text() ) :
?????????????>
????????????.site-title,
????????????.site-description {
????????????????position: absolute;
????????????????clip: rect(1px, 1px, 1px, 1px);
????????????}
????????<?php
????????// If the user has set a custom color for the text use that.
????????else :
?????????????>
????????????.site-title a,
????????????.site-description {
????????????????color: #<?php echo esc_attr( $header_text_color ); ?>;
????????????}
????????<?php endif; ?>
????????</style>
????????<?php
????}
endif;

調用該圖片的方法為：

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
具體內容見 add_theme_support() 函數介紹。

具體功能如下圖：

點擊后進入自定義頁面

該功能與Wordpress 2017 主題類似,可以裁剪。

以下內容可參考：

在Wordpress 2017主題中，該功能的調用代碼在 header.php 的32行：

<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

此代碼調用 /template-parts/header/header-image.php 中的代碼（15行）：

<?php the_custom_header_markup(); ?>

the_custom_header_markup() 的作用是：打印自定義標題的標記。

官方文檔：https://developer.wordpress.org/reference/functions/the_custom_header_markup/

就是這一段代碼輸出類似這樣的html 代碼：

<div id="wp-custom-header" class="wp-custom-header"><img src="https://baimu.org/wp-content/themes/twentyseventeen/assets/images/header.jpg" width="2000" height="1200" alt="百牧" /></div> </div>

而類似上面提到的功能代碼在 /inc/custom-header.php 文件中的第36行，部分代碼如下：

add_theme_support(
????????'custom-header',
????????apply_filters(
????????????'twentyseventeen_custom_header_args',
????????????array(
????????????????'default-image'    => get_parent_theme_file_uri( '/assets/images/header.jpg' ),
????????????????'width'            => 2000,
????????????????'height'           => 1200,
????????????????'flex-height'      => true,
????????????????'video'            => true,
????????????????'wp-head-callback' => 'twentyseventeen_header_style',
????????????)
????????)
????);

我還是沒弄懂。