Drupal的主题制作是个复杂且繁重的工作。即使是一个入门主题，也会充斥着令人迷惑的PHP代码和错综复杂的CSS。一个设计师能做什么？无需担心，从设计草图入手制作主题是完全可行的。本文将一步一步的演示制作自己Drupal主题的过程，从info文件，页面模板，区域一直到CSS。

本文假设你了解一些Drupal术语，具有基本的Drupal安装设置以及主题方面的基本知识。当然，读者还需要知道完成设计稿中可能涉及的HTML和CSS，因为这里只会讲解Drupal相关的编码技巧。

还有一篇《如何根据设计图制作Drupal 6主题》可以作为本文的前传，如题，这篇文章是针对Drupal 6的。

##为什么根据设计图制作主题

一般对Drupal主题的介绍都是从一个现存主题或基主题的定制入手的。首先要面对的问题就是这些主题非常通用。一般都具有左边栏或者右边栏或者两边都有，很多区域，很多的CSS。如果你有这么多需要，那当然是好的，但是这有个直接后果就是，大量的模板文件和CSS让人无所适从。可能有很多的CSS并不需要却不便移除。定制一个这种主题是个非常心烦的过程。

另外一个问题是，这些主题的复杂性让你无法了解Drupal主题的工作方式，无助于用户学习创建自己的主题。我希望读者能从本文获取这方面的知识。

##创建自己的主题

###1. 创建目录结构

首先你需要为新主题创建一个目录。这个目录应该位于sites/all/themes或者sites/yoursite/themes之下，这个路径决定了新主题是为单个站点服务还是服务于所有站点。记得给这个目录起一个唯一的且不包含空格的名字。

为CSS和图片文件创建子目录能让主题目录整洁有序。一般的目录结构如下所示：

--Theme name
----css
----images

###2. 创建.info文件

Drupal6和以后的版本，所有主题都会有一个info文件用来提供一些基本信息。有些信息用于主题管理页面，同时这些信息也决定了主题设置中的可用选项。

Info文件是个简单的文本文件，他的主文件名会被Drupal当作该主题的机读名称使用，例如你命名info文件为yourtheme.info，则这个主题的机读名称就是“yourtheme”。

在info文件里，我们需要用键值对的格式为主题输入信息。其中包含：

• name - 用于人阅读的友好名称

• description - 主题的描述

• core - 对应的Drupal版本

• engine主题使用的主题引擎（一般是phptemplate）。

• regions - 主题为区块提供的可用区域。方括号内的内容是机读名称（例如regions['sidebar_first']）。这些配置会把区域插入到模板文件之中。指定的标签名称会出现在管理界面中为Block指定区域的页面上。

在Drupal 7中，在自定义区域之外，必须包含内容区域。推荐使用Drupal标准名称为侧边栏区域命名（Drupal 7中的sidebar_first以及sidebar_second）。这使得Drupal能够在body标签中加上标记来说明使用了哪些侧边栏（没有/左/右等）。

• features - Drupal 7 主题管理界面中可以开启或者关闭的主题功能（例如指定站点名称，标志等）。只有info文件中列出的功能才能展现在主题管理界面上，并且可以在页面模板中作为变量使用。如果你希望清楚所有特性，留空即可；如要包含所有特性，可以删掉features项。

• stylesheets - 你的CSS文件。第一个方括号用于指定媒体类型(例如stylesheets[all]或者stylesheets[print])。

• scripts - 主题所需的所有脚本（记住Drupal自带jQuery）。

scripts和stylesheet的值是相对于主题目录的（例如sites/yoursite/themes/yourtheme路径会被自动包含）。如果你需要指定一个在主题目录之外的文件，可以参考《info文件说明》来获取包含外部脚本的方法的介绍。

下面是一个info文件示例：

name = My Cool Theme
description = Custom theme for my site
core = 7.x
engine = phptemplate
regions[header] = Header
regions[sidebar_first] = Right sidebar
regions[content] = Content
regions[footer] = Footer

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

features[] = name
features[] = main_menu

《info选项的更多信息》，包含缺省值和一些其他的键，可以在Drupal.org获得。

###3. 理解Drupal模板文件

Drupal主题建立在模板之上，扩展名是.tpl.php。这些文件包含了主题所需的html，以及一些用于指导Drupal工作的变量。

如果想要创建一个非常简单的主题，压根就不需要任何的模板文件。Drupal自带了所有输出的缺省模板，所以你的模板可以只包含CSS。这些缺省内容是随着产生这些内容的模块而来的。例如node的html标记就存在于Node模块的node.tpl.php中；Block的html标记包含在block模块的block.tpl.php文件中。

只有在需要改变缺省行为的情况下才需要创建自己版本的模板文件。否则Drupal会简单的使用缺省文件。修改核心文件绝对不是个好主意。在自己的主题中进行覆盖才是合适的办法。

要创建自己版本的模板文件，可以把缺省版本从模块目录拷贝到自己的主题中。有时候很难确定什么模块做了部分渲染工作，如果真的遇到这种麻烦，可以试试看Theme developer模块。

最重要的模板文件，也可能是最需要修改的文件就是page.tpl.php，这个模板文件包含了页面文件的主体。缺省的page.tpl.php存在于system模块中。缺省文件包含了很多附加的可能无用的选项，所以为了方便，我会根据设计稿编写自己的page.tpl.php。

在Drupal 7中还有一个html.tpl.php模板，这其中包含有全局的文档结构（doctype, head节，body和html标记的开始和结束等）。因为通常这个文件没什么麻烦，所以我们一般不需要理会这个文件。如果你真的要修改他，也可以从system模块中拷贝到自己的主题目录中进行修改。

###3.1. 创建page.tpl.php

要开始创建你的主题文件，可以从新建一个空的名为page.tpl.php的文本文件开始。在这里会存放所有的body内容。这个文件包含三个元素：

• HTML标记（包含div，以及其他的主要结构元素）

• 区域定义

• 其他内容项的变量（例如标题，导航栏）

###3.2 创建区域

任何需要在Drupal界面上通过Block方式进行编辑的部分都需要成为一个区域。在我们的例子里，包含了头部，右边栏，内容区以及页脚。不要忘记所有的区域都需要在Info中进行声明。

但是如果你不声明任何区域，Drupal会提供一系列的缺省区域， 其中包括头部、高亮、帮助、内容、第一边栏以及第二边栏。

在Drupal 7中，变量，包含区域变量都使用Render Arrays插入到最终页面。入门阶段对这个过程无需了解太多，有个例外就是这里包含了把区域以及其他元素输出到页面模板的方法。我会尝试在今后的文章中对这个过程做个详细一些的介绍。

内容区域有一种可能的意外——这个区域可能是空的。你可能不想在没有内容的时候输出任何东西。所以应该在输出之前进行判断这些变量是否存在。

下面的代码用一个条件来判断页脚区域是否有内容，如果有就输出：

<?php if ($page['footer']): ?>    
  <?php print render($page['footer']); ?>
<?php endif; ?>

对每个区域的输出都应该这样，将$page[‘footer’]替换成区域的机读名称（info文件中区域声明的方括号里面的那部分）。content比较特别，因为这个区域总是有内容的，所以无需判断。

容器div在判断之外还是判断之内，取决于你的选择——是否需要在区域为空时让div继续存在？

下面是目前阶段的page.tpl.php文件样本：

<div id="header">

</div>

<div id="wrapper">

  <div id="content">
    <?php print render($page['content']); ?>
  </div>

  <?php if ($page['sidebar_first']): ?>    
    <div id="sidebar">
      <?php print render($page['sidebar_first']); ?>
    </div>
  <?php endif; ?>  
</div>

<div id="footer">
  <?php if ($page['footer']): ?>    
    <?php print render($page['footer']); ?>
  <?php endif; ?>  
</div>

###3.3 为基础的页面元素添加变量

页面除了区域之外还有另外一部分。这一节中我们会为关键的页面元素添加变量，其中包括页面标题以及Drupal导航栏。如同Drupal文档页中的描述一样，page.tpl.php包含了很多的变量。想要主题有什么就包含什么。需要面包屑么？$breadcrumbs变量就可以。

最常见的包括：

• $site_name * $logo(标志是从主题设置中上传的，只有在你实现了logo功能时才有作用) * $title(页面标题) * $main_menu * $secondary_menu * $breadcrumbs 还有一些对Drupal管理员有用的变量： * $tabs (用于编辑/查看管理菜单，通常由模块使用) * $messages * $action_links 另外一些有用的变量： * $base_path：站点根目录 * $front_page：站点首页 * $directory：主题所在路径 变量由Render API插入： <?php print render($tabs); ?> > menu和主题设置的说明 > >主菜单和副菜单是标准的导航菜单块，由系统缺省提供，也是有效的变量。用两种方式都可以插入连接到页面模板。如果想要方便移动，那么用Block比较好，否则可以用硬编码的方式写入模板。 > >显示其他站点元素，例如Logo也可以用这样的逻辑。如果你希望轻易的通过管理界面更改Logo或者关闭主菜单，使用主题设置和相关的变量；否则可以直接写入page模板。 > >另外一个要点是，菜单连接返回的是一个数组。当你把他包含到页面模板时，需要用theme()函数来展开他。 > <?php if ($main_menu): ?> <?php print theme(‘links__system_main_menu’, array(‘links’ => $main_menu, ‘attributes’ => array(‘id’ => ‘main-menu’))); ?> <?php endif; ?>
  这个例子里，因为我不想更换Logo，所以我把Logo作为一个简单的图片来使用，而不是使用$logo变量。这里也展示了$base_path、$directory以及$site_name变量的使用。 注意在Drupal 7中还有$title_prefix以及$title_suffix变量。模块可能使用他们，所以要记得包含在所有的主题中。 还有一点就是有的变量需要用render()函数来显示，而其他的可以简单的打印输出。区别在哪里呢？如果变量是个数组（page.tpl.php参考），需要使用render()；相反的，可以直接用print输出（<?php print $varible; ?>），如果有问题，可以查阅缺省的page.tpl.php来看看缺省模板的实现方式。 现在page.tpl.php文件变成了这样
  /images/logo.png” alt=”<?php print $site_name;?>” height=“80” width=“150” /> <?php if ($main_menu): ?> <?php print theme(‘links’, $main_menu); ?> <?php endif; ?>

  <?php print render($title_prefix); ?> <?php if ($title): ?>

  <?php print $title; ?>

  <?php endif; ?> <?php print render($title_suffix); ?> <?php print render($messages); ?> <?php if ($tabs): ?>

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

  <?php endif; ?> <?php if ($action_links): ?>

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

  <?php endif; ?> <?php print render($page[‘content’]); ?>

  <?php if ($page[‘sidebar_first’]): ?>
  

  <?php print render($page[‘sidebar_first’]); ?>

  <?php endif; ?>
  

  <?php if ($page[‘footer’]): ?>
  <?php print render($page[‘footer’]); ?> <?php endif; ?>
  
  
  ##4. 创建自己的CSS 这个工作跟其他的情况类似，尽管做就是了。 ##5. 试试看 现在你已经创建了自己的页面模板，可以启用你的模板来看看运行情况。如果你有些修改没有反应到运行上来，可以试试清空缓存。 这几乎是所有“修改代码不生效”问题的解决方法。 ##6. 制作截图 在Drupal管理界面会在你的主题名称旁边会显示一张截图。要制作这个图片很简单，抓取一下屏幕，尺寸改成150*90，并把这个文件起名叫screenshot.png即可。 Drupal有些截图指导，不过这个只在你决定要公开发布你的贡献的时候才需要。 ## 下载主题文件 下载本教程生成的主题文件：mycooltheme.tar.gz。 为了这个例子，我包含了很简单的CSS用来摆放基本的元素。如果你希望只使用自己的出品，可以移除这些多余的CSS。 ##下一步？ 这只是Drupal主题的冰山一角，还有很多很多的事情要在Drupal中完成。还好有很多适合入门者的资源。 ##讨论 要讨论，提问或者评论本文，请去站长论坛的关于如何从设计搞创建Drupal 7的讨论。可以说说你在本课程中的疑问。 ##资源 * Drupal 主题指南 * Info文件的结构 * page.tpl.php * 核心模板列表 ###附件 mycooltheme.tar.gz