自定义顶部图像功能 - 下划线主题代码片段

1
<?php
2
/**
3
 * Sample implementation of the Custom Header feature
4
 * 自定义标头功能的示例实现
5
 *
6
 *
7
 *
8
 * You can add an optional custom header image to header.php like so ...
9
 * 您可以添加一个可选的自定义标题图像到标题. php 喜欢这样..。
10
 *
11
    <?php the_header_image_tag(); ?>
12
 *
13
 * @link https://developer.wordpress.org/themes/functionality/custom-headers/
14
 *
15
 * @package xitou
16
 */
17

18

19
/**
20
 * Set up the WordPress core custom header feature.
21
 * 设置 WordPress 核心自定义标头功能。
22
 *
23
 * @uses xitou_header_style()
24
 */
25
function xitou_custom_header_setup() {
26
    add_theme_support( 'custom-header', apply_filters( 'xitou_custom_header_args', array(
27
        'default-image'          => '',
28
        'default-text-color'     => '000000',
29
        'width'                  => 1000,
30
        'height'                 => 250,
31
        'flex-height'            => true,
32
        'wp-head-callback'       => 'xitou_header_style',
33
    ) ) );
34
}
35
add_action( 'after_setup_theme', 'xitou_custom_header_setup' );
36

37

38
if ( ! function_exists( 'xitou_header_style' ) ) :
39
    /**
40
     * Styles the header image and text displayed on the blog.
41
     * 设置标题图像和博客上显示的文本的样式。
42
     *
43
     * @see xitou_custom_header_setup().
44
     */
45
    function xitou_header_style() {
46
        $header_text_color = get_header_textcolor();
47

48

49
        /*
50
         * If no custom options for text are set, let's bail.
51
         * 如果没有设置文本的自定义选项, 让我们保释。
52
         * get_header_textcolor() options: Any hex value, 'blank' to hide text. Default: add_theme_support( 'custom-header' ).
53
         */
54
        if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) {
55
            return;
56
        }
57

58

59
        // If we get this far, we have custom styles. Let's do this.
60
        //如果我们走了这么远, 我们就有了自定义样式。让我们这样做。
61
        ?>
62
        <style type="text/css">
63
        <?php
64
        // Has the text been hidden?
65
        if ( ! display_header_text() ) :
66
            ?>
67
            .site-title,
68
            .site-description {
69
                position: absolute;
70
                clip: rect(1px, 1px, 1px, 1px);
71
            }
72
        <?php
73
        // If the user has set a custom color for the text use that.
74
        else :
75
            ?>
76
            .site-title a,
77
            .site-description {
78
                color: #<?php echo esc_attr( $header_text_color ); ?>;
79
            }
80
        <?php endif; ?>
81
        </style>
82
        <?php
83
    }
84
endif;

1
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
2
具体内容见 add_theme_support() 函数介绍。

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

1
<?php the_custom_header_markup(); ?>

1
add_theme_support(
2
        'custom-header',
3
        apply_filters(
4
            'twentyseventeen_custom_header_args',
5
            array(
6
                'default-image'    => get_parent_theme_file_uri( '/assets/images/header.jpg' ),
7
                'width'            => 2000,
8
                'height'           => 1200,
9
                'flex-height'      => true,
10
                'video'            => true,
11
                'wp-head-callback' => 'twentyseventeen_header_style',
12
            )
13
        )
14
    );