Archive Page 4

Page 4 of 13« First...«23456»...Last »

WordPress Themes 设计手记（五）

9 Comments
May 7th, 2007 by Xu Yiyang

4.2    后台管理页面

贫僧先来介绍一下今天的主角——Wordpress Theme Toolkit 和 Unnamed 0.4.1：Wordpress Theme Toolkit 是著名 WordPress 达人 Ozh 开发的专用于编写 WordPress 模板后台管理页面的工具（Ozh 开发了很多经典且实用的WordPress插件和工具，施主可以在这里找到更多好玩的东西）。尽管已经有很久没有更新，但经过测试，发布于九个月前的、将该工具性能压榨殆尽的 Unnamed 0.4 至今仍能非常稳定的工作在 WordPress 2.3-Alpha 平台下，足见 Theme Toolkit 的经典程度。

施主们先来看看 Unnamed 0.4 的后台管理页面截图。

对比 Unnamed 1.2 的后台管理页面，施主们可以发现，这九个月来，Unnamed 虽然一直在进步，但其基本框架是在 0.4 时代就定型了的。从Unnamed 0.5 起，贫僧开始自己编写后台页面，代码最多时达到700余行，而 0.4 的后台管理页面只有区区200行代码，简练易读。贫僧认为，对于初学者，Theme Toolkit 提供的方便而强大的开发环境可以让施主事倍功半。

OK，现在我们来介绍 Theme Toolkit 的使用方法。

1. 调用themetoolkit.php
首先，我们利用下面这条语句将所需的themetoolkit.php加入functions.php中：
<?php include(dirname(__FILE__).'/themetoolkit.php'); ?>

然后，我们来看如何在 functions.php 定义模板所需要的功能：
<?php
themetoolkit(
'mytheme', array(
'option1' => 'Text for Option One',
'option2' => 'Text for Option Two',
'option3' => 'Text for Option Two',
),
__FILE__
);
?>

其中，mytheme 为主题的别名，这无关紧要，数组 array() 中的内容才是关键，第一部分 “option1”为模板某个选项的名称，而 “=>” 之后的部分定义了 option1 的说明文字、样式（比如单选框、复选框、输入框和文本框，不支持下拉选框）和选项状态（比如enable或者disable）。

2. 单选框 （radio）

来看Unnamed 0.4中控制Live Search选项的代码：
‘live_search’ => __(’Live Search’,'unnamed’).’ {radio|enable|’.__(’Enable Live Search(Default)’,'unnamed’).’|disable|’.__(’Disable Live Search’,'unnamed’).’} ## ‘

这是一个典型的单选框应用，__(’…’,'unnamed’) 为本地化代码请直接忽略，我们将代码化简一下得到：
‘live_search’ => ‘Live Search {radio|enable|Enable Live Search(Default) |disable| Disable Live Search} ‘

这便是调用单选框的基本格式，即：
‘选项名称’ => ‘选项标题 { radio | 选项1 | 说明文字1 | 选项2 | 说明文字2 }’

3. 复选框 （checkbox）

复选框的调用方法基本类似：
‘选项名称’ => ‘选项标题 { checkbox | 选项1 | 说明文字1 | 选项2 | 说明文字2 | 选项3 | 说明文字3… }’

4. 输入框 （input field）

施主可以在Unnamed 0.4中找到如下代码，它通过输入框来定义Unnamed文字字体的大小：
‘font_size’ => __(’Text Size’,'unnamed’).’ ## ‘.__(’Type in pixel size of the text. ‘,’unnamed’)

我们很容易看出输入框的调用格式为：
‘选项名称’ => ‘ 选项标题 ## 说明文字 ‘

5. 文本框 （textarea）

文本框的调用格式为：
‘选项名称’ => ‘选项标题 {textarea|行数|列数} ## 说明文字’

6. 设置默认值
我们需要为各个功能设定它们的默认值，开看看Unnamed是怎么做的：

if (!$unnamed->is_installed()) {
$set_defaults['live_search'] = ‘enable’;
$set_defaults['ajax_commenting'] = ‘enable’;
$set_defaults['sliding_menu'] = ‘enable’;
$set_defaults['header'] = ‘header’;
$set_defaults['sidebar_align'] = ‘right’;
$set_defaults['width_type'] = ‘3′;
$result = $unnamed->store_options($set_defaults);
}

注意$unnamed为模板的别名，即前面的”mytheme”，代码很好理解，就不多解释了。

7. 利用函数控制和输出功能
在了解如何调用各种样式来控制模板功能之后，我们需要将这些功能添加到模板中去，我们需要自己编写一些简单的函数来控制和输出这些功能。

比如，当 Live Search 选项为 enable 时，模板的 Live Search 可用，否则禁用。在模板中，这就相当于是否加载 livesearch.js。九个月前的贫僧是这样做的：

在 functions.php 中，定义 unnamed_livesearch() 函数，判断 live_search 选项是否为 enable，若是，则返回真值。

function unnamed_livesearch() {
global $unnamed;
if ($unnamed->option['live_search'] == “enable”) {
return true;
} else {
return false;
}
}

在 header.php 中施主可以看到如下代码，当 live_search 为 enable 时，即 unnamed_livesearch() 的值为真时，调用livesearch.js.php，Live Search 功能被加载，否则该功能被禁用。
<?php if(function_exists('unnamed_livesearch') and unnamed_livesearch()) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/livesearch.js.php"></script><?php } >

实际上施主还可以写的更简单一些。

施主还可以利用 Theme Toolkit 来改变模板的样式，比如 header 图片，字体，色彩，宽度等等，具体施主可以看unnamed_options_css () 这个函数是怎么写的，由于和上一节 Custom Image Header 类似，在此就不赘述了。

8. 其他
Theme Toolkit 会自动生成删除选项，令施主们没有后顾之忧。施主还可以对themetoolkit.php做一些改动，让它符合自己的特定需求。如果有兴趣自己编写后台管理页面，贫僧强烈建议施主去读 Codex 上的 Plugin API 及其他相关文章。

参考文献：

  1. Wordpress Theme Toolkit
, , .

海报一张

13 Comments
May 1st, 2007 by Xu Yiyang

这是 Unnamed 1.2 的后台管理页面截图（点击放大），这个版本会在WordPress 2.2正式发布后放出。祝各位五一休息好。

点击浏览图片

, , .

WordPress Themes 设计手记（四）

9 Comments
April 24th, 2007 by Xu Yiyang

题外话：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。

, , .

WordPress Themes 设计手记（三）

7 Comments
April 12th, 2007 by Xu Yiyang

3.2    Index.php
以WordPress默认模板的index.php为例。我们先来看看它的结构：首先，通过<?php get_header(); ?>获得头信息；然后是一个循环体（The Loop，不知这样叫对不对）；最后通过<?php get_sidebar(); ?>和<?php get_footer(); ?>加载侧边栏和页脚。

熟悉The Loop的用法能够让你随心所欲的控制文章的输出，因此我们来着重了解一下The Loop：

WordPress使用一个循环体来控制正文内容的显示，文章将按循环体内代码所定义的格式输出到当前页面上。部分模板标签必须在循环体内使用，如每篇文章的标题（the_title()），时间（the_time()）和分类（the_category()） 。

简单表示如下：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
…找到相关内容则按格式输出正文…
<?php endwhile; else: ?>
…否则输出错误信息…
<?php endif; ?>

The Loop的用法非常灵活，比如你可以将其和分类标签结合起来以限定某个页面或某一部分只显示某个或几个分类的内容，这就是一个最简单的Asides。有兴趣的自己不妨找找相关插件或模板来看看。我在这里仅举两个简单的例子。比如，如果你想要某一页面只显示分类x（x代表该分类的ID）的内容，你可以这样写：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( in_category('x') ) { ?>
…正文内容…
<?php } else { ?>
…其他内容…
<?php } ? >
<?php endwhile; else: ?>
…出错信息…
<?php endif; ?>

进一步，来看一个Asides的例子。假设你需要在某个页面的某一位置（比如侧边栏）输出某个分类的前x篇文章，你可以这样做：

<?php $temp_query = $wp_query; ?>
<?php query_posts('category_name=分类名字&showposts=x'); ?>
<?php while (have_posts()) : the_post(); ?>
…Asides内容…
<?php endwhile; ?>
<?php $wp_query = $temp_query; ?>

在这里，我们在Asides的循环体重使用变量temp_query来代替wp_query，以避免同正文部分的循环体发生冲突。更多的例子你可一在文后的参考文献中找到，代码大同小异。另外Durable的index.php也是一个不错的样板。

3.3    Sidebar.php
侧边栏的内容没有太多好说的，记住如果你想自己的侧边栏在不同页面显示不同内容，可以用3.1中提到的方法。我倾向于让用户使用Sidebar widgets或SBM(Sidebar Modules)来自行定义侧边栏的内容，这就是为什么Unnamed默认侧边栏内容偏少的原因。

在这里简单解释一下如何让主题支持Sidebar Widgets或SBM：
首先你需要建立一个functions.php，这个文件通常用于控制主题的后台内容，包括一些后台功能和管理页面。

然后在functions.php中加入下述代码：
if (function_exists('register_sidebar')) { register_sidebars(x,array('name'=>'Sidebar %d')); }

x代表sidebar的数量。

最后，修改Sidebar.php，以双侧边栏为例：


<div id="sidebar">
<div class="left-sidecolumn">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
<li> … </li>
<?php endif; ?>
</ul>
</div>
<div class="right-sidecolumn">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
<li> … </li>
<?php endif; ?>
</ul>
</div>
</div>

参考文献：

  1. The Loop
  2. Widgetizing Themes
, , .

Unnamed Special Edition 1.0

6 Comments
April 9th, 2007 by Xu Yiyang

unnamed_se_screenshot.jpg

依照惯例，Special Edition是unnamed的精简稳定版本，包括原版的核心功能，并且有着更好的兼容性和更小的体积（53Kb）。这个版本用于替代远古时代的Special Edition 0.5并且不再支持WordPress 2.0.x。

最重要的，我希望Special Edition的全新设计能够为各位带来不一样的体验。

This is a theme modification, containing the core functions of unnamed, light weighted and with better compatibility. This version requires WordPress 2.1+.

Unnamed Project Page

Download Unnamed Special Edition 1.0

, , , .
Page 4 of 13« First...«23456»...Last »