爲 Drupal 7 構建一個新主題

時間 2019-11-17

標籤 drupal 構建一個主題简体版

原文原文鏈接

主題解釋了 Drupal 網站的用戶界面 (UI)。雖然主題結構並無明顯的變化，但 Drupal 版本 7 配備了一個新的主題實現方法。本文演示瞭如何建立一個新的 Drupal 7 主題。php

Drupal 主題的目標是將框架的處理邏輯和設計元素分開。爲了作到這一點，Drupal 採用了一個複雜的主題系統，其中包括主題、主題引擎和掛鉤。主題組件與 Drupal 核心系統和模塊設計元素配合，建立具備獨特外觀的用戶界面（單獨 Drupal 頁面和表單）。因爲將 Drupal 的業務邏輯從它的表示邏輯中分離出來，使代碼更易於維護，而且您無需重寫代碼層就能夠交換出主題層的實現，反之亦然。圖 1 說明了 Drupal 框架結構。css

圖 1. Drupal 框架結構

主題顯示 Drupal 核心經過底層主題引擎從數據庫中提取的數據，主題引擎被用做 Drupal 核心和主題模板之間的接口。node

主題引擎

主題引擎 是一種手段，主題經過此引擎與 Drupal 核心進行交互。有幾個主題引擎能夠與 Drupal 配合使用。最流行的是：ios

PHPTemplate
XTemplate
Plain PHP
Smarty Engine

若是您願意，您也可使用本身的自定義引擎。數據庫

PHPTemplate 主題引擎是默認的 Drupal 引擎，也是本文中所使用的主題引擎，它使用名稱相似於 filename.tpl.php 的單獨主題文件做爲 Drupal 的 theme_filename() 函數的主題。這些文件每一個均包含面向動態數據的 HTML 框架以及 PHP 語句。所以，憑藉 PHP 的基本知識，利用 PHPTemplate 就能輕鬆建立高級主題，由於這隻涉及極少許的代碼。編程

回頁首bootstrap

規劃主題

主題是由若干個文件組件。文件的數量取決於主題的複雜性。一個主題可能只有三個文件，也可能會有幾十個文件，包括放置在主題目錄內若干個文件夾中的圖形元素和各類腳本。圖 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 $
?>
<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 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

區域

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://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 技能都較高，您顯然能夠經過觀察示例的構建方式，而後使用容許的變量來明顯建立本身的卓越主題。

回頁首

構建其餘模板文件

隨 Drupal 核心提供的還有其餘可用的主題文件的默認模板。您能夠在 Drupal 站點（見參考資料中的連接）找到它們的列表。對於 page.tpl.php 文件，要輕鬆構建屬於本身的文件，最佳方式是找到一個核心文件，觀察它是如何組成的，而後再構建您本身的。訪問 Drupal 站點將爲您指出容許在任何主題文件中使用的變量。

回頁首

style.css 文件

在一個普通的靜態 HTML 頁面中，您必須在頁頭中包括一個指針，以說明用於頁面顯示的樣式表的位置。指針看起來像這樣：

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

如前所述，您能夠將新的樣式表添加到一個主題，也能夠覆蓋默認樣式。在這兩種狀況下，你必須在 .info 文件中輸入主題樣式表。樣式表中有什麼呢？您對 CSS 類所使用的模塊化方法，與 Drupal 核心對框架的標準頁面元素所使用的模塊化方法相同。即便主題開發人員能夠建立本身的類，但在整個 Drupal 站點有許多類。如須要有關 Drupal 7 核心中的類的完整列表，請參閱參考資料。

回頁首