Magento20100313

Magento入門デザインカスタマイズ（増補改訂版）

2010/03/13Magento-JP User Group

西　宏和

2010年3月14日日曜日

自己紹介

• 西　宏和（にしひろかず）

• Magentoとは２年半くらいの付き合い

• Twitter@hirokazu_nishi


本日のアジェンダ• Magentoのディレクトリ構造

• Magentoのテンプレート構造

• レイアウトXML

• Block

• スキン• Tips


Magentoのディレクトリ構造


app code core コアコード

community コミュニティコード

local ローカルコード

design frontend 公開側テンプレート等

adminhtml 管理側テンプレート等

etc 設定ファイル

locale ロケールファイル

lib 共通ライブラリ

js 共通javascriptファイル

skin frontend 公開側スキン

adminhtml 管理側スキン


テンプレートだけ拡大


design frontend default default layout レイアウトXML

locale 公開側ロケール

template テンプレートファイル

foo bar ・・・以下略












Magentoのテンプレート構造


最初に思うこと

• ファイルもフォルダも多い！

• 関連性がわからない！

• 細切れになりすぎている！


テンプレートの例-Scalena News-


<?php $collection = $this->getItems(3); ?><?php if ( count($collection) == 0 ) : ?> <p><?php echo $this->__('No news yet...'); ?></p><?php else : ?> <dl> <?php foreach ( $collection as $_item ) : ?> <dt><a href="<?php echo Mage::helper('snews')->getUrl($_item['identifier']); ?>"><?php echo $_item['title']; ?></a></dt> <dd><?php echo $_item['date']; ?></dd> <dd> <?php if ( Mage::helper('snews')->getListLimitDescription() == 0 || strlen($_item['description']) < Mage::helper('snews')->getListLimitDescription() ) : ?> <?php echo $_item['description']; ?> <?php else : ?> <?php echo substr($_item['description'], 0, Mage::helper('snews')->getListLimitDescription()); ?>... <?php endif; ?> </dd> <dd><a href="<?php echo Mage::helper('snews')->getUrl($_item['identifier']); ?>"><?php echo $this->__('Learn more...'); ?></a></dd> <?php endforeach; ?> </dl> <?php endif; ?>


テンプレートの特徴

• if・・・endif;とか

• foreach・・・endforeach;とか

• $this->hogehogeとか

• それ以前に素のPHPコード


見る時のポイント

• 大きいところから見る

• レイアウトXMLを理解する


大きいところから見る

• pageフォルダに共通パーツが入っている

• カラムレイアウト用テンプレート

• ヘッダー／フッターテンプレート


レイアウトXML


レイアウトXMLとは• ページのレイアウトを定義するXML

• モジュール単位で定義

• １つのモジュールで複数のページの定義を作成可能

• 他のレイアウトXMLの内容を変更することも可能


ざっくりレイアウト


パーツを載せた場合


この定義がレイアウトXML


レイアウトXMLの例-Scalena News-


<?xml version="1.0"?><layout version="0.1.0">! <default>! ! ! </default>! <snews_index_index> <reference name="root"> <action method="setTemplate"><template>page/2columns-right.phtml</template></action> </reference> <reference name="content"> <block type="snews/items" name="snews.news" template="scalena/news/news.phtml">! <block type="snews/pagination" name="snews.pagination" as="pagination" template="scalena/news/pagination.phtml"/> </block> </reference> </snews_index_index> <snews_index_view> <reference name="root"> <action method="setTemplate"><template>page/2columns-right.phtml</template></action> </reference> <reference name="content"> <block type="snews/item" name="snews.detail" template="scalena/news/news-detail.phtml" /> </reference> </snews_index_view></layout>


よく出てくるタグ

•block

•reference

•action

•remove


block

• ブロックを定義するタグ

• ネスト可能

• <block type=”foo” name=”foo” template=”foo.phtml” />




reference

• name=”foo” で参照するブロック呼出

• <reference name=”foo”>




action

• blockの子要素に記述するタグ

• blockオブジェクトのメソッドを記述

• パラメータも指定可能

• <action method=”foo”>パラメータ</

action>




remove

• 指定したブロックを削除するタグ

• <remove name=”foo”/>

• 削除後、同名で再定義も可能


レイアウトアップデート

• 商品・カテゴリ・CMSページで利用可能

• そのページでだけレイアウトを変更可能

• 要らないブロックを消したり、ブロックを追加したりできる

• ちょっとした修正ならXMLの修正不要


Block


Blockとは• レイアウトXML上でblockタグで呼び出されるオブジェクト

• テンプレート（.phtml）とほぼ等価

• レイアウトXMLからpublicメソッドを呼び出し可能

• レイアウトXML上でネストが可能


Blockのネスト<block type="foo/foo" name="foo.foo">

<block type="foo/bar" name="foo.bar" as="bar"/>

　　　　　　　　　　　　・　　　　　　　　　　　　・　　　　　　　　　　　　・

</block>


ネストしたブロック

• $this->getChildHtml(‘foo’);で呼び出し可能

• ネストしているブロックが１個だけの場合は引数省略可能


ブロックの動的生成• Mage_Core_Model_Layoutオブジェクトの

createBlockをコールすることで、動的にブロックの生成が可能

• coreのコードをgrepするとサンプルがゴロゴロ

• レイアウトXMLにないブロックがたまに出てきて激しく混乱


静的ブロック• CMS機能とレイアウトXMLで呼び出し方が異なる

• 基本的にどこの画面でも呼び出し可能

• Free_CMSエクステンションを使うと自動で数種類の静的ブロックが簡単に配置できるように


例１• 1.3までは

{{block type=”cms/block” block_id=”hoge” template=”cms/content.phtml”}}

• 1.4からは{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="5"}}


例２

• <block type=”cms/block” name=”hoge” (before|after)=”foo”> <action method=”setBlockId”> hoge </action></block>


スキン


スキンとは

• テンプレート　＝　HTML

• スキン　　　　＝　JS、CSS、画像

• 他のアプリケーションのデザインテーマとはテンプレートと１セットでほぼ同じ意味


デザインの増やし方• テンプレートのフォルダを掘る中身は空でもOK

• スキンのフォルダをテンプレートと同じ名前で作る

• あとはCSSとか画像とかJSを組んでいく


Tips


パンくずの再定義<remove name=”breadcrumbs” /><reference name=”breadcrumbs”> <action method=”addCrumnb”> <label>home</label> <params> <label>home</label> <title>ホーム</title> <link>home</link> <first>true</first> </params> </action> <action method=”addCrumnb”> <label>foofoo</label> <params> <label>なんとか</label> <title>なんとか</title> <link/> <last>true</last> </params> </action></reference>


トップリンクの変更<reference name=”top.links”> <action method=”addLink” translate=”label title” module=”customer”> <label>ほげほげ</label> <url>/hogehoge</url> <title>ほげほげ</title> <prepare/> <urlParams/> <position>90</position> </action> <action method=”addLink” translate=”label title” module=”customer”> <label>ふげふげ</label> <url>/fugefuge</url> <title>ふげふげ</title> <prepare/> <urlParams/> <position>100</position> </action></reference>


ご清聴ありがとうございましたご質問があればどうぞ

Magento20100313

Technology

block xml block

xml xml xml2010

action block block action

magento magento xml

block template

block type

cmsblock block

cms xml