新しいウィジェットを作成方法

#カスタムウィジェット
ウィジェットとは、ストアのページに動的またはスタティックコンテンツを追加するために使用されるMagento 2の機能があります。

#ウィジェットを作成
新しいウィジェットステップ：

1. widget.xmlファイルにウィジェットを宣言する
2. widget.xmlファイルにウィジェットのパラメーターを追加
3. ウィジェットを確認する
4. ウィジェットのブロッククラスを作成する
5. ウィジェットのテンプレートファイルを作成する
6. フロントエンドに表示を確認する

##widget.xmlファイルにウィジェットを宣言
etc/widget.xmlファイルに、名前、説明、ブロッククラスなどのウィジェット基本情報を定義します

Karabiner/Widget/etc/widget.xml

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
        <label>New Widget</label>
        <description>This is a New Widget</description>
        <parameters>
            ...
        </parameters>
        <containers>
            ...
        </containers>
    </widget>
</widgets>

module.xmlファイルのMagento_WidgetへのDependenciesを追加する必要があります。

Karabiner/Widget/etc/module.xml

...
<sequence>
    <module name="Magento_Widget" />
</sequence>
...

##widget.xmlファイルにウィジェットのパラメーターを追加
パラメータとして、以下のフィールドタイプ使用できる：
テキスト
セレクト
複数セレクト
ブロック

以下例はテキストとセレクトフィールドを追加しました

Karabiner/Widget/etc/widget.xml

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
        ...
        <parameters>
            <!-- テキスト -->
            <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">　
                <label>Label</label>
            </parameter>
            <!-- セレクト -->
            <parameter name="size" xsi:type="select" visible="true" required="true" sort_order="20"> 
                <label translate="true">Size</label>
                <options>
                    <option name="s" value="S">
                        <label>S</label>
                    </option>
                    <option name="m" value="M" selected="true">
                        <label>M</label>
                    </option>
                    <option name="l" value="L">
                        <label>L</label>
                    </option>
                </options>
            </parameter>
        </parameters>
    </widget>
</widgets>

##ウィジェットを確認する
キャッシュクリアコマンド php bin / magento cache：flush を実行した後

   Admin panel > Content > Pages > Homepage(または任意のページ) > Edit

[コンテンツ]タブで、[ウィジェットの挿入]アイコンをクリックします。

##ウィジェットのブロッククラスを作成する
ブロッククラスは、テンプレートファイルにデータを提供するクラスです。
このクラスの$_template = "widget/test.phtmlはテンプレートファイル場所を設定します

Karabiner/Widget/Block/Widget/Test.php

namespace Karabiner\Widget\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Test extends Template implements BlockInterface
{
    protected $_template = "widget/test.phtml";
}

##ウィジェットのテンプレートファイルを作成する

フロントエンドでウィジェットのデータを表示するために使用されるテンプレートを作成します。

Karabiner/widget/view/frontend/templates/widget/test.phtml

<?php
/** \Karabiner\Widget\Block\Widget\Test $block */
?>
<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>
<h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3>

##フロントエンドに表示を確認する
以下のコマンドを使用して、Magentoキャッシュを削除します。

php bin/magento cache:flush

ウィジェットがフロントエンドに表示されるようになりました。