Wordpress 頂部圖像自定義調用
該功能的Wordpress 函數為：
add_theme_support()
Xitou 主題由以下程序構建：
文件位于：
/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',
????????????)
????????)
????);
我還是沒弄懂。
