什么是自定义徽标?
启动了自定义logo,网站可以通过自定义上载网站logo(路径:自定义-站点身份-图标)。如下所示,分别是没有启动自定义logo和启动了自定义logo:
自定义-站点身份-图标
启动自定义logo功能
要在主题中启用自定义徽标,请在functions.php
文件中添加以下内容:
$defaults = array(
'height' => 50,
'width' => 150,
'flex-height' => true,
'flex-width' => true,
'header-text' => array( 'site-title', 'site-description' ),
);
add_theme_support( 'custom-logo', $defaults );
使用使用after_setup_theme
挂钩,以便在加载主题之后注册自定义徽标支持。(一般和其他启动项放在一个函数中)
参数说明:
height 预期徽标高度(以像素为单位)。自定义徽标也可以使用内置的图像尺寸,例如 thumbnail ,或使用add_image_size() 来注册自定义尺寸。 |
width 预期徽标宽度(以像素为单位)。自定义徽标也可以使用内置的图像尺寸,例如thumbnail ,或使用add_image_size() 来注册自定义尺寸 。 |
flex-height 是否允许灵活的高度。 |
flex-width 是否允许灵活的宽度。 |
header-text 要隐藏的元素的类。它可以在此处为构成页眉文本的所有元素传递一个类名数组,这些页眉文本可以用徽标替换。 |
如何在主题中显示自定义徽标
上载:
注意看:建议的图像尺寸:150 x 50像素。
the_custom_logo()
考虑到兼容性,如下所示:
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
对应HTML:
<a href="http://127.0.0.1/zhihuiyinqing/" class="custom-logo-link" rel="home">
<img width="1016" height="408" src="http://127.0.0.1/zhihuiyinqing/wp-content/uploads/2020/12/cropped-avada-daycare-logo-and-name.png" class="custom-logo" alt="智慧引擎" srcset="http://127.0.0.1/zhihuiyinqing/wp-content/uploads/2020/12/cropped-avada-daycare-logo-and-name.png 1016w, http://127.0.0.1/zhihuiyinqing/wp-content/uploads/2020/12/cropped-avada-daycare-logo-and-name-300x120.png 300w, http://127.0.0.1/zhihuiyinqing/wp-content/uploads/2020/12/cropped-avada-daycare-logo-and-name-768x308.png 768w" sizes="(max-width: 1016px) 100vw, 1016px" /></a>
注意the_custom_logo()不能定制,所以也可以这样使用:
$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
if ( has_custom_logo() ) {
echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '">';
} else {
echo '<h1>'. get_bloginfo( 'name' ) .'</h1>';
}
判断:
if ( has_custom_logo() ) :
the_custom_logo();
<?php
endif;
}
相关函数
- get_custom_logo() – 返回自定义徽标的标记。
- the_custom_logo() – 显示自定义徽标的标记。
- has_custom_logo() – 检测是否设置了自定义徽标,如果设置了,返回布尔值 true,反之返回 false。
- add_image_size()-注册一个新的图像尺寸