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

スマートフォン用にjQuery Mobileを使ってデザインしたデータを、Drupal CMSに適用する手順を何回かに分けてご紹介します。

[手順]

  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用テーマと、スマートフォンテーマの分け方をご紹介します。

関連タグ:

この記事をシェアする

次へ
前へ