第2回 magento cafe plus 〜新・magentoカスタマイズ入門

Magento-JP User Group 西　宏和

新・Magentoカスタマイズ入門

Agenda

• Magentoのディレクトリ構造

• コードプールとinclude_path

• フォールバック

• 1.9での変更箇所

• デザインカスタマイズ

Magentoのディレクトリ構造app code core コアコード

community コミュニティコード

local ローカルコード

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

adminhtml 管理側テンプレート等

etc 設定ファイル

locale ロケールファイル

lib 共通ライブラリ

js 共通javascriptファイル

skin frontend 公開側スキン

adminhtml 管理側スキン

テンプレートだけ拡大

app design frontend default default layout レイアウトXML

locale テーマ固有ロケール

etc 設定ファイル

template テンプレートファイル

foo bar ・・・ 以下略

カスタマイズする前に理解しておくこと

• コードプール

• include_path

• コードプールに影響されないもの

• レイアウトの概念

• フォールバック

コードプール

app code core コアコード

community コミュニティコード

local ローカルコード

lib 共通ライブラリ

include_path

include_path

コンパイラ有効時の処理

include_path

コンパイラ有効時の処理

通常の処理

対象外

• エクステンションの設定ファイルはinclude_pathの対象外

• app/etc/modulesの中にあるXMLで定義されている

• Mage_Core_Model_Config::getModuleDirを参照

対象外

• エクステンションの設定ファイルはinclude_pathの対象外

• app/etc/modulesの中にあるXMLで定義されている

• Mage_Core_Model_Config::getModuleDirを参照

基本的なMagentoのレイアウト構造

基本的なMagentoのレイアウト構造

基本的なMagentoのレイアウト構造

フォールバック

• 現在のテーマに存在しないファイルを、親テーマに遡って使用する仕組み

• テンプレート・レイアウトXML・スキンで利用可能

フォールバック

• 現在のテーマに存在しないファイルを、親テーマに遡って使用する仕組み

• テンプレート・レイアウトXML・スキンで利用可能

mytheme/mytheme

フォールバック

• 現在のテーマに存在しないファイルを、親テーマに遡って使用する仕組み

• テンプレート・レイアウトXML・スキンで利用可能

mytheme/mytheme

フォールバック

• 現在のテーマに存在しないファイルを、親テーマに遡って使用する仕組み

• テンプレート・レイアウトXML・スキンで利用可能

mytheme/mytheme

mytheme/default

フォールバック

• 現在のテーマに存在しないファイルを、親テーマに遡って使用する仕組み

• テンプレート・レイアウトXML・スキンで利用可能

mytheme/mytheme

mytheme/default

フォールバック

• 現在のテーマに存在しないファイルを、親テーマに遡って使用する仕組み

• テンプレート・レイアウトXML・スキンで利用可能

mytheme/mytheme

mytheme/default

base/default

1.9での変更点

• theme.xmlの導入

• フォールバック機構の仕様変更

親テーマ・子テーマ

• theme.xmlを記述することで、任意のテーマを親テーマとして指定可能

<?xml version="1.0"?> <theme> <parent>rwd/default</parent> </theme>

フォールバック機構の仕様変更

• 1.8までは、

• 現在テーマ　→　現在テーマのデフォルト　→　base/default

• 1.9からは、

• 現在テーマ　→　親テーマ or デフォルト　→　base/default

Magentoのリクエストフロー

Varien_Object

• ArrayObjectを拡張したMagentoでよく使われるオブジェクト

• getXxx, setXxx等が既に実装されているので、データ入れとしてよく使われている

• BlockやHelper、Modelはこのクラスを継承して実装されている

レイアウトXML

• Magento独自の画面レイアウト定義用XMLファイル

• これを知らなくちゃデザインカスタマイズは始まらない

• 定義単位はエクステンション単位だが、1ファイルに複数画面の定義を記述可能

• メールテンプレートの一部パーツもレイアウトXMLで定義されている

レイアウトXMLで使用するタグ• block

• reference

• action

• update

• remove

• label

• actionのパラメータタグ

block

• レイアウト上にブロックを追加

• typeまたはclass属性でブロッククラスを指定

• name属性でレイアウト上のブロック名を指定（重複しないように）

• as属性でnameの別名を設定可能

• before / after 属性で追加位置を調整可能

• ネスト可

reference

• 既にそのレイアウトで定義されているblockを参照する

• nameでブロック名を指定

• action、blockを記述可

update

• 既に定義してあるレイアウトを読み込む

• 読み込んだ後でreferenceを使って追加・変更が可能

• handle属性にレイアウト定義名を指定する

remove

• 既に定義されているブロックをレイアウト上から削除する

• name属性にブロック名を指定する

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

action

• ブロックのクラスに定義されているpublicメソッドを実行する

• 子要素にパラメータを指定可能

• ifconfig属性を使うことで、実行の制御が可能

• blockの違いを知る

カスタマイズの実例

CSSやJSの追加

• page/html_headブロックの子要素で以下のような記述をすればOK

• <action method=“addJs"><script>mage/cookies.js</script></action>

• <action method=“addCss"><stylesheet>css/styles.css</stylesheet></action>

• <action method=“addItem"><type>skin_js</type><name>js/lib/jquery-1.10.2.min.js</name></action>

• <action method="addItem"><type>skin_css</type><name>css/styles-ie8.css</name><params/><if><![CDATA[ (lte IE 8) & (!IEMobile)]]></if></action>

• <action method="addLinkRel"><rel>stylesheet</rel><href>//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600</href></action>

静的ブロックの埋め込み

<block type="cms/block" name=“my_custom_block”> <action method=“setBlockId"> <block_id>my_custom_block</block_id> </action> <action method=“setCacheLifetime"> <cache_lifetime>86400</cache_lifetime> </action> <action method=“setCacheKey"> <cache_key>header_slogan_block</cache_key> </action> </block>