如何在WordPress 3.0中啟用自定義標題圖像面板


如果你們還沒有機會測試WordPress 3.0,那麼您就錯過了。 我們創建了許多有關WordPress 3.0功能的帖子,並且還顯示了WordPress 3.0屏幕截圖。 此版本中值得注意的升級之一是新的默認主題,稱為 二十分。 此主題啟用了許多出色的功能,但是許多用戶想要的功能之一是“自定義標題面板”。 在本文中,我們將與您分享如何在WordPress 3.0中通過後端管理面板啟用自定義標頭。

此功能到底會做什麼?

它將在管理面板中創建一個標籤,該標籤可讓您更改標題圖片。 如果您是主題設計者,可以為用戶提供更多選項,則可以註冊默認圖像。 它還允許用戶上傳標題的自定義圖像。 最後但並非最不重要的一點是,此功能利用單個帖子頁面上的帖子縮略圖。 如果您的帖子縮略圖足夠大以適合標題大小,則它將使用您的帖子縮略圖作為標題,而不是默認圖像。 如果縮略圖較大,則會為您裁剪。

WordPress 3.0中的自定義標題

觀看截屏

如何添加呢?

我們直接從二十十年代的代碼 functions.php 文件。 您需要將以下代碼粘貼到主題的 functions.php 文件。

 array (
'url' => '%s/images/headers/berries.jpg',
'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
'description' => __( 'Berries', 'yourtheme' )
),
'cherryblossom' => array (
'url' => '%s/images/headers/cherryblossoms.jpg',
'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
'description' => __( 'Cherry Blossoms', 'yourtheme' )
),
'concave' => array (
'url' => '%s/images/headers/concave.jpg',
'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg',
'description' => __( 'Concave', 'yourtheme' )
),
'fern' => array (
'url' => '%s/images/headers/fern.jpg',
'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg',
'description' => __( 'Fern', 'yourtheme' )
),
'forestfloor' => array (
'url' => '%s/images/headers/forestfloor.jpg',
'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg',
'description' => __( 'Forest Floor', 'yourtheme' )
),
'inkwell' => array (
'url' => '%s/images/headers/inkwell.jpg',
'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg',
'description' => __( 'Inkwell', 'yourtheme' )
),
'path' => array (
'url' => '%s/images/headers/path.jpg',
'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg',
'description' => __( 'Path', 'yourtheme' )
),
'sunset' => array (
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
'description' => __( 'Sunset', 'yourtheme' )
)
) );
}
endif;
if ( ! function_exists( 'yourtheme_admin_header_style' ) ) :
/**
* Styles the header image displayed on the Appearance > Header admin panel.
*
* Referenced via add_custom_image_header() in yourtheme_setup().
*
* @since 3.0.0
*/
function yourtheme_admin_header_style() {
?>

對我來說那是胡鬧。 請解釋

當然,對某些人來說,這可能看起來有些僵硬。 這主要是針對主題設計師的,但是我們會盡力分解它。 在開始之前,請確保您將此代碼​​複製並粘貼到代碼編輯器中,以便進行必要的更改。

注意:我們使用/ images / headers /作為存儲默認標題圖像的目錄。

  • 您可以通過創建一個函數yourtheme_setup()來開始編寫代碼。
  • 在第21行中,我們定義了默認的標題圖片。 注意,存在一個變量%s,它基本上是主題目錄URI的佔位符。
  • 第25和26行是定義圖像寬度和高度的位置。 默認情況下,它設置為940px寬和198px高。 您可以通過編輯這兩行來更改它。
  • 從第42行開始,我們開始註冊默認頭。 這些圖像將在管理面板中顯示為單選按鈕選項。 如果您需要更多選項,則只需遵循所使用的格式。
  • 在第95行中,我們選擇標題樣式。 您不需要更改這些設置,因為您已經在第25和26行中對其進行了定義。

這就是您對主題的functions.php文件所做的一切。 接下來,我們將探討如何將其添加到主題中。

添加到主題中的代碼

此代碼很可能會在主題的 header.php 文件。 您可以隨意設置樣式。

ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail') ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// We have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>

這段代碼在做什麼?

  • 首先,它正在檢查它是單個帖子還是一頁。 它還會檢查此帖子/頁面是否有縮略圖,以及是否足夠大。
  • 如果頁面是單個頁面並且具有足夠大的縮略圖,則它將顯示特定於該帖子的帖子縮略圖。
  • 如果不是單個頁面,或者帖子縮略圖不夠大,那麼它將顯示默認標題。

我們希望本教程對您有所幫助。 我們收到了一些有關本教程的電子郵件,因此我們將代碼從“二十十”主題中分解出來。 如果您有任何疑問,請隨時在評論中提問。