13 May 2021 / Published in TechBlogs

Magento 2でカスタムウィジェットを作成する方法

ウィジェットは、CMSのページブロックやページにコンテンツを挿入したり編集したりするための優れたツールなので、Magento 2でウィジェットを作成するというトピックをお届けできてとても嬉しいです。この記事を読めば、理解が深まるでしょう。”この記事を読むと、「Magento 2のウィジェットとは何か」「Magento 2のストアでウィジェットを使用するにはどうすればよいか」を理解することができます。この記事を読めば、Magento 2で新しいウィジェットをカスタマイズすることができます。

1. Magento 2のウィジェットとは？
2. Magento 2でウィジェットを作成するための4つのステップ

1. Magento 2のウィジェットとは？

まず最初に、Magento 2のウィジェットについて説明します。

ウィジェットは、Magento 2 の設定において強力な機能を提供します。ストア管理者は、ウィジェットを活用して、生き生きとしたインターフェイスの下でストアフロントを改善することができます。ウィジェットは、静的な情報を表示したり、動的なコンテンツマーケティングを行うことができます。ここでは、Magento ウィジェットの実装例をご紹介します：

ダイナミックな製品データ
最近見た商品のダイナミックリスト
プロモーションバナー
インタラクティブなナビゲーション要素とアクションブロック
コンテンツページに挿入されるダイナミックなフラッシュエレメント

Magento 2 のウィジェットのカスタマイズは、シンプルなモジュールで最適化されたフロントエンドエクステンションに似ています。Magento 2のウィジェットを作るのは簡単ですか？それは、いくつかの追加ファイルを除けば、helloworldを作成するのと同じですから、絶対にイエスです。したがって、技術的な経験がなくても、ダイナミックなコンテンツのブロックによって、簡単に店頭を改善することができます。

2. Magento 2でウィジェットを作成するための4つのステップ

ステップ 1: ウィジェットを宣言する widget.xml

以下の内容のファイルetc/widget.xmlを作成します：

<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:helloworld:Magento_Widget:etc/widget.xsd">
	<widget class="Mageplaza\HelloWorld\Block\Widget\Posts" id="mageplaza_helloworld_posts">
		<label>Blog Posts</label>
		<description>Posts</description>
		<parameters>
			<parameter name="posts" sort_order="10" visible="true" xsi:type="text">
				<label>Custom Posts Label</label>
			</parameter>
		</parameters>
	</widget>
</widgets>

ステップ2：Magento 2でのウィジェットテンプレートファイルの作成

ファイル：view/frontend/templates/widget/posts.phtml

<?php if($block->getData('posts')): ?>
	<h2 class='posts'><?php echo $block->getData('posts'); ?></h2>
	<p>This is sample widget. Perform your code here.</p>
<?php endif; ?>

ステップ3：Widget Blockクラスの作成

ブロックファイルを作成します: Block/Widget/Posts.php

<?php 
namespace Mageplaza\HelloWorld\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface; 
 
class Posts extends Template implements BlockInterface {

	protected $_template = "widget/posts.phtml";

}