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

Wordpress 顶部图像自定义调用

该功能的Wordpress 函数为:

add_theme_support()

add_theme_support() - wordpress主题自定义顶部图像功能

顶部图像包括顶部大banner图片和小的logo图,自定义顶部是个 2.1 版本中新引入的主题特性. 自定义顶部是在主题的顶部标题部分显示一个被选择的图像....

Xitou 主题由以下程序构建:

_s – WordPress 主题开发板子

一个基础主题开发器,通过这个网站,可快速构建一个基础开发模板,大大节省主题的开发时间。...

文件位于:

/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',
            )
        )
    );

我还是没弄懂。

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧