Magento 2の画像の上にプロモーションラベルのレイヤーを配置するにはどうすればいいですか？私が含む画像は、Magento 2のテーマであり、「New Luma Yoga Collection ....」と編集者のイメージの上に何らかの形で置かれた "Shop New Yoga"ボタン。Magento 2の画像の上にプロモーションラベルを追加するにはどうすればよいですか？
これは、あなたがこれを達成することができますどのように様々な方法があります
エディタでどのように見えるかです。 1つの方法は、HTML要素を直接WYSIWYGエディタに追加し、HTMLでマークアップすることです。これはまた、Lumaのテーマがこれをどのようにして行ったかです。エディタを見ると、画像の下に小さな青色のコンテンツが表示されます。あなたがWYSIWYGのHTMLに切り替えた場合は、この要素のHTMLマークアップを見ることができます：
<span class="content bg-white">
<span class="info">New Luma Yoga Collection</span>
<strong class="title">Get fit and look fab in new seasonal styles</strong>
<span class="action more button">Shop New Yoga</span>
</span>
あなたは、単にこの要素のスタイルをCSSを使用することができます。
しかし...
これは非常に広く（そしてそれがそうするように簡単かつ高速です）、そのようなことをするのアプローチを使用しているが、それは最もエレガントな解決策ではありません。結局のところ、WYSIWYGエディタからは、「青いリンク」が実際には特別な要素であることは明らかではありません。あなたのクライアントがそれを乱用し始めると、彼はレイアウトを破ってあなたに電話します。「あなたがサイトを作ったので、それはあなたのせいです」。私を信じて、私はそこにいた...
より洗練されたソリューションは、ウィジェットを使用することです。ウィジェットは、ファイルを作成する必要がありますMagentoのまずに作成することは非常に簡単です、あなたのモジュールのetc -folderでwidget.xmlと呼ばれ、その中にこのようなものを置く：
<?xml version="1.0"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
<label translate="true">Example widget</label>
<description translate="true">This is an example widget</description>
</widget>
</widgets>
今、あなたはブロックを作成することができますあなたのモジュールのBlock -folderに：あなたはWYSIWYGエディタでウィジェットボタンをクリックした場合
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Example extends Template implements BlockInterface
{
/**
* @return string
*/
public function _toHtml()
{
return '<p class="hello">Hello world!</p>';
}
}
さて、ウィジェットの中から選択するウィジェットのリストに存在します：
今、あなたはあなたのWYSIWYGエディタでこのウィジェットを挿入した場合、あなたはHTMLについて確信している、それは出力（そのため、PHPで処理される）だろう、とあなたのクライアントは、「それを破る」することはできません。
あなたのシナリオでは、パラメータを追加して、ウィジェットを再利用できるようにすることができます。これは非常に簡単です。あなたのwidget.xmlを編集します。
<widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
<label translate="true">Example widget</label>
<description translate="true">This is an example widget</description>
<parameters>
<parameter name="name" xsi:type="text" visible="true" sort_order="0">
<label translate="true">Name</label>
<description translate="true">Please enter a name</description>
</parameter>
</parameters>
</widget>
そして、あなたのブロッククラスでそれを使用する：
public function _toHtml()
{
return '<p class="hello">Hello ' . $this->getName() . '</p>';
}
それは本当に簡単です。