为 Drupal 7 构建一个新主题

主题解释了 Drupal 网站的用户界面 (UI)。虽然主题结构并没有明显的变化,但 Drupal 版本 7 配备了一个新的主题实现方法。本文演示了如何创建一个新的 Drupal 7 主题。
http://www.ibm.com/developerworks/cn/opensource/os-new-drupal-theme/index.html
Drupal 主题的目标是将框架的处理逻辑和设计元素分开。为了做到这一点,Drupal 采用了一个复杂的主题系统,其中包括主题、主题引擎和挂钩。主题组件与 Drupal 核心系统和模块设计元素配合,创建具有独特外观的用户界面(单独 Drupal 页面和表单)。由于将 Drupal 的业务逻辑从它的表示逻辑中分离出来,使代码更易于维护,并且您无需重写代码层就可以交换出主题层的实现,反之亦然。图 1 说明了 Drupal 框架结构。
图 1. Drupal 框架结构
Drupal 框架结构的图形表示
主题显示 Drupal 核心通过底层主题引擎从数据库中提取的数据,主题引擎被用作 Drupal 核心和主题模板之间的接口。
主题引擎
主题引擎 是一种手段,主题通过此引擎与 Drupal 核心进行交互。有几个主题引擎可以与 Drupal 配合使用。最流行的是:
PHPTemplate
XTemplate
Plain PHP
Smarty Engine
其他 Drupal 主题引擎
与 Drupal 配合的还有其他几个常用主题引擎。它们包括PHPTAL、wgSmarty、Zengine、Awesomengine、ETS、Haml、XSLengine 和 Peroxide。不过,本文使用 PHPTemplate 引擎,因为它是默认的主题引擎,并且是与 Drupal 7 一起打包的惟一主题引擎。
如果您愿意,您也可以使用自己的自定义引擎。
PHPTemplate 主题引擎是默认的 Drupal 引擎,也是本文中所使用的主题引擎,它使用名称类似于 filename.tpl.php 的单独主题文件作为 Drupal 的 theme_filename() 函数的主题。这些文件每个均包含面向动态数据的 HTML 框架以及 PHP 语句。因此,凭借 PHP 的基本知识,利用 PHPTemplate 就能轻松创建高级主题,因为这只涉及极少量的代码。
回页首
规划主题
主题是由若干个文件组件。文件的数量取决于主题的复杂性。一个主题可能只有三个文件,也可能会有几十个文件,包括放置在主题目录内若干个文件夹中的图形元素和各种脚本。图 2 显示了在主题主文件夹中预期可以找到的典型文件描述(颜色、图像、徽标、模板、样式和 PHP 文件)。
图 2. 主题文件夹的典型内容
屏幕截图显示主题文件夹中的典型文件夹和文件
并非所有这些文件都是一个主题所需要的,许多人认为级联样式表 (CSS) 文件是绝对必需的,但某些主题甚至连 CSS 也没有。通过了解这些主题文件的用法,主题结构以及它的工作方式会变得更加清晰。让我们再看看主题目录中的一些文件,并探讨它们在整体主题中的功能。
.info 文件
.info 文件是一个必需的文件:Drupal 必须包括它,才能看到主题。.info 文件告诉 Drupal 主题的内部名称。例如,如果这个文件的名称是ibmtheme.info,那么 Drupal 给这个主题的名称将是 ibmtheme。如果您的主题使用 JavaScript、元数据、样式表或块区域等元素,您也必须在 .info 文件中定义它们。一切都是可选的。在 清单 1 中,Bartik 主题的 .info 文件内容解释了这种行为。
清单 1. Bartik 主题的 .info 文件内容
; $Id: bartik.info,v 1.5 2010/11/07 00:27:20 dries Exp $

name = Bartik
description = A flexible, recolorable theme with many regions.
package = Core
version = VERSION
core = 7.x

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0

; Information added by drupal.org packaging script on 2011-01-05
version = "7.0"
project = "drupal"
datestamp = "1294208756"
.tpl.php 模板文件
主题目录包含若干个模板文件,其文件名如 xxx.tpl.php。这些模板文件包含主题的 Extensible HTML (XHTML) 标记和 PHP 变量。在某些情况下,您可以编写它们,以提供其他类型的数据输出,如 RSS。一般来说,每个 Drupal 主题的 tpl.php 文件都进行编码,以处理特定的数据输出:在模板文件中嵌入复杂的逻辑有可能带来混乱,并事与愿违,因为这样做有可能使它们难以维护。理想的场景是让它们只包含简单的 XHTML 标记和 PHP 变量。
清单 2 显示 node.tpl.php 文件的内容,该文件描述核心 Garland 主题的基本节点的输出。
清单 2. Garland 主题 node.tpl.php 文件的内容

<?php
// $Id: node.tpl.php,v 1.24 2010/12/01 00:18:15 webchick Exp $
?>
<?php
 
print $user_picture;
?>
<?php
 
print render($title_prefix);
?>
<?php
 
if (!$page):
?>
<a href="<div class="codeblock"><pre><code><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br />&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #007700">print </span><span style="color: #0000BB">$node_url</span><span style="color: #007700">; <br /></span><span style="color: #0000BB">?&gt;</span></span></code></pre></div>" rel="nofollow"><div class="codeblock"><pre><code><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br />&nbsp;</span><span style="color: #007700">print </span><span style="color: #0000BB">$title</span><span style="color: #007700">; <br /></span><span style="color: #0000BB">?&gt;</span></span></code></pre></div></a>
<?php
 
endif;
?>
<?php
 
print render($title_suffix);
?>
<?php
 
if ($display_submitted):
?>
<div class="codeblock"><pre><code><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br />&nbsp;</span><span style="color: #007700">print </span><span style="color: #0000BB">$submitted <br />?&gt;</span></span></code></pre></div>
<?php
 
endif;
?>
<div class="codeblock"><pre><code><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #FF8000">// Hide the comments and links now so you can render them later.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #0000BB">hide</span><span style="color: #007700">(</span><span style="color: #0000BB">$content</span><span style="color: #007700">[</span><span style="color: #DD0000">'comments'</span><span style="color: #007700">]);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #0000BB">hide</span><span style="color: #007700">(</span><span style="color: #0000BB">$content</span><span style="color: #007700">[</span><span style="color: #DD0000">'links'</span><span style="color: #007700">]);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; print </span><span style="color: #0000BB">render</span><span style="color: #007700">(</span><span style="color: #0000BB">$content</span><span style="color: #007700">);<br />&nbsp;&nbsp;&nbsp; <br /></span><span style="color: #0000BB">?&gt;</span></span></code></pre></div>



<div class="codeblock"><pre><code><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br />&nbsp;</span><span style="color: #007700">if (!empty(</span><span style="color: #0000BB">$content</span><span style="color: #007700">[</span><span style="color: #DD0000">'links'</span><span style="color: #007700">])): <br /></span><span style="color: #0000BB">?&gt;</span></span></code></pre></div>
  <div class="codeblock"><pre><code><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br />&nbsp;</span><span style="color: #007700">print </span><span style="color: #0000BB">render</span><span style="color: #007700">(</span><span style="color: #0000BB">$content</span><span style="color: #007700">[</span><span style="color: #DD0000">'links'</span><span style="color: #007700">]); <br /></span><span style="color: #0000BB">?&gt;</span></span></code></pre></div>
<div class="codeblock"><pre><code><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br />&nbsp;</span><span style="color: #007700">endif; <br /></span><span style="color: #0000BB">?&gt;</span></span></code></pre></div>

<div class="codeblock"><pre><code><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br />&nbsp;</span><span style="color: #007700">print </span><span style="color: #0000BB">render</span><span style="color: #007700">(</span><span style="color: #0000BB">$content</span><span style="color: #007700">[</span><span style="color: #DD0000">'comments'</span><span style="color: #007700">]); <br /></span><span style="color: #0000BB">?&gt;</span></span></code></pre></div>

template.php 文件
template.php 文件中通常包含主题输出的所有条件逻辑和数据处理。您也可以使用 template.php 文件使主题的 .tpl.php 文件保持整洁。因为这是一个 PHP 文件,强制以 PHP 打开

<?php
 标记作为内容的开始,但您可以省略结束标记。
其他文件
有几个其他元素对于主题正常运作不是必需的,但它们可能会在许多主题中出现。这些元素包括徽标和屏幕截图、theme
-settings.php 文件和 color.inc 文件:
徽标和屏幕截图。这些元素是建议使用的元素,但对于主题的正常运作并不是绝对必要的。然而,如果您想将主题贡献到 Drupal 存储库,那么屏幕截图就是一个强制要求的元素。图 3 是 Garland 主题的屏幕截图。
图 3. Garland 主题的屏幕截图
Garland 主题的屏幕截图
theme
-settings.php。除了搜索或任务徽标等一般设置外,该文件还显示 UI 管理设置或高级特性。请查看针对 Garland 主题的该文件内容,如 清单 3 所示,说明了最终显示。
清单 3. Garland theme
-settings.php 文件的内容
<?php
// $Id: theme-settings.php,v 1.3 2010/09/04 15:21:09 dries Exp $

/**
 * @file
 * Theme setting callbacks for the garland theme.
 */

/**
 * Implements hook_form_FORM_ID_alter().
 *
 * @param $form
 *   The form.
 * @param $form_state
 *   The form state.
 */
function garland_form_system_theme_settings_alter(&$form, &$form_state) {

 
$form['garland_width'] = array(
   
'#type' => 'radios',
   
'#title' => t('Content width'),
   
'#options' => array(
     
'fluid' => t('Fluid width'),
     
'fixed' => t('Fixed width'),
    ),
   
'#default_value' => theme_get_setting('garland_width'),
   
'#description' => t('Specify whether the content will wrap to a fixed
       width or will fluidly expand to the width of the browser window.'
),
   
// Place this above the color scheme options.
   
'#weight' => -2,
  );
}
最终显示的将是一个类似于 图 4 的表单。
图 4. 主题设置页面
主题设置页面的屏幕截图
color
.inc。color. module 的功能是允许管理员彻底改变主题的配色方案,而无需手动修改样式表。如果您的主题需要配色模块支持,那么您必须包括一个 color 目录,其中包含 color.inc 文件和各种支持文件。
回页首
构建主题
构建主题有两个基本方法:您可以从头开始构建它,您也可以修改一个现有主题。在本文中,您将从头开始构建一个新主题。话虽如此,您还是应该准备好现有主题的内容,以便了解结构。
创建目录结构
首先,创建一个包含主题文件的目录。放置该目录的最佳位置是 sites
/all/themes 目录。将该目录命名为一个惟一的名称以描述您的主题:该名称不应该包含空格。
虽然不是强制性的,但是这对于为样式表(CSS 文件)、图像和脚本(如果您的主题使用它们)创建子目录是有帮助的。这样做有助于保持结构整洁。
回页首
构建
.info 文件
.info 文件只是一个包含数据的文本文件,通常是描述主题的结构、内容和配置所需要的参数。在该文本文件中,每一行都有一个键值对,值放在等号 (=) 的右边,键放在等号的左边。清单 4 提供了一个示例。
清单 4. 来自 Garland 主题的
.info 文件的示例内容
; $Id: garland.info,v 1.10 2010/11/07 00:27:20 dries Exp $
name = Garland
description
= A multi-column theme that can be configured to modify colors and
   switch
between fixed- and fluid-width layouts
package
= Core
version
= VERSION
core
= 7.x
stylesheets
[all][] = style.css
stylesheets
[print][] = print.css
settings
[garland_width] = fluid

; Information added by drupal.org packaging script on 2011-01-05
version
= "7.0"
project = "drupal"
您可以在一行的开头使用分号 (;),以添加注释。使用方括号 ([]) 时,是为了创建关联值的数组。让我们详细介绍在 .info 文件中必须或有可能包含的元素。
名称
name 值是必需的。它应该是一个人类可读的名称,必须以字母字符开始。名称的限制与 PHP 中构成函数的限制相同,因为 Drupal 将它用作同样的用途。因此,该名称可以包含数字和下划线
(_),但没有连字符 (-)、空格或标点符号。下面是语法:
name
= Garland
描述
description 键是建议使用的,它应该只是主题的简要说明。您在此处输入的描述出现在主题的选择或 Appearance 页面。下面是其语法:
description
= A multi-column theme that can be configured to modify colors
  
and switch between fixed- and fluid-width layouts
屏幕截图
screenshot 键是可选的。它的功能是告诉 Drupal 在哪里能找到新主题的缩略图。Appearance 页面上也将显示缩略图。如果
.info 文件中没有包含这个键,Drupal 将调用默认主题目录中的 screenshot.png 文件。如果您决定调用的缩略图文件名称不是 screenshot.png,或者,如果您将该文件放置主题主目录以外的目录,您将需要包括这个键。下面是其语法:
screenshot
= /images/screenshot.png
要创建一个屏幕截图,只需在浏览器中捕获完整的主题图像。然后,裁剪图像并将其尺寸调整为 294 x219 像素,将它保存为 screenshot
.png。把这个文件和 .info 文件放在同一文件夹中。
版本
尽管许多流行的主题都包括 version 关键,但我们并不鼓励使用它。如果你打算将主题托管在 Drupal 主题存储库,就没有必要包括 version,因为当一个发布被打包用于下载时,drupal
.org 会自动添加版本字符串。否则,您可以包括自己喜欢的任何版本字符串。下面是其语法:
version
= 1.0

core 键是必需的值。在所有目前受支持的 Drupal 版本中,您必须说明您的模块和主题所兼容的 Drupal 版本。在这里设置的值将与 Drupal Core Compatibility 常数(可以在
include/bootstrap.inc 文件中找到)兼容;如果没有找到匹配,则 Drupal 将禁用主题。下面是该常数的语法:
<?php
define
('DRUPAL_CORE_COMPATIBILITY', '7.x')
?>

drupal.org 打包脚本会根据每一个发布节点上的 Drupal 核心兼容性设置来自动设置这个值(如果您贡献您的主题)。
引擎
engine 键表示您的主题所使用的主题引擎种类。在大多数情况下它是必需的。如果您在 .info 文件中没有提供 engine,Drupal 假定主题是一个通过 .theme 文件实现的独立主题。在 Drupal.org 库中找到的大多数主题使用默认的 PHPTemplate 引擎,该引擎与 Drupal 核心一起打包。下面是其语法:
engine = phptemplate
基础主题
如果您的主题是另一个主题的子主题,那么就一定要声明其 base theme,以启用主题继承。换句话说,子主题中将可以使用基础主题 (base theme) 的文件资源。您需要输入基础主题的内部机器可读名称。下面是其语法:
base theme = garland
区域
创建新的主题区域
您希望能够在 Blocks 管理页面上编辑的页面的任何部分,都需要成为一个区域。通常情况下,这个区域包括标题、右侧栏、内容区和页脚。您必须在 .info 文件中引入您的所有区域。否则它们对于 Drupal 而言并不存在。
regions 键定义主题可用的块区域。您必须明确定义 regions 键,然后定义在方括号中的内部机器可读名称。之后,您必须将人类可读名称定义为适当的值。下面是其语法:
regions[highlighted] =Mission Statement
如果您选择不定义区域,在 Drupal 7 主题中假定使用以下值:
regions[header] = Header
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[footer] = Footer
您可以根据自己的特定需求覆盖这些值。如果要这样做,您必须声明该行。下面是语法:
regions[highlighted] =Mission Statement
Features
您可以在主题的配置页面上切换各种页面元素。在主题配置页面上所显示的复选框由 features 键控制(见 图 5)。因此,对于主题没有定义或使用的元素,您可以禁止显示其复选框。省略一个条目,就会禁止显示该特性的复选框;如果您没有定义任何特性,那么所有复选框都将显示为假定的默认值。
图 5. 主题特性设置页面
主题特性设置页面的复选框屏幕截图
清单 5 显示 features 键的所有可用元素。
清单 5. 在 .info 文件中的主题特性条目
features[ ] = logo
features[ ] = name
features[ ] = slogan
features[ ] = node_user_picture
features[ ] = comment_user_picture
features[ ] = favicon
features[ ] = main_menu
features[ ] = secondary_menu
样式表
Drupal 主题曾经默认使用 style.css。然而,在当前版本中,如果未在 .info 文件中指定 style.css,则主题不再默认为 style.css。此外,您可以通过 .info 文件添加新的样式表。下面是其语法:
stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css
脚本
在主题的 template.php 文件中,通过调用 drupal_add_js() 等函数来包括 JavaScript 文件,这曾经是常见的做法。然而,在 Drupal 7 中,只有当您在 .info 文件指定 script.js 时,才会包括该文件。下面是其语法:
scripts[] = scripts/myscript.js
PHP
您在这里定义的字符串将是主题所支持的最低 PHP 版本。默认值来自 DRUPAL MINIMUM PHP 常数(位于 includes/bootstrap.inc 文件):

<?php
define
('DRUPAL_MINIMUM_PHP', '5.2.4')
?>

您可以更改此值,但不需要添加字符串。下面是其语法:
php = 5.2.4
默认的 .info 值
.info 文件中包含 Drupal 为每个已安装主题假设的默认值。如果在 .info 文件中没有定义这些值,Drupal 强制主题使用默认值。但是请注意,这些值应用为一个组。这意味着,如果重写一行,如:
regions[sub_header] = Sub-header
您将需要重新定义默认区域的其余部分;否则,它们将被省略。这条规则也适用于样式表。即使样式表在技术上并不是在一个组中进行定义的,但如果在 .info 文件中定义了另一个样式表,您必须再次重新定义 style.css;否则,它将不会被包括在内。
在 清单 6 中的键和值是 Drupal 7 主题的默认值。
清单 6. 默认的 .info 值
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[highlighted] = Highlighted
regions[help] = Help
regions[page_top] = Page Top
regions[page_bottom] = Page Bottom

engine = phptemplate

features[ ] = logo
features[ ] = name
features[ ] = slogan
features[ ] = node_user_picture
features[ ] = comment_user_picture
features[ ] = favicon
features[ ] = main_menu
features[ ] = secondary_menu

screenshot = screenshot.png
回页首
构建 page.tpl.php 文件
现在,研究典型的 page.tpl.php 文件的内容。图 6 中的图像来自 Garland 主题,显示了源代码在浏览器中的样子。
图 6. 在浏览器中的 page.tpl.php 源代码
在浏览器中显示 page.tpl.php 源代码的屏幕截图
若您更仔细地查看,page.tpl.php 模板只是一个简单的 HTML 页面,其中有大量 PHP 语句。很方便,已经为 Drupal 定义了大部分 PHP 元素,您需要做的就是按需要放置它们。
注:链接 http://drupal.org/node/190815 [Core Templates] 将为您提供 page.tpl.php 模板可用的变量列表。
对基本页面元素添加变量
有若干个变量可用于构建 page.tpl.php。选择包括哪些变量,取决于您想在主题中实现的功能。例如,如果您选择在您的网页上要有面包屑,请添加 $breadcrumbs 变量。
在 page.tpl.php 中最常见的变量是:
$site_name
$logo(通过主题设置标志上传的徽标;仅在实现徽标主题特性时才有用)
$title(页面标题)
$main_menu
$secondary_menu
$breadcrumbs(导航辅助,当用户更深入网站时留下一串参考链接)
Drupal 管理也有相关的变量:
$tabs(用于编辑或查看管理菜单等的菜单;经常由模块使用)
$messages
$action_links
其他一些有用的变量是:
$base_path(站点 root 的路径)
$front_page(站点首页的路径)
$directory(您的主题的路径)
使用 Render 应用程序编程接口 (API) 插入变量,如下:

<?php
 
print render($tabs);
?>

如果您的 PHP 和 HTML 技能都较高,您显然可以通过观察示例的构建方式,然后使用允许的变量来明显创建自己的卓越主题。
回页首
构建其他模板文件
打印或渲染
有些变量需要使用 render() 函数显示,而其他变量可以简单地打印。如果数组中包含了在 page.tpl.php 参考页(见 参考资料 中的链接)中列出的变量,那么您需要使用 render() 方法。否则,您可以打印该变量 (

<?php
 
print $variable;
?>

)。
随 Drupal 核心提供的还有其他可用的主题文件的默认模板。您可以在 Drupal 站点(见 参考资料 中的链接)找到它们的列表。对于 page.tpl.php 文件,要轻松构建属于自己的文件,最佳方式是找到一个核心文件,观察它是如何组成的,然后再构建您自己的。访问 Drupal 站点将为您指出允许在任何主题文件中使用的变量。
回页首
style.css 文件
在一个普通的静态 HTML 页面中,您必须在页头中包括一个指针,以说明用于页面显示的样式表的位置。指针看起来像这样:

如前所述,您可以将新的样式表添加到一个主题,也可以覆盖默认样式。在这两种情况下,你必须在 .info 文件中输入主题样式表。样式表中有什么呢?您对 CSS 类所使用的模块化方法,与 Drupal 核心对框架的标准页面元素所使用的模块化方法相同。即使主题开发人员可以创建自己的类,但在整个 Drupal 站点有许多类。如需要有关 Drupal 7 核心中的类的完整列表,请参阅 参考资料。
回页首
结束语
本文为您概述了主题系统在 Drupal 7 中的运作方式,还介绍了 Drupal 主题的多个组件,以及如何使用默认的 PHPTemplate 主题引擎从头开始构建一个新的主题。您已经观看了每个组件主题文件的典型结构,现在应该了解了创建自定义主题所需要的技巧。开始做您喜欢的事情吧!