Xu Yiyang

WordPress Themes 设计手记（四）

题外话：WordPress团队最近干了两件很2的事情，其一是将一个极不成熟的tag系统引入WordPress 2.2。仅从模板开发者的角度来说，该tag系统与UTW的兼容性较差，基本上支持了WordPress内生的tag就等于放弃对UTW的支持（屠杀啊），而该tag系统不过是原分类系统的畸形衍生品，功能上实在不敢恭维。其二是他们又把tag给去掉了，说是要到2.3的时候再推出，这就是对UTW判了死缓。对贫僧个人而言，这意味着刚刚加入对这个破玩艺支持的Unnamed 1.2作废了，搞得贫僧很没有兴致。这些行为实在是太2了，连Blogging Pro也说：

I would rather see the team take their time, delay a release until June with the tagging feature properly implemented and tested, rather than removing it due to potential issues.

OK，让我们进入正题。

四、杂项

4.1    Custom Image Header

Custom Image Header 是WordPress 2.1增加的一个新功能，支持该功能的主题允许用户自定义Header图片。所以今天贫僧来介绍如何让施主们的WordPress主题支持该牛逼闪闪的功能。本文中涉及的相关代码可以在Unnamed Special Edition 的functions.php中找到。

首先，各位施主请看如下几行代码，它们分别定义了header部分的字体颜色、默认背景图片以及图片尺寸：
define('HEADER_TEXTCOLOR','FFFFFF');
define('HEADER_IMAGE','%s/images/bg_header.jpg');
define('HEADER_IMAGE_HEIGHT',150);
define('HEADER_IMAGE_WIDTH',960);

这段代码告诉我们一个道理：Unnamed SE的header部分字体颜色为白色（FFFFFF），默认背景图片为bg_header.jpg，背景图片尺寸为960*150。

再来看下面这段代码，在这里，函数custom_css()包含了定义主题header样式所需的CSS，它会被输出到模板的头部（如果施主不想在页面头部生成过多代码，可以考虑和Unnamed一样将CSS写入php文件，不过贫僧不推荐这样做，尽管好处大大地，但弊端也很是不少）。

<?php
function custom_css() {
?>
<style type="text/css">
#header {
height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;
background:url(<?php header_image() ?>) transparent repeat top center;
}
<?php if (get_header_textcolor()=='blank' ) { ?>
#header h1, .description {
display:none;
}
<?php } else { ?>
#header h1 a,.description {
color:#<?php header_textcolor() ?>;
}
<?php } ?>
</style>
<?php } ?>

其中，#header部分定义了header图片的高度（HEADER_IMAGE_HEIGHT）和url（header_image()）；而后一部分则判断header的文字部分是否需要隐藏；header_textcolor()则用于定义字体颜色。

用户们都喜欢所见即所得，所以，为用户着想的施主们需要在管理页面中设置当前header样式的预览。为了与模板中的样式保持一致，我们用admin_header_style()定义预览部分的样式（代码意义与前一段基本相同）：

<?php function
admin_header_style() {
?>
<style type="text/css">
#headimg {
background-image:url(<?php header_image() ?>);
background-repeat:repeat !important;
height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;
width:<?php echo HEADER_IMAGE_WIDTH; ?>px;
margin:0 0 10px;
}
#headimg h1 {
font-size:2.2em;
text-align:left;
margin:0;
padding:45px 0 0 20px;
}
#headimg h1 a {
color:#<?php header_textcolor() ?>;
text-decoration: none;
border-bottom: none;
}
#headimg #desc {
color:#<?php header_textcolor() ?>;
font-size:1em;
text-align:left;
padding:0 0 5px 20px;
}
<?php if ('blank' == get_header_textcolor()) { ?>
#headimg h1,#headimg #desc {
display:none;
}
#headimg h1 a,#headimg #desc {
color:#<?php echo HEADER_TEXTCOLOR ?>;
}
<?php } ?>
</style>
<?php } ?>

最后，我们通过add_custom_image_header()来输出CSS到主题和管理页面的头部。

<?php add_custom_image_header('custom_css', 'admin_header_style'); ?>

这样，当该WordPress主题被激活时，系统会自动加载Custom Image Header管理页面，用户可以通过该页面上传和处理header背景图片。更多内容可以参考/wp-admin/custom-header.php。

This entry is filed under themes, tutorial, Wordpress. You can follow any responses to this entry through RSS 2.0 . You can leave a response, or trackback from your own site.