为 Drupal 7 构建一个新主题

sumi2005 2014-01-16

展开全文

Timi Ogunjobi 的照片 Timi Ogunjobi 是一名作者兼 Web 应用程序开发人员。他是 Xceedia Limited 的 CEO，这是一家致力于 Web 和移动应用程序开发的软件工程公司。他还是 3 部 Drupal 图书及其他几本书籍的作者。

2012 年 6 月 26 日

主题解释了 Drupal 网站的用户界面 (UI)。虽然主题结构并没有明显的变化，但 Drupal 版本 7 配备了一个新的主题实现方法。本文演示了如何创建一个新的 Drupal 7 主题。

Drupal 主题的目标是将框架的处理逻辑和设计元素分开。为了做到这一点，Drupal 采用了一个复杂的主题系统，其中包括主题、主题引擎和挂钩。主题组件与 Drupal 核心系统和模块设计元素配合，创建具有独特外观的用户界面（单独 Drupal 页面和表单）。由于将 Drupal 的业务逻辑从它的表示逻辑中分离出来，使代码更易于维护，并且您无需重写代码层就可以交换出主题层的实现，反之亦然。图 1 说明了 Drupal 框架结构。

图 1. 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  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 $
?>
<div id="node-<?php print $node->nid; ?>" 
  class="<?php print $classes; ?>"<?php print $attributes; ?>>

  <?php print $user_picture; ?>

  <?php print render($title_prefix); ?>
  <?php if (!$page): ?>
    <h2<?php print $title_attributes; ?>><a href="<?php 
       print $node_url; ?>"><?php print $title; ?></a></h2>
  <?php endif; ?>
  <?php print render($title_suffix); ?>

  <?php if ($display_submitted): ?>
    <span class="submitted"><?php print $submitted ?></span>
  <?php endif; ?>

  <div class="content clearfix"<?php print $content_attributes; ?>>
    <?php
      // Hide the comments and links now so you can render them later.
      hide($content['comments']);
      hide($content['links']);
      print render($content);
    ?>
  </div>

  <div class="clearfix">
    <?php if (!empty($content['links'])): ?>
      <div class="links"><?php print render($content['links']); ?></div>
    <?php endif; ?>

    <?php print render($content['comments']); ?>
  </div>

</div>

template.php 文件

template.php 文件中通常包含主题输出的所有条件逻辑和数据处理。您也可以使用 template.php 文件使主题的 .tpl.php 文件保持整洁。因为这是一个 PHP 文件，强制以 PHP 打开 <?php 标记作为内容的开始，但您可以省略结束标记。

其他文件

有几个其他元素对于主题正常运作不是必需的，但它们可能会在许多主题中出现。这些元素包括徽标和屏幕截图、theme-settings.php 文件和 color.inc 文件：

徽标和屏幕截图。这些元素是建议使用的元素，但对于主题的正常运作并不是绝对必要的。然而，如果您想将主题贡献到 Drupal 存储库，那么屏幕截图就是一个强制要求的元素。图 3 是 Garland 主题的屏幕截图。
图 3. 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  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，因为当一个发布被打包用于下载时，会自动添加版本字符串。否则，您可以包括自己喜欢的任何版本字符串。下面是其语法：

version = 1.0

核

core 键是必需的值。在所有目前受支持的 Drupal 版本中，您必须说明您的模块和主题所兼容的 Drupal 版本。在这里设置的值将与 Drupal Core Compatibility 常数（可以在 include/bootstrap.inc 文件中找到）兼容；如果没有找到匹配，则 Drupal 将禁用主题。下面是该常数的语法：

<?php
define('DRUPAL_CORE_COMPATIBILITY', '7.x')
?>

打包脚本会根据每一个发布节点上的 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 模板只是一个简单的 HTML 页面，其中有大量 PHP 语句。很方便，已经为 Drupal 定义了大部分 PHP 元素，您需要做的就是按需要放置它们。

注：链接 http:///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 页面中，您必须在页头中包括一个指针，以说明用于页面显示的样式表的位置。指针看起来像这样：

<link rel="stylesheet" type="text/css" href="/model.css" />

如前所述，您可以将新的样式表添加到一个主题，也可以覆盖默认样式。在这两种情况下，你必须在 .info 文件中输入主题样式表。样式表中有什么呢？您对 CSS 类所使用的模块化方法，与 Drupal 核心对框架的标准页面元素所使用的模块化方法相同。即使主题开发人员可以创建自己的类，但在整个 Drupal 站点有许多类。如需要有关 Drupal 7 核心中的类的完整列表，请参阅参考资料。