とほほのDrupal入門

トップ > Drupal入門 > テーマ

テーマの作成

新しいテーマを作るには、themes フォルダの下に新しい名前のフォルダ(例:mytheme)を作成し、下記などのファイルを置いてください。

themes
├□mytheme
 ├◇mytheme.info
 ├◇style.css
 ├◇page.tpl.php
 ├◇block.tpl.php
 ├◇node.tpl.php
 ├◇comment.tpl.php
 └◇screenshot.png

mytheme.info には、MyTheme テーマの基本情報を記述します。

name = MyTheme
description = My test theme.
version = "6.4"
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css

Drupal の基本レイアウトは次のような構成をしています。

ヘッダ($header)
左サイドバー
($left)
ブロック1
ブロック2
ブロック3
コンテンツ
($content)
ノード1
ノード2
ノード3
右サイドバー
($right)
ブロック4
ブロック5
ブロック6
フッタ($footer)

スタイルシートを style.css で指定します。

tr { vertical-align: top; }
td { border:1px solid #ff0000; padding:3px; font-size:9pt; }
div { border:1px solid #008000; margin:3px; padding:3px; }
div div { border:1px solid #c0c0c0; margin:3px; padding:3px; }
div div div { border:1px solid #cccccc; margin:3px; padding:3px; }
div div div div { border:1px solid #cccccc; margin:3px; padding:3px; }

ページ全体のレイアウトを page.tpl.php で指定します。

<html>
<head>
  <title><?php print $head_title ?></title>
  <?php print $head ?>
  <?php print $styles ?>
  <?php print $scripts ?>
</head>
<body>
<table>
  <tr>
    <td colspan=3><?php print $header; ?></td>
  </tr>
  <tr>
    <td><?php print $left; ?></td>
    <td><?php print $content; ?></td>
    <td><?php print $right; ?></td>
  </tr>
  <tr>
    <td colspan=3><?php print $footer; ?></td>
  </tr>
</table>
</body>
</html>

各ブロック内部のレイアウトを block.tpl.php で指定します。

<div>
  <?php if ($block->subject): ?>
    <div><?php print $block->subject ?></div>
  <?php endif; ?>
  <?php if ($block->content): ?>
    <div><?php print $block->content ?></div>
  <?php endif; ?>
</div>

各ノード内部のレイアウトを node.tpl.php で指定します。

<div>
  <?php print "<div><a href='$node_url' title='$title'>$title</a></div>" ?>
  <?php if ($submitted): ?>
    <div><?php print $submitted; ?></div>
  <?php endif; ?>
  <?php if ($content): ?>
    <div><?php print $content ?></div>
  <?php endif; ?>
  <?php if ($links): ?>
    <div><?php print $links; ?></div>
  <?php endif; ?>
</div>

コメント表示ページのレイアウトを comment.tpl.php で指定します。

<div>
  <?php if ($titie): ?>
    <div><?php print $titie; ?></div>
  <?php endif; ?>
  <?php if ($author): ?>
    <div><?php print $author; ?></div>
  <?php endif; ?>
  <?php if ($submitted): ?>
    <div><?php print $submitted ?></div>
  <?php endif; ?>
  <?php if ($content): ?>
    <div><?php print $content ?></div>
  <?php endif; ?>
  <?php if ($signature): ?>
    <div><?php print $signature ?></div>
  <?php endif; ?>
  <?php if ($links): ?>
    <div><?php print $links; ?></div>
  <?php endif; ?>
  <?php if ($picture): ?>
    <div><?php print $picture; ?></div>
  <?php endif; ?>
  <?php if ($comment->new) : ?>
    <span?php print drupal_ucfirst($new) ?></span>
  <?php endif; ?>
</div>

screenshot.png には、テーマ選択画面で表示されるスクリーンショット画面の画像を置いてください。

各ファイルで使用可能な変数は下記のページを参照してください。


Copyright (C) 2008 杜甫々
初版:2008年9月21日
http://www.tohoho-web.com/drupal/