Main menu
You are here
テーマの作成 その４
その３につづき、ラフ画にあわせてHTMLとCSSでコーディングを追加していく。ほぼdivタグのみでで区画割をしていくだけなので特に変わったテクニックは使用していない。デザインの都合上、<Body>にベースとなる画像を敷き詰め、直下にはヘッダー区画ののバックグラウンド画像を敷くため<div id="page-container">という区画をおき、その中に各ブロックが配置されるという3レイヤーになっている。また、同じような理由（バックグランドの画像を対応させるため）でcontentsブロックに収まるブロックもヘッダー、コンテンツ、フッターと３区画に別れている。
HTML+CSSでコーディングしたPage
さすがにコードが長く（特にCSSは冗長になる）なってきたので（ついでに色分けがえらい手間なので）ソースについてはtxtで添付することにさせてもらった。
page_tpl.txt
CSS.txr
さて、ページのデザインについてはほぼラフ通りのものができた。ただ、いまのままでは単なる静的ページと変わりが無い（HTMLで書いただけなので当たり前なのだが）。Drupal 上でこのPHPとは名ばかりのHTMLページが稼動するためには Drupal が用意してくれるページデータを表示できるようにPHPのコードを追加（HTMLコードの該当箇所と入れ替え）していく必要がある。
Drupal 内部ではコンテンツまたはデータは全て何らかの変数に収まっている。コアテーマである garland の page.tpl.php をみてみよう。
<?php
// $Id: page.tpl.php,v 1.18.2.1 2009/04/30 00:13:31 goba Exp $
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<?php print $head ?>
<title><?php print $head_title ?></title>
<?php print $styles ?>
<?php print $scripts ?>
<!--[if lt IE 7]>
<?php print phptemplate_get_ie_styles(); ?>
<![endif]-->
</head>
上のソースは冒頭部分を抜き出したものだが、HTMLのヘッダー部分がほとんどPHPによって構成されているのが分かる。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>"
lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
xHTMLのXMLに準拠した言語の指定部分だが、言語指定にあたる部分が <?php print $language->language ?> に置き換わっている、つまり構造体 $language->language には言語指定文字列が格納されているのだと推測できる。
この部分をそっくりそのまま自分のHTMLコードと置き換えて、ページを表示し、ソース表示で、どのように変換されるのか確認する。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
問題なく言語指定文字に置き換わっているようである。このようにして、HTMLの各部分をPHPの変数に置き換えていき、page.tpl.php が Drupal 上で動的にページを構築できるように作り変えていく。page.tpl.php 内でどのような内部変数を呼び出せるかについては page.tpl.php で利用可能な変数 を参照してほしい。
それでは、オリジナルのpage.tpl.phpに現時点で可能な限りの内部変数によるHTMLコードの置き換えをおこなってみよう。
その５につづく。
Recent comments