Theme

You are here

Home »サイト構築 »デザイン
Wed, 06/22/2011 - 20:18 — acordo

Themeは，サイト全体のレイアウトやデザインを決定します．Drupal7は，Bartik，Garland，Sevenなどのdefault themeを持っていますが，その他，様々なthemeが利用可能です．http://drupal.org/project/themes にて，Filter by compatibility:7.x として検索して下さい．沢山のthemeが見つかります．なお，6.xと7.xでは，themeの仕様が相当異なるため，簡単には変換できません．

bartikディレクトリの中をみてみましょう．以下，重要なファイルにつていのみ説明します．

bartik.info

Themeには，Theme名.infoというファイルが必ずあり，Themeに関する概略が記述されます．
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
… …

regions[header] = Header
regions[help] = Help
… …

使用するcssファイルの指定，サイト内のregion(領域)の定義が書かれています．

既存のThemeをカスタマイズして利用する場合は，Themeのスタイルシート(この場合はcss/style.cssnなど)を直接修正するのではなく，custom.cssなどのファイルを作成し，bartik.infoファイルに，
stylesheets[all][] = css/custom.css
を追加しておくのが懸命です．

cssディレクトリ

bartik.infoで記述されているcssファイルが入っています．

imagesディレクトリ

cssが呼び出すボタンなどの画像ファイルが入っています．

templatesディレクトリ

ｈｔｍｌファイルを生成するphpプログラムがあります．その中でも一番重要な，page.tpl.phpをみてみましょう．以下に一部を書き出してみます．
ここは，ヘッダのロゴ，サイト名，スローガンを書き下している部分です．実際のhtmlコードにあるcssセレクタなどが指定されているのが分かると思います．また，$site_sloganなどの変数が利用されています．このようにして，別途設定されているsloganの内容が，書き出されるhtmlファイルに反映されます．
これら，templatesディレクトリにあるプログラムファイルを書き換えれば，表示順の変更，余分なコードの削除，新たなdivの追加，など，themeレイアウトを変更することが出来ます．

<div id="page-wrapper"><div id="page">

  <div id="header" class="<?php print $secondary_menu ? 'with-secondary-menu': 'without-secondary-menu'; ?>"><div class="section clearfix">

<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
  <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</a>
<?php endif; ?>

<?php if ($site_name || $site_slogan): ?>
<div id="name-and-slogan"<?php if ($hide_site_name && $hide_site_slogan) { print ' class="element-invisible"'; } ?>>

  <?php if ($site_name): ?>
<?php if ($title): ?>
<div id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
  <strong>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
  </strong>
</div>
<?php else: /* Use h1 when the content title is empty */ ?>
<h1 id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
  <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
</h1>
<?php endif; ?>
  <?php endif; ?>

  <?php if ($site_slogan): ?>
<div id="site-slogan"<?php if ($hide_site_slogan) { print ' class="element-invisible"'; } ?>>
<?php print $site_slogan; ?>
</div>
  <?php endif; ?>

</div> <!-- /#name-and-slogan -->