[テーマ作成編] jQuery MobileデザインデータをDrupalに適用

[手順]

1. 「/m」(スマートフォンTOP)のURLを有効にする。
2. デザインをCMSのテンプレートに適用する　←今回はここです。
3. PCサイトと、スマートフォンサイトで使用するテンプレートテーマを分ける
4. 画像サイズをスマートフォンの画面サイズに合わせリサイズする
5. PCサイトとスマートフォンサイトとでURLが違うが、同じコンテンツを読み込む
   e.g) PC：/smartrelease/70　SP：/m/70
6. FacebookのいいねボタンをPCサイトとスマートフォンサイトとで同じにする

[テンプレート作成手順]
テンプレートの作成手順は様々な手法があります。Blockを使うのか、Panelsを使うかなどの論争も多くあります。私はViewsとBlockを使ってページを作る方法が好きです。
Drupalのテンプレートは、たったの3Stepで作れてしまいます。

1. info file
2. Template files(.tpl.php)
3. template.php replacing.tpl.php

ファイル構成は以下の通りです。(http://drupal.org/node/171194)

で、テーマの基本的な作り方ですが下記のURLに作り方のビデオがありますので、そちらを参考にしてみてください。（説明が雑ですみません＾＾；）

「http://drupalize.me/videos/introduction-theming-basics-drupal-7」

次に、赤枠のグローバルメニューを作成します。

「template.php」に以下のコードを記述します。
menu_navigation_links、APIを使い、メニュー情報をグローバルメニューで使っている情報を抜き出し、page.tpl.phpに渡します。

1. function TPLName_preprocess_page(&$vars){
2. //mainu-menuの情報を取得
3. $menu_data = menu_navigation_links('main-menu', $level = 0);
4. //タグ生成
5. foreach($menu_data as $key => $value){
6. if(isset($result)):
7. $result .= "<li><a href=\"".$menu_data[$key]['href']."\">"
8. .$menu_data[$key]['title']."</a></li>";
9.  
10. else:
11. $result = "<li><a href=\"".$menu_data[$key]['href']."\">"
12. .$menu_data[$key]['title']."</a></li>";
13. endif;
14. }
15. $vars['mainlinks'] = $result;
16. }

次に新着記事一覧を作成します。こちらはviewsの機能を使い新着記事一覧のブロックを生成し、それをpage.tpl.phpに取り込みます。

このような形で一つ一つパーツを生成していき、テーマを作っていきます。

次回はURLを見て、PC用テーマと、スマートフォンテーマの分け方をご紹介します。