diykitの仕組み | LOGIN,PASSWORD or REGIST
ホーム

diykitの仕組み

Posted by amayadori on 2007/08/17(金) 18:01

0829さん作のカスタム用テーマデザインであるdiykitの仕組みをメモしておく。 0829さんの作ったテーマデザインはD.I.Y. kit for Drupal theme | Drupal.0829.infoにあります。 なお、説明メモ書きは0829さんのサイトでのdiykitの文中からそのまま転記した部分が有ります。 もちろん、了解はいただいています。 基本はpage.tpl.phpファイルです。

  1. <?php /* D.I.Y. kit page.tpl.php v.1.1 */ ?> コメントです。実際には出力されません。
  2. <?php print $xml; ?> ブラウザを判定し、Windows の IE7 未満のブラウザ以外であれば XML 宣言を出力します。
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language; ?>" lang="<?php print $language; ?>"> XHTML 1.0 Strict として宣言しています。 赤字の部分はjaと出力されますが、他はそのまま出力されます。カスタマイズするhtml内容によっては書き換える必要が有ります。
  5. 　
  6. <head profile="http://purl.org/net/ns/metaprof"> rel="nofollow" や rel="license" を使用する場合のプロファイルとして http://purl.org/net/ns/metaprof を利用させていただいています。そのまま出力されます。
  7. <?php print $head; ?> charsetや、rssファイル、アイコンなどの情報を出力します。
  8. <meta http-equiv="content-script-type" content="text/javascript" /> HTML 内にスクリプトを記述する場合には必要な meta 定義のため追記しています。
  9. <meta http-equiv="content-style-type" content="text/css" /> HTML 内にスタイルを記述する場合には必要な meta 定義のため追記しています。 <style ...>@import "style.css";</style> のように記述する場合には必要になるはずです。
  10. <?php if ($site_slogan) { ?><meta name="description" content="<?php print $site_slogan; ?>" /><?php } ?> SEO のひとつとして、スローガンを設定していれば、その内容をサイトの概要として出力します。
  11. <meta name="generator" content="Drupal 5.x" /> なんとなく…です。 Drupal 5.x で構築されたサイトだということを出力するためのものです。
  12. <?php print $styles; ?> CSS の読み込み
    システムやモジュールに設定された CSS を読み込んだ後、テーマデザインのstyle.css が読み込まれます。
  13. <!--[if IE]><style type="text/css" media="all">@import "<?php print $base_path . $directory; ?>/ie-fix.css";</style><![endif]--> IE のみが ie-fix.css を読み込むように条件付コメント文を出力します。
  14. <?php print $scripts; ?> Drupalのシステムや、モジュールなどでロードするように定義されているスクリプトコードを必要に応じてブラウザに読み込ませるための文を出力します。
  15. <title><?php print $site_name; ?><?php if ($head_page_title) { ?> :: <?php print $head_page_title; ?><?php } ?></title> Drupalに設定されたサイト名と、ページタイトルがある場合には :: で繋げてタイトルタグを出力します。
  16. </head> <hrad>の終了タグです。
  17. 　
  18. <body<?php print $body_id_class; ?>> $body_id_class -- body タグに id と class を追加します。
    • フロントページの場合（id） → front : そうでない場合 → page
    • ログインユーザの場合（class） → logged-in : そうでない場合 → not-logged-in
    • サイドバーの有無を判定（class） → none/left/right/both
      • none → サイドバーなし
      • left → 左サイドバー有り
      • right → 右サイドバー有り
      • both → 右・左ともにサイドバー有り
    19. (例)<body id="front" class="left logged-in">
  19. <div id="wrapper">
  20. <div id="header">
  21. <?php if ($search_box) { ?><div id="search-box"><?php print $search_box; ?></div><?php } ?> searchモジュールが有効になっていて、テーマ管理の中のdiykitテーマの設定の中の表示・非表示の設定項目の検索ボックスのチェックによって、検索ボックスの表示・非表示が切り替わります。 表示するように設定されていた場合は<?php print $search_box; ?>の部分に検索ボックス用のタグを出力します。
  22. <?php if ($header) { ?><div id="header-region"><?php print $header; ?></div><?php } ?> ブロック管理でheaderブロックに設定されているブロックが存在した場合に、<?php print $header; ?>の部分にheaderブロック用のタグを出力します。
  23. <div id="site-info">
  24. <?php if ($logo) { ?><a href="<?php print $base_path; ?>" title="<?php print $site_name . ' - ' . t('Home'); ?>"><img id="logo" src="<?php print $logo; ?>" alt="<?php print $site_name . ' - ' . t('Home'); ?>" /></a><?php } ?> テーマ管理のdiykitテーマの設定で、ロゴがチェックされていない場合はこの部分は出力されません。 ロゴに使われる画像は、デフォルトではdiykitに同梱のlogo.pngです。 変更する場合はテーマ管理のdiykitの設定のロゴ画像の設定でも行えます。
  25. <h1 id="site-name"><a href="<?php print $base_path; ?>"><?php print $site_name; ?></a></h1> 管理メニューのサイト設定のサイト情報の中の名前が<?php print $site_name; ?>の部分に出力されます。
  26. <?php if ($site_slogan) { ?><div id="site-slogan"><?php print $site_slogan; ?></div><?php } ?> サイト設定のサイト情報の中のスローガンが設定されていた場合に、<?php print $site_slogan; ?>の部分に置き換えられて出力されます。 なにも設定されていなければ、このdiv要素そのものが出力されません。
  27. </div> 23行目のdiv#site-info の閉じタグです。
  28. <?php if ($primary_links || $secondary_links) { ?><div id="nav"> primaryリンクの設定、またはsecondaryリンクの設定があった場合には、div#nav 要素の開始タグを出力します。この行から31行目まではこの条件を満たしているときのみ出力されます。
  29. <?php if (($primary_links)) { ?><div id='primary-links'><?php print theme('links', $primary_links, array('class' => 'nav primary-links')); ?></div><?php } ?> primaryリンクの設定が有った場合、<?php print theme('links', $primary_links, array('class' => 'nav primary-links')); ?>の部分にリンクの内容が出力されます。 出力されるリンクの内容は0829さんのテーマ変数（page.tpl.php） | Drupal.0829.infoの$primary_linksをご覧ください。
  30. <?php if (($secondary_links)) { ?><div id='secondary-links'><?php print theme('links', $secondary_links, array('class' => 'nav secondary-links')); ?></div><?php } ?> 前の行と同じで、secondaryリンクについてです。<?php print theme('links', $secondary_links, array('class' => 'nav secondary-links')); ?>の内容が出力されます。
  31. </div> <?php } ?> div#nav 要素の閉じタグです。28行目の条件を満たしている時のみ出力されます。
  32. </div><!--END header-->
  33. <div id="content">
  34. <div id="section">
  35. <!--p35--> <div id="main"> この行から51行目まで行頭に<!--p00-->形式のコメントを追加してあります。テンプレートがどのような流れれで処理されているのかを把握しやすくするために個人的に追記しました。Drupalで表示したページのソースコードをエディターに貼り付けて、<!--pを検索して、改行を先頭に付加して置換すればこのコメントで行を揃えることができ、判りやすくなります。
  36. <!--p36--> <div id="squeeze" class="column main">
  37. <!--p37--> <?php print $breadcrumb; ?> breadcrumbが存在すれば、出力します。
  38. <!--p38--> <?php if ($mission) { ?><div id="mission"><?php print $mission; ?></div><?php } ?> 管理メニューのサイト設定のサイト情報の中のミッションの内容を<?php print $mission; ?></div><?php } ?>の部分に出力します。
  39. <!--p39--> <?php if ($title) { ?><h1 class="title"><?php print $title; ?></h1><?php } ?> $titleという変数に値がセットされていない場合は、この行の処理はスキップされます。 page.tpl.phpにおける$titleの内容は個別ページのタイトルという扱いなので、フロントページの抜粋版の出力には使用されません。 つまり、フロントページではこの行は使用されないと言うことになります。
    2007/08/20追記:どうやら、管理画面でも利用されているようです。
  40. <!--p40--> <?php if ($tabs) { ?><div class="tabs"><?php print $tabs; ?></div><?php } ?> $tabsという変数に値がセットされていた場合にこの行が実行されます。 $tabsはタブメニューの値を格納しています。 コンテンツの編集権限を持つユーザーに「表示」「編集」などのタブ状のメニューのことです。 タブメニューは様々な権限による実行できる機能などの提供の際にも利用されています。 当然、これも個別ページなどが対象のため、フロントページではこの行は使用されません。
    2007/08/20追記:どうやら、管理画面でも利用されているようです。
  41. <!--p41--> <?php print $help; ?> ヘルプ項目があった場合に表示します。主に管理画面等で使用されるようです。
  42. <!--p42--> <?php print $messages; ?> $messages変数に値がセットされている時に出力されます。エラーメッセージなどの出力に使用されます。
  43. <!--p43--> <div class="content-box">
  44. <!--p44--> <?php print $content; ?> フロントページや、コンテンツの個別ページではnode.tpl.phpの内容に置き換えられるようです。 node.tpl.phpにも同じ名前の変数$contentが存在しています。 実際のコンテンツの内容はnode.tpl.phpの$content変数によって出力されます。 管理画面では各モジュールの出力内容がそのまま出力されいているようです。 コメントなどは、node.tpl.php内の$links変数によって出力されています。
  45. <!--p45--> </div><!--END content-box-->
  46. <!--p46--> <?php print $feed_icons; ?> RSS配信用のfeedアイコンを主力します。 diykitフォルダのimages/feed.png が見つからなければ、デフォルトの misc/feed.png を呼び出すように変更しています。
  47. <!--p47--> </div><!--END squeeze-->
  48. <!--p48--> </div><!--END main-->
  49. <!--p49--> <?php if ($sidebar_left) { ?><div id="sidebar-left" class="column sidebar"> 左サイドバー用の変数$sidebar_leftに値がセットされていた場合に、51行目までを実行します。値がセットされていなければ51行目までをスキップします。
  50. <!--p50--> <?php print $sidebar_left; ?> 49行目の条件が合致するときに、左サイドバーを出力します。
  51. <!--p51--> </div><!--END sidebar-left--><?php } ?> 49行目の条件に合致するときに、出力されます。
  52. </div><!--END section-->
  53. <?php if ($sidebar_right) { ?><div id="sidebar-right" class="column sidebar"> 右サイドバー用の変数$sidebar_rightに値がセットされていた場合に、55行目までを実行します。値がセットされていなければ55行目までをスキップします。
  54. <?php print $sidebar_right; ?> 53行目の条件に合致するときに、右サイドバーを出力します。
  55. </div><!--END sidebar-right--><?php } ?> 53行目の条件に合致するときに、出力されます。
  56. </div><!--END content-->
  57. <div id="footer">
  58. <div id="return-nav">
  59. <a href="#header" title="<?php print t('Back to the top of this page'); ?>"><?php print t('^ Page Top'); ?></a>
  60. </div><!--END return-nav-->
  61. <?php if ($footer) { ?><div id="footer-region"><?php print $footer; ?></div><?php } ?> footerブロック用の変数$footer に値がセットされていたら、div#footer-region 要素で囲ったフッターブロックを<?php print $footer; ?>の部分に出力します。値がセットされていない場合はスキップします。
  62. <?php if ($site_footer) { ?><div id="site-footer"><?php print $site_footer; ?></div><?php } ?> footerブロック用の変数$footer に値がセットされていたら、div#site-footer 要素で囲ったフッターブロックを<?php print $site_footer; ?>の部分に出力します。値がセットされていない場合はスキップします。
  63. </div><!--END footer-->
  64. </div><!--END wrapper-->
  65. <?php print $closure; ?> JavaScript のコードなど hook_footer() で設定された内容があれば、その内容を返します。 通常は タグの直前にセットします。
  66. </body>
  67. </html>

※暇と根気があったら他のテンプレートもメモります(^_^;)

トラックバック


URLから "-notspam" を削除してトラックバックを送信してください。トラックバックポリシーは こちらに提示しています。
コメント表示オプション
お好みのコメントを表示方法を選択してください「設定の保存」をクリックすると変更が有効になります。
Re: diykitの仕組み

勝手に文を転記したりしてスミマセンでした。

本当はもっと別な表現形態を思い描いていたのですが、BBcodeの問題(と言うよりはHTMLでの表現の問題)から、こんな形のモノになってしまいましたが、本当に伝えたかったことはテンプレート同士の繋がりだったんですが・・・ワタシの技量のなさです。スミマセン。

まだ、これで出来上がりのつもりはありませんので、何かアドバイスとか有ったら宜しくお願いします。

Posted by amayadori on 2007/08/22(水) 11:10
Re: diykitの仕組み

いや、ホントにボリュームのある内容で、ありがとうございます。
diykit について、おかしなところとか、わかりにくいところとかあったら言ってくださいね。

Posted by 0829@drupal.org on 2007/08/20(月) 20:21