
マジェントプラットフォームは、CMS ページを作成し、そのページ内からブロックを呼び出すことができる柔軟性を持っています。しかし、それだけではなく、ブロックを作成して、マジェント バックエンドの CMS ページからはアクセスできない、Magento レイアウトの他の領域に適用したい場合もあります。
このチュートリアルでは、Magentoでカスタムブロックを作成する方法と、ウィジェットツールを使って特定のページにブロックを割り当てる方法を紹介します。
関連トピック:マジェント 2で注文をCSVにエクスポートする方法
1.カスタムブロックの作成
ステップ1:モジュールインストール用XMLファイル
カスタムブロックを/app/etc/modulesディレクトリに作成します。
例:「MyExtensions_HelloBlock.xml」
<?xml version="1.0" encoding="UTF-8"?>
<config>
<modules>
<MyExtensions_HelloBlock>
<active>true</active>
<codePool>local</codePool>
</MyExtensions_HelloBlock>
</modules>
</config>
ステップ2: モジュール構成用XMLファイル
/app/code/local/MyExtensions/HelloBlock/etc/config.xml
<?xml version="1.0" encoding="UTF-8"?>
<config>
<modules>
<MyExtensions_HelloBlock>
<version>0.0.1</version>
</MyExtensions_HelloBlock>
</modules>
<global>
<blocks>
<helloblock>
<class>MyExtensions_HelloBlock_Block</class>
</helloblock>
</blocks>
</global>
</config>
ステップ3:「Block」クラス
「Block」クラス(例:Hello.php)を /app/code/local/MyExtensions/HelloBlock の下に作成します。
<?php
class MyExtensions_HelloBlock_Block_Hello extends Mage_Core_Block_Template
{
public function hello()
{
echo “hello”;
}
}
?>
ステップ4:カスタムブロックのテンプレートファイル
ブロックに使用するテンプレートファイルを作成します。
<?php
$this->hello();
?>
以下のコードを入力すると、既存のテンプレートファイルにこのブロックが動的に作成されます。
//helloblock matches <helloblock> in the module config file
//hello matches the block class name
echo $this->getLayout()->createBlock('helloblock/hello')->setTemplate('helloblock/hello.phtml')->toHtml();
この「Block」が既存のレイアウトファイルに追加することで挿入されます。
<block type="helloblock/hello" name="helloblock" template="helloblock/hello.phtml"/>
例:以下のものを「view xml」のカテゴリ商品に挿入することができるように、
MageRoot/app/design/frontend/base/default/layout/catalog.xml
<catalog_product_view translate="label">
<label>Catalog Product View (Any)</label>
<!-- Mage_Catalog -->
<reference name="root">
<action method="setTemplate">
<template>page/2columns-right.phtml</template>
</action>
</reference>
<reference name="head">
<action method="addJs">
<script>varien/product.js</script>
</action>
<action method="addJs">
<script>varien/configurable.js</script>
</action>
<action method="addItem">
<type>js_css</type>
<name>calendar/calendar-win2k-1.css</name>
<params/>
<!--<if/><condition>can_load_calendar_js</condition>-->
</action>
<action method="addItem">
<type>js</type>
<name>calendar/calendar.js</name>
<!--<params/><if/><condition>can_load_calendar_js</condition>-->
</action>
<action method="addItem">
<type>js</type>
<name>calendar/calendar-setup.js</name>
<!--<params/><if/><condition>can_load_calendar_js</condition>-->
</action>
</reference>
<reference name="content">
<!--This is the line added to this catalog.xml file-->
<block type="helloblock/hello" name="helloblock_hello" template="helloblock/hello.phtml"/>
ステップ5: 「hello」ブロックを追加した後にキャッシュを更新すると、商品の詳細ページに「Hello」が表示されます。
2.ウィジェットでブロック(Block)配置
ステップ1:ウィジェットタイプを選択します。
- 管理画面のサイドバーで、「コンテンツ(Content)」→「要素(Elements)」→「ウィジェット(Widgets)」と進みます。
- 右上にある「ウィジェットを追加(Add Widget)」をクリックします。
- [設定(Settings)]セクションで、[タイプ(Type)]に[CMS静的ブロック]を設定し、 [続行(Continue)]を押下します。
- 「Design Theme」が現在のテーマに設定されていることを確認し、[続行(Continue)]を押下します。

- ストアフロントのプロパティ]セクションで、次の操作を行います。
- 「Widget Title」にタイトルを入力します。
- 「Assign to Store Views」では、ウィジェットが表示されるストアビューを選択します。特定のストアビューを選択することも、すべてのストアビューを選択することもできます。
複数のビューを選択するには、Ctrlキー(PC)またはCommandキー(Mac)を押しながら、各オプションをクリックします。

ステップ2: ウィジェットのレイアウト更新を完了します。
- 「レイアウトアップデート」セクションで、「レイアウトアップデートの追加(Add Layout Update)」をクリックします。
- ブロックを表示したいカテゴリー、商品、ページに「表示する」を設定します。
- ブロックを特定のページに配置するには
- ブロックを表示したいページを選択します。
- ブロックがページに表示される場所を特定する「ブロック参照(Block Reference)」を選択します。
- CMS静的ブロックデフォルトテンプレートに設定されているテンプレートのデフォルト設定を受け入れます。

ステップ3: ブロックの配置
- 左パネルで「ウィジェットオプション(Widget Options)」を選択します。
- 「ブロックを選択…(Select Block…)」をクリックし、リストから配置したいブロックを選択します。
- 完了したら「保存(Save)」をクリックします。アプリがリストに表示されます。
- プロンプトが表示されたら、ページ上部の指示に従ってインデックスとページキャッシュを更新します。
- ストアフロントに戻り、ブロックが正しい位置に表示されていることを確認します。ウィジェットを再度開いて、ブロックを別のページに移動したり、ブロックの参照先を変更することができます。