If you guys haven’t had a chance to test out WordPress 3.0, then you are missing out. We have created numerous posts about WordPress 3.0 features and have shown WordPress 3.0 screenshots as well. One of the note-worthy upgrade in this version is a new default theme called Twenty Ten. This theme has a lot of great features enabled, but one of the features that a lot of users want is the Custom Headers Panel. In this article, we will share with you how you can enable custom headers with a back-end admin panel in WordPress 3.0.
如果你们还没有机会测试WordPress 3.0，那么您就错过了。 我们创建了许多有关WordPress 3.0功能的帖子，并且还显示了WordPress 3.0屏幕截图 。 此版本中值得注意的升级之一是称为二十十的新默认主题。 此主题启用了许多出色的功能，但是许多用户想要的功能之一是“自定义标题面板”。 在本文中，我们将与您分享如何使用WordPress 3.0中的后端管理面板启用自定义标头。
此功能到底会做什么？ (What exactly will this feature do?)
It will create a tab in your admin panel which will allow you to change header images. You can register default images if you are a theme designer to give users more options. It also allows users to upload custom images for the header. Last but certainly not the least, this feature utilizes post thumbnails on single post pages. If your post thumbnail is big enough to fit the header size, then it will use your post thumbnail as the header instead of the default image. If your thumbnail is bigger, then it will crop it down for you.
它将在您的管理面板中创建一个标签，该标签可让您更改标题图片。 如果您是主题设计者，可以为用户提供更多选项，则可以注册默认图像。 它还允许用户上传标题的自定义图像。 最后但并非最不重要的一点是，此功能利用单个帖子页面上的帖子缩略图。 如果您的帖子缩略图足够大以适合标题大小，则它将使用您的帖子缩略图作为标题，而不是默认图像。 如果您的缩略图较大，则它将为您裁剪。
观看截屏 (Watch the Screencast)
如何添加呢？ (How to Add this?)
We took the code straight from Twenty Ten’s functions.php file. You need to paste the following codes in your theme’s functions.php file.
我们直接从二十十的functions.php文件中获取了代码。 您需要将以下代码粘贴到主题的functions.php文件中。
<?php
/** Tell WordPress to run yourtheme_setup() when the 'after_setup_theme' hook is run. */
add_action( 'after_setup_theme', 'yourtheme_setup' );
if ( ! function_exists('yourtheme_setup') ):
/**
* @uses add_custom_image_header() To add support for a custom header.
* @uses register_default_headers() To register the default custom header images provided with the theme.
*
* @since 3.0.0
*/
function yourtheme_setup() {
// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );
// Your changeable header business starts here
define( 'HEADER_TEXTCOLOR', '' );
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/forestfloor.jpg' );
// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to yourtheme_header_image_width and yourtheme_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height', 198 ) );
// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 940 pixels wide by 198 pixels tall (larger images will be auto-cropped to fit).
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
// Don't support text inside the header image.
define( 'NO_HEADER_TEXT', true );
// Add a way for the custom header to be styled in the admin panel that controls
// custom headers. See yourtheme_admin_header_style(), below.
add_custom_image_header( '', 'yourtheme_admin_header_style' );
// … and thus ends the changeable header business.
// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array (
'berries' => 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() {
?>
<style type="text/css">
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
endif;
?>
对我来说那是胡闹。 请解释 (That is jibbrish to me. Please Explain)
Ofcourse, this might look jibrish to some of you. This is mostly for theme designers, but we will do our best to break it down. Before we start make sure you copy and paste this code in your code editor, so you can make the changes necessary.
当然，对某些人来说，这可能看起来有些僵硬。 这主要是针对主题设计师的，但是我们会尽力分解它。 在开始之前，请确保您将此代码复制并粘贴到代码编辑器中，以便进行必要的更改。
Note: We are using /images/headers/ as the directory where you will store your default header images.
注意：我们使用/ images / headers /作为存储默认标题图像的目录。
- You start the code out by creating a function yourtheme_setup(). 您可以通过创建一个函数yourtheme_setup()来开始编写代码。
- In line 21, we define the default header image. Note there is a variable %s which is basically a placeholder for the theme directory URI. 在第21行中，我们定义了默认的标题图片。 注意，存在一个变量％s，它基本上是主题目录URI的占位符。
- Line 25 and 26 is where you define the image width and height. By default it is set to 940px wide and 198px high. You can change it by editing those two lines. 第25和26行是定义图像宽度和高度的位置。 默认情况下，它设置为940px宽和198px高。 您可以通过编辑这两行来更改它。
- Starting from line 42, we start registering the default headers. These are the images that will show up as a radio button option in your admin panel. If you need more options then simply follow the format being used. 从第42行开始，我们开始注册默认头。 这些图像将在管理面板中显示为单选按钮选项。 如果您需要更多选项，则只需遵循所使用的格式即可。
- In line 95, we choose the header styling. You do not need to change these settings because you alreadyd efined them in Line 25 and 26. 在第95行中，我们选择标题样式。 您不需要更改这些设置，因为您已经在第25和26行中对其进行了定义。
That is all what you are doing for the theme’s functions.php file. Next we are going to go into how you are going to add this to your theme.
这就是您对主题的functions.php文件所做的一切。 接下来，我们将探讨如何将其添加到主题中。
添加到主题中的代码 (Code to add in your Theme)
This code will most likely go in the theme’s header.php file. You can style it however you like.
此代码很可能会放在主题的header.php文件中。 您可以随意设置样式。
<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->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 : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>
What is this code doing?
这段代码在做什么？
- First, it is checking if it is a single post or a page. It also checks if this post/page has a thumbnail, and whether it is big enough. 首先，它正在检查它是单个帖子还是一页。 它还会检查此帖子/页面是否有缩略图，以及是否足够大。
- If the page is a single page and has a big enough thumbnail, then it displays the post thumbnail specific for that post. 如果页面是单个页面并且具有足够大的缩略图，则它将显示特定于该帖子的帖子缩略图。
- If it is not a single page, or the post thumbnail is not big enough, then it will show the default header. 如果不是一页，或者帖子缩略图不够大，那么它将显示默认标题。
We hope this tutorial was helpful. We got a few emails asking about this tutorial, so we broke the code down from the Twenty Ten theme. If you have any questions, then feel free to ask in the comments.
我们希望本教程对您有所帮助。 我们收到了一些有关本教程的电子邮件，因此我们将代码从“二十十”主题中分解出来。 如果您有任何疑问，请随时在评论中提问。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-enable-custom-header-images-panel-in-wordpress-3-0/
扫一扫
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
