Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Veriteworks Inc. 西 宏和
Magento Cafe Plus Kansai #1
Agenda
• Magentoカスタマイズ入門(概論)
• Magentoカスタマイズ入門(デザインテーマ)
Magentoカスタマイズ入門(概論)
このセッションの内容
• Magentoのディレクトリ構造
• コードプールとinclude_path
• デザインフォールバック
• 1.9以降の仕様変更
Magentoのディレクトリ構造
Magentoのディレクトリ構造
app code core コアコード
community コミュニティコード
local ローカルコード
design frontend 公開側テンプレート等
adminhtml 管理側テンプレート等
etc...
コード部分だけ拡大
app code community … … … コミュニティコード
core Mage Catalog Block ブロッククラスディレクトリ
Helper ヘルパークラスディレクトリ
Model モデルクラスディレクトリ...
テンプレートだけ拡大
app design frontend default default layout レイアウトXML
locale テーマ固有ロケール
etc 設定ファイル
template テンプレートファイル
foo bar … 以...
コードプールとinclude_path
コードプール
app code core コアコード
community コミュニティコード
local ローカルコード
lib 共通ライブラリ
コードプールとは
• Magentoのコアコードとサードパーティ製コード、サイト独自のコードを分
離するための仕組み
• Composerが市民権を得る前のアーキテクチャゆえの構造
include_path
コンパイラ有効時の処理
通常の処理
対象外
• エクステンションの設定ファイルは
include_pathの対象外
• どのコードプールを見るかは、app/
etc/modulesの中にあるXMLで

定義されている
• Mage_Core_Model_Config::get
Mo...
デザインフォールバック
デザインフォールバック
• 現在のテーマに存在しないファイ
ルを、親テーマに って使用する
仕組み
• テンプレート・レイアウトXML・
スキンで利用可能
mytheme/mytheme
mytheme/default
base/default
1.9系のデフォルト設定では・・・
標準テーマはrwdに変更
その他の設定は空欄だが、
rwd/defaultを使い、
ないものはbase/defaultを
自動的に使用する
1.9以降の変更点
• theme.xmlの導入
• フォールバック機構の仕様変更
theme.xmlによる親テーマ・子テーマ
• テーマディレクトリ下のetcに配置
する
• theme.xmlを記述することで、任意
のテーマを親テーマとして指定可能
<?xml version="1.0"?>
<theme>
<parent...
フォールバック機構の仕様変更
• 1.8までは、
• 現在テーマ → 現在テーマのデフォルト → base/default
• 1.9からは、
• 現在テーマ → 親テーマ or デフォルト → base/default
Varien_Object
• ArrayObjectを拡張したMagentoでよく使われるオブジェクト
• getXxx, setXxx等が既に実装されているので、データ入れとしてよく使われ
ている
• BlockやHelper、Modelは...
Magentoカスタマイズ入門

(デザインテーマ)
このセッションの内容
• レイアウトXMLの仕様と構造
• テンプレートの書き方と親子関係
• ブロックのあれこれ
• ウィジェット
• カスタマイズ例
レイアウトXMLの仕様と構造
レイアウトXML
• Magento独自の画面レイアウト定義用XMLファイル
• これを知らなくちゃデザインカスタマイズは始まらない
• 定義単位はエクステンション単位
• 1ファイルに複数画面の定義を記述可能
• メールテンプレートの一部パー...
local.xml
• すべてのレイアウトXMLの中で、一番最後に処理されるファイル
• テーマ固有のカスタマイズを書くために使用する
• 既成テーマをカスタマイズする際に、独自カスタム内容を分けるために使う
• ただし、幾つかできないことがあ...
レイアウトXMLの仕様
レイアウトXMLで使用するタグ
• block
• reference
• action
• update
• remove
• label
• actionのパラメータタグ
block
• レイアウト上にブロックを追加
• typeまたはclass属性でブロッククラスを指定
• name属性でレイアウト上のブロック名を指定(重複しないように)
• as属性でnameの別名を設定可能
• before / after...
Blockの派生系(一部)
用途 子要素の自動表示 テンプレート
Mage_Core_Block_Template 一般的なテンプレート用 ☓ 必要
Mage_Core_Block_Text_List 子要素のリスト表示用 ⃝ 不要
Mage_...
reference
• 既にそのレイアウトで定義されているblockを参照する
• nameでブロック名を指定
• action、blockを記述可
update
• 既に定義してあるレイアウトを読み込む
• 読み込んだ後でreferenceを使って追加・変更が可能
• handle属性にレイアウト定義名を指定する
remove
• 既に定義されているブロックをレイアウト上から削除する
• name属性にブロック名を指定する
• 削除後、同名で再定義も可能
action
• ブロックのクラスに定義されているpublicメソッドを実行する
• 子要素にパラメータを指定可能
• ifconfig属性を使うことで、実行の制御が可能
• blockの違いを知る
レイアウトXMLの構造
基本的な構造
<?xml version="1.0"?>

<layout version="0.1.0">

<default>

<reference name="footer">

<block type="cms/block" name...
例 - 商品ページ
<block type="core/template_facade" name="product.info.container1" as="container1">

<action method=“setDataByKey...
例 - メールテンプレート
<sales_email_order_items>

<block type="sales/order_email_items" name="items" template="email/order/items.ph...
テンプレートの書き方と
親子関係
Magentoのテンプレート
• ただのPHPスクリプト
• あらゆるPHP関数・構文が利用可能
• ゴリゴリ計算式を書いてもいいが・・・それが良い実装かどうかは別問題
テンプレートの例
<?php if (($_products = $this->getProductCollection()) && $_products->getSize()): ?>

<h2 class="subtitle"><?php ...
テンプレートの親子関係
• レイアウトXML上の定義に沿って、テンプレートの親子関係も決まってくる
• どちらかと言うとブロックの階層関係と同じ
• 上位階層のテンプレートから下位階層のブロックを呼ぶ場合は、
getChildHtml()などを...
ウィジェット
CMSと静的ブロック上のウィジェット
CMSと静的ブロック上のウィジェット
• あらかじめ定義されたパーツをCMSや静的ブロック上に埋め込む機能
• パーツは独自エクステンションを書くことで新しく追加することが可能
デザインテーマ上のウィジェット
• ある特定のテーマ上に、CMSと同様にパーツを配置する機能
• テーマ依存なので、同じテーマを使うストアビューに等しく適用される
• ウィジェットによって配置できる場所が決まっている
カスタマイズ例
CSSやJSの追加
page/html_headブロックの子要素で以下のような記述をすればOK
<action method=“addJs"><script>mage/cookies.js</script></action>
<action m...
静的ブロックの埋め込み
<reference name="foo">
<block type="cms/block" name= my_custom_block >
<action method= setBlockId">
<block_id>...
レイアウトXMLを使わずにいきなりブロックを配置
$block = $this->getLayout()->createBlock( ext_name/block_name );
echo $block->toHtml();
おわり
Upcoming SlideShare
Loading in …5
×

第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門

1,297 views

Published on

第1回 Magento Cafe Plus Kansaiで使用した資料です。
Magentoのディレクトリ構成やテンプレート・レイアウト構成について解説しています。

Published in: Software
  • Be the first to comment

  • Be the first to like this

第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門

  1. 1. Veriteworks Inc. 西 宏和 Magento Cafe Plus Kansai #1
  2. 2. Agenda • Magentoカスタマイズ入門(概論) • Magentoカスタマイズ入門(デザインテーマ)
  3. 3. Magentoカスタマイズ入門(概論)
  4. 4. このセッションの内容 • Magentoのディレクトリ構造 • コードプールとinclude_path • デザインフォールバック • 1.9以降の仕様変更
  5. 5. Magentoのディレクトリ構造
  6. 6. Magentoのディレクトリ構造 app code core コアコード community コミュニティコード local ローカルコード design frontend 公開側テンプレート等 adminhtml 管理側テンプレート等 etc 設定ファイル locale ロケールファイル lib 共通ライブラリ js 共通javascriptファイル skin frontend 公開側スキン adminhtml 管理側スキン
  7. 7. コード部分だけ拡大 app code community … … … コミュニティコード core Mage Catalog Block ブロッククラスディレクトリ Helper ヘルパークラスディレクトリ Model モデルクラスディレクトリ controllers リクエスト受け付け用コントローラ Controller 基底クラスコントローラ etc 定義ファイル一式 sql セットアップスクリプト data データ定義スクリプト local … … … ローカルコード
  8. 8. テンプレートだけ拡大 app design frontend default default layout レイアウトXML locale テーマ固有ロケール etc 設定ファイル template テンプレートファイル foo bar … 以下略 adminhtml default default … 管理画面側
  9. 9. コードプールとinclude_path
  10. 10. コードプール app code core コアコード community コミュニティコード local ローカルコード lib 共通ライブラリ
  11. 11. コードプールとは • Magentoのコアコードとサードパーティ製コード、サイト独自のコードを分 離するための仕組み • Composerが市民権を得る前のアーキテクチャゆえの構造
  12. 12. include_path コンパイラ有効時の処理 通常の処理
  13. 13. 対象外 • エクステンションの設定ファイルは include_pathの対象外 • どのコードプールを見るかは、app/ etc/modulesの中にあるXMLで
 定義されている • Mage_Core_Model_Config::get ModuleDirを参照
  14. 14. デザインフォールバック
  15. 15. デザインフォールバック • 現在のテーマに存在しないファイ ルを、親テーマに って使用する 仕組み • テンプレート・レイアウトXML・ スキンで利用可能 mytheme/mytheme mytheme/default base/default
  16. 16. 1.9系のデフォルト設定では・・・ 標準テーマはrwdに変更 その他の設定は空欄だが、 rwd/defaultを使い、 ないものはbase/defaultを 自動的に使用する
  17. 17. 1.9以降の変更点 • theme.xmlの導入 • フォールバック機構の仕様変更
  18. 18. theme.xmlによる親テーマ・子テーマ • テーマディレクトリ下のetcに配置 する • theme.xmlを記述することで、任意 のテーマを親テーマとして指定可能 <?xml version="1.0"?> <theme> <parent>rwd/default</parent> </theme>
  19. 19. フォールバック機構の仕様変更 • 1.8までは、 • 現在テーマ → 現在テーマのデフォルト → base/default • 1.9からは、 • 現在テーマ → 親テーマ or デフォルト → base/default
  20. 20. Varien_Object • ArrayObjectを拡張したMagentoでよく使われるオブジェクト • getXxx, setXxx等が既に実装されているので、データ入れとしてよく使われ ている • BlockやHelper、Modelはこのクラスを継承して実装されている
  21. 21. Magentoカスタマイズ入門
 (デザインテーマ)
  22. 22. このセッションの内容 • レイアウトXMLの仕様と構造 • テンプレートの書き方と親子関係 • ブロックのあれこれ • ウィジェット • カスタマイズ例
  23. 23. レイアウトXMLの仕様と構造
  24. 24. レイアウトXML • Magento独自の画面レイアウト定義用XMLファイル • これを知らなくちゃデザインカスタマイズは始まらない • 定義単位はエクステンション単位 • 1ファイルに複数画面の定義を記述可能 • メールテンプレートの一部パーツもレイアウトXMLで定義されている
  25. 25. local.xml • すべてのレイアウトXMLの中で、一番最後に処理されるファイル • テーマ固有のカスタマイズを書くために使用する • 既成テーマをカスタマイズする際に、独自カスタム内容を分けるために使う • ただし、幾つかできないことがあるので注意
  26. 26. レイアウトXMLの仕様
  27. 27. レイアウトXMLで使用するタグ • block • reference • action • update • remove • label • actionのパラメータタグ
  28. 28. block • レイアウト上にブロックを追加 • typeまたはclass属性でブロッククラスを指定 • name属性でレイアウト上のブロック名を指定(重複しないように) • as属性でnameの別名を設定可能 • before / after 属性で追加位置を調整可能 • ネスト可
  29. 29. Blockの派生系(一部) 用途 子要素の自動表示 テンプレート Mage_Core_Block_Template 一般的なテンプレート用 ☓ 必要 Mage_Core_Block_Text_List 子要素のリスト表示用 ⃝ 不要 Mage_Core_Block_Text_Tag タグ生成用 ☓ 不要 Mage_Core_Block_Text_Link リンクリスト生成用 (ログインナビとか) ☓ 不要 Mage_Core_Block_Text テキスト表示用 ☓ 不要 Mage_Core_Block_Abstract 基底ブロック ☓ 任意
  30. 30. reference • 既にそのレイアウトで定義されているblockを参照する • nameでブロック名を指定 • action、blockを記述可
  31. 31. update • 既に定義してあるレイアウトを読み込む • 読み込んだ後でreferenceを使って追加・変更が可能 • handle属性にレイアウト定義名を指定する
  32. 32. remove • 既に定義されているブロックをレイアウト上から削除する • name属性にブロック名を指定する • 削除後、同名で再定義も可能
  33. 33. action • ブロックのクラスに定義されているpublicメソッドを実行する • 子要素にパラメータを指定可能 • ifconfig属性を使うことで、実行の制御が可能 • blockの違いを知る
  34. 34. レイアウトXMLの構造
  35. 35. 基本的な構造 <?xml version="1.0"?>
 <layout version="0.1.0">
 <default>
 <reference name="footer">
 <block type="cms/block" name="cms_footer_links" before="footer_links">
 <action method="setBlockId"><block_id>footer_links</block_id></action>
 </block>
 </reference>
 </default>
 
 <cms_page translate="label">
 <label>CMS Pages (All)</label>
 <reference name="content">
 <block type="core/template" name="page_content_heading" template="cms/content_heading.phtml"/>
 <block type="page/html_wrapper" name="cms.wrapper" translate="label">
 <label>CMS Content Wrapper</label>
 <action method="setElementClass"><value>std</value></action>
 <block type="cms/page" name="cms_page"/>
 </block>
 </reference>
 </cms_page> </layout>
  36. 36. 例 - 商品ページ <block type="core/template_facade" name="product.info.container1" as="container1">
 <action method=“setDataByKey"> <key>alias_in_layout</key> <value>container1</value> </action>
 <action method=“setDataByKeyFromRegistry"> <key>options_container</key> <key_in_registry>product</key_in_registry> </action>
 <action method="append"><block>product.info.options.wrapper</block></action>
 <action method="append"><block>product.info.options.wrapper.bottom</block></action>
 </block>
 <block type="core/template_facade" name="product.info.container2" as="container2">
 <action method=“setDataByKey"> <key>alias_in_layout</key> <value>container2</value> </action>
 <action method=“setDataByKeyFromRegistry"> <key>options_container</key> <key_in_registry>product</key_in_registry> </action>
 <action method="append"><block>product.info.options.wrapper</block></action>
 <action method="append"><block>product.info.options.wrapper.bottom</block></action>
 </block>
  37. 37. 例 - メールテンプレート <sales_email_order_items>
 <block type="sales/order_email_items" name="items" template="email/order/items.phtml">
 <action method=“addItemRender"> <type>default</type> <block>sales/order_email_items_order_default</block> <template>email/order/items/order/default.phtml</template> </action>
 <action method=“addItemRender"> <type>grouped</type> <block>sales/order_email_items_order_grouped</block> <template>email/order/items/order/default.phtml</template> </action>
 <block type="sales/order_totals" name="order_totals" template="sales/order/totals.phtml">
 <action method=“setLabelProperties"> <value>colspan="3" align="right" style="padding:3px 9px”</value> </action>
 <action method=“setValueProperties"> <value>align="right" style="padding:3px 9px”</value> </action>
 <block type="tax/sales_order_tax" name="tax" template="tax/order/tax.phtml">
 <action method="setIsPlaneMode"><value>1</value></action>
 </block>
 </block>
 </block>
 <block type="core/text_list" name="additional.product.info" />
 </sales_email_order_items>
  38. 38. テンプレートの書き方と 親子関係
  39. 39. Magentoのテンプレート • ただのPHPスクリプト • あらゆるPHP関数・構文が利用可能 • ゴリゴリ計算式を書いてもいいが・・・それが良い実装かどうかは別問題
  40. 40. テンプレートの例 <?php if (($_products = $this->getProductCollection()) && $_products->getSize()): ?>
 <h2 class="subtitle"><?php echo $this->__('New Products') ?></h2>
 <?php $_columnCount = $this->getColumnCount(); ?>
 <?php $i=0; foreach ($_products->getItems() as $_product): ?>
 <?php if ($i++%$_columnCount==0): ?>
 <ul class="products-grid">
 <?php endif ?>
 <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
 <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_product->getName()) ?>" class="product- image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135) ?>" width="135" height="135" alt="<?php echo $this->escapeHtml($_product->getName()) ?>" /></a>
 <h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_product->getName()) ? >"><?php echo $this->escapeHtml($_product->getName()) ?></a></h3>
 <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
 <?php echo $this->getPriceHtml($_product, true, '-new') ?>
 <div class="actions">
 <?php if($_product->isSaleable()): ?>
 <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
 <?php else: ?>
 <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
 <?php endif; ?>
 <ul class="add-to-links">
 <?php if ($this->helper('wishlist')->isAllow()) : ?>
 <li><a href="<?php echo $this->getAddToWishlistUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
 <?php endif; ?>
 <?php if ($_compareUrl = $this->getAddToCompareUrl($_product)): ?>
 <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
 <?php endif; ?>
 </ul>
 </div>
 </li>
 <?php if ($i%$_columnCount==0 || $i==count($_products)): ?>
 </ul>
 <?php endif ?>
 <?php endforeach; ?>
 <?php endif; ?>
  41. 41. テンプレートの親子関係 • レイアウトXML上の定義に沿って、テンプレートの親子関係も決まってくる • どちらかと言うとブロックの階層関係と同じ • 上位階層のテンプレートから下位階層のブロックを呼ぶ場合は、 getChildHtml()などを使用する
  42. 42. ウィジェット
  43. 43. CMSと静的ブロック上のウィジェット
  44. 44. CMSと静的ブロック上のウィジェット • あらかじめ定義されたパーツをCMSや静的ブロック上に埋め込む機能 • パーツは独自エクステンションを書くことで新しく追加することが可能
  45. 45. デザインテーマ上のウィジェット • ある特定のテーマ上に、CMSと同様にパーツを配置する機能 • テーマ依存なので、同じテーマを使うストアビューに等しく適用される • ウィジェットによって配置できる場所が決まっている
  46. 46. カスタマイズ例
  47. 47. 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>
  48. 48. 静的ブロックの埋め込み <reference name="foo"> <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> </reference>
  49. 49. レイアウトXMLを使わずにいきなりブロックを配置 $block = $this->getLayout()->createBlock( ext_name/block_name ); echo $block->toHtml();
  50. 50. おわり

×