自定義Headers · WordPress開發手冊

自定義標頭允許網站所有者將自己的“標題”圖像上傳到其網站，可以將其放置在某些頁面的頂部。這些可以由用戶通過管理面板的“外觀>標題”部分中的可視化編輯器定制和裁剪。您也可以將文本放在標題下方或頂部。為了支持流體布局和響應設計，這些頭部也可能是靈活的。標題使用get_custom_header()放置在主題中，但必須首先使用add_theme_support()將其添加到您的functions.php文件中。自定義標題是可選的。要使用文本設置基本的，靈活的自定義標題，您將包括以下代碼： ``` function themename_custom_header_setup() { $args = array( 'default-image' => get_template_directory_uri() . 'img/default-image.jpg', 'default-text-color' => '000', 'width' => 1000, 'height' => 250, 'flex-width' => true, 'flex-height' => true, ) add_theme_support( 'custom-header', $args ); } add_action( 'after_setup_theme', 'themename_custom_header_setup' ); ``` 使用after_setup_theme鉤子，以便在主題加載后自動標題被注冊。 ## 什么是自定義標題？當您在主題中啟用自定義標題時，用戶可以使用WordPress主題定制程序更改其標題圖像。這給用戶更多的控制和靈活性，在他們的網站的外觀。 ## 向您的主題添加自定義標題支持要在主題中啟用自定義標題，請將以下內容添加到您的functions.php文件中： ``` add_theme_support( 'custom-header' ); ``` 啟用自定義頭文件時，可以通過將參數傳遞給add_theme_support()函數來配置其他幾個選項。您可以使用數組將特定配置選項傳遞給add_theme_support函數： ``` function themename_custom_header_setup() { $defaults = array( // Default Header Image to display 'default-image' => get_template_directory_uri() . '/images/headers/default.jpg', // Display the header text along with the image 'header-text' => false, // Header text color default 'default-text-color' => '000', // Header image width (in pixels) 'width' => 1000, // Header image height (in pixels) 'height' => 198, // Header image random rotation default 'random-default' => false, // Enable upload of image file in admin 'uploads' => false, // function to be called in theme head section 'wp-head-callback' => 'wphead_cb', // function to be called in preview page head section 'admin-head-callback' => 'adminhead_cb', // function to produce preview markup in the admin screen 'admin-preview-callback' => 'adminpreview_cb', ); } add_action( 'after_setup_theme', 'themename_custom_header_setup' ); ``` ## 靈活的頭部圖像如果陣列中沒有包含flex-height或flex-width，那么height和width將是固定的大小。如果包括柔度高度和彈性寬度，則將使用高度和寬度作為建議的尺寸。 ## 標題文字默認情況下，用戶可以選擇是否在圖像上顯示標題文本。沒有選項強制用戶的標題文本，但是如果要完全刪除標題文本，可以在參數中將'header-text'設置為'false'。這將刪除標題文本和選項來切換它。 # 示例 ## 設置自定義標題圖像當用戶首次安裝您的主題時，您可以在選擇自己的標題之前添加默認標題。這樣，用戶可以更快地設置主題，并使用默認圖片，直到他們準備上傳自己的主題。設置默認標題圖像980px寬度和60px高度： ``` $header_info = array( 'width' => 980, 'height' => 60, 'default-image' => get_template_directory_uri() . '/images/sunset.jpg', ); add_theme_support( 'custom-header', $header_info ); $header_images = array( 'sunset' => array( 'url' => get_template_directory_uri() . '/images/sunset.jpg', 'thumbnail_url' => get_template_directory_uri() . '/images/sunset_thumbnail.jpg', 'description' => 'Sunset', ), 'flower' => array( 'url' => get_template_directory_uri() . '/images/flower.jpg', 'thumbnail_url' => get_template_directory_uri() . '/images/flower_thumbnail.jpg', 'description' => 'Flower', ), ); register_default_headers( $header_images ); ``` 不要忘記調用register_default_headers()來注冊默認映像。在這個例子中，sunset.jpg是默認的圖像，而flower.jpg是Customizer中的另類選擇。從管理屏幕，單擊外觀>標題以在定制器中顯示標題圖像菜單。請注意，add_theme_support()中指定的寬度和高度按建議大小顯示，而flower.jpg顯示為可選項。 ## 使用靈活的標題默認情況下，用戶必須裁剪上傳的圖像以適應您指定的寬度和高度。但是，您可以通過將“flex-width”和“flex-height”指定為true，讓用戶上傳任何高度和寬度的圖像。這將讓用戶在上傳新照片時跳過裁剪步驟。設置靈活的標題： ``` $args = array( 'flex-width' => true, 'width' => 980, 'flex-height' => true, 'height' => 200, 'default-image' => get_template_directory_uri() . '/images/header.jpg', ); add_theme_support( 'custom-header', $args ); ``` 將您的header.php文件更新為： ``` <img alt="" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>"> ``` ## 顯示自定義標題要顯示自定義標題，函數get_header_image()將返回標題圖像。 get_custom_header()獲取自定義頭文件數據。例如。下面顯示了如何使用自定義標題圖像來顯示主題中的標題。以下代碼進入header.php文件。 ``` <?php if ( get_header_image() ) : ?> <div id="site-header"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <?php endif; ?> ``` ## 向后兼容性 WordPress 3.4及更高版本支持自定義標題。如果您希望您的主題支持早于3.4的WordPress安裝，您可以使用以下代碼，而不是add_theme_support（'custom-header'）; ``` global $wp_version; if ( version_compare( $wp_version, '3.4', '>=' ) ) : add_theme_support( 'custom-header' ); else : add_custom_image_header( $wp_head_callback, $admin_head_callback ); endif; ``` ## 功能參考 - header_image() 顯示標題圖片網址。 - get_header_image() 檢索自定義標頭的標題圖像。 - get_custom_header() 獲取標題圖像數據。 - get_random_header_image() 檢索自定義標頭的標題圖像。 - add_theme_support() 注冊給定功能的主題支持。 - register_default_headers() 注冊要由Customizer顯示的一些默認標題。