什麼是自定義徽標?
啟動了自定義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()-註冊一個新的圖像尺寸