Magentoブロックとウィジェットのビギナーズガイド

公開: 2022-02-16

ブロックとウィジェットは、Magentoの主要なレイアウト機能です。これらの2つの機能は非常に密接に関連しており、多くの場合、一緒に使用されます。

ブロックについて考える1つの方法は、それらがミニページであるということです。ブロックには、テキスト、画像、ビデオなどを含めることもできます。ただし、ブロックは小さいため、サイトの端に表示されます。多くの場合、ブロックはヘッダー、サイドバー、フッターに挿入されます。

ただし、ブロックはウィジェットを使用して配置されます。最初にブロックを作成し、次にウィジェットを使用してそのブロックを表示する場所を決定します。

いくつかの例を見ていき、Magentoでブロックとウィジェットがどのように機能するかを示しましょう。

このガイドは、Magento2のベストセラー本であるMagento2 Explainedから抜粋したものです。この本では、「Orangeville」というストアの例を使用しているため、ここで参照されています。

Magentoブロックの作成の説明

最初のブロックを作成するプロセスを見ていきましょう。これにはHTMLリンクが含まれます。

[コンテンツ]、[ブロック]の順に移動します。
右上隅にある[新しいブロックを追加]をクリックします。

新しいMagentoブロックを追加します

「ブロックタイトル」として「キーリンク」を入力します。これは、訪問者が画面に表示するものです。
識別子として「key_links」と入力します。この文字列はMagentoがブロックを識別するために使用するものですが、訪問者には表示されません。

キーリンクmagentoブロック

エディタツールバーの箇条書きアイコンをクリックします。

Magentoブロックの編集

箇条書きとして「AboutOrangeville」と入力します。
「オレンジビルについて」のテキストを選択し、リンクアイコンをクリックします。

Magentoブロック内のリンク

ポップアップウィンドウが表示されます。「オレンジビルについて」ページのURLを入力します。これが何であるかわからない場合は、新しいブラウザタブでMagentoサイトを開き、URLを見つけることができます。URLはexample.com/about-orangeville/である可能性があります。
「挿入」をクリックします。
これで、ブロック内に「AboutOrangeville」リンクができました。

オレンジビルについて

「ブロックを保存」をクリックします。

Magentoウィジェットの作成の説明

現在、ブロックをサイトデザインに配置するという課題があります。ここで、Magentoのウィジェットが役立ちます。 Magentoでは、ブロックは単なるコンテンツです。ブロックの配置を制御するのはウィジェットです。

ただし、ウィジェットで実行できるのはそれだけではありません。ウィジェットは、単純な新しいブロックを配置できますが、他の多くの機能を配置することもできます。

[コンテンツ]、[ウィジェット]の順に移動します。
「ウィジェットの追加」をクリックします。
「タイプ」には「CMS静的ブロック」を選択します。
「デザインテーマ」は「MagentoLuma」を選択してください。
「続行」をクリックします。

magentブロックを作成する

「ウィジェットタイトル」に「KeyOrangevilleLinks」と入力します。
[ストアビューに割り当てる]で、[すべてのストアビュー]を選択します。

キーリンクmagentoブロック

次に、このブロックが表示されるURLを制御します。

「レイアウト更新の追加」をクリックします。

Magentoレイアウトの更新

「すべてのページ」を選択します。

Magentoの全ページレイアウト

[コンテナ]オプションとして[CMSフッターリンク]を選択します。

Magentocmsフッター

「すべてのページ」と「CMSフッターリンク」の両方の選択肢は、まだあまり意味がないかもしれません。ただし、ウィジェットの作成は終了します。この章の後半の「Magentoウィジェットの配置の説明」のセクションで、これらの選択を行った理由について詳しく説明します。

[レイアウトの更新]で、ウィジェットを配置する場所を2番目に選択します。

「すべての製品タイプ」を選択します。
もう一度「CMSフッターリンク」を選択します。
これらのオプションの両方を追加すると、画面は次の画像のようになります。

Magentoブロックの配置

この時点で、ウィジェットを作成し、サイトのどこに表示するかをMagentoに指示しました。このウィジェットはすべてのページとすべての製品に表示されます。

次に、ウィジェットのコンテンツを選択します。これは、前に作成したブロックになります。

サイドバーの[ウィジェットオプション]をクリックします。
「ブロックの選択」をクリックします。

Magentoブロックを選択

これで、前に作成した「キーリンク」ブロックを選択できます。

Magentoブロックを選択

「保存」をクリックします。
サイトの前面にアクセスすると、リンクがフッターに公開されていることがわかります。コンテンツを使用してブロックを作成し、ウィジェット内に公開しました。

新しいMagentoブロックが表示されます

ブロックとウィジェットを一緒に作成する

ブロックとウィジェットを作成するときは、確かにいくつかのトリッキーな手順があります。それでは、このプロセス全体を一緒に試してみましょう。 2番目のブロックを作成し、ウィジェットを使用してサイトに配置します。このブロックは、100％の満足保証があることを人々に伝えます。

[コンテンツ]、[ブロック]の順に移動します。
「新しいブロックを追加」をクリックします。
タイトル：満足保証
識別子：保証

新しいMagentoブロック

ブロックのテキストを入力します。私は「ここオレンジビルでは、あなたの満足が私たちの最優先事項です。あなたが幸せでないなら、私たちはあなたのお金を返金します。」と書きました。

新しい画像ブロックMagento

次に、ブロックの画像をアップロードします。

書き込んだテキストの下のメインコンテンツ領域にカーソルを置きます。
エディタツールバーのツリーアイコンをクリックします。
ポップアップボックスが表示されたら、小さなボックスアイコンをクリックします。
アップロードできる画像を見つけます。 100％バッジを選択しました。

画像magentoブロックを追加

「ファイルの挿入」をクリックします。
画像の説明：満足保証
「挿入」をクリックします。

Magento画像のアップロード

これで、テキストと新しい画像の両方を含むブロックができました。
[ブロックを保存]をクリックして、このブロックの作成を終了します。

画像付きの新しいMagentoブロック

次に、このブロックをサイトに表示するウィジェットを作成しましょう。

[コンテンツ]、[ウィジェット]の順に移動します。
「ウィジェットの追加」をクリックします。
タイプ： CMS静的ブロック
デザインテーマ： Magento Luma

Magentoブロック設定

ウィジェットのタイトル：満足を保証
ストアビューへの割り当て：すべてのストアビュー

Magentoブロックのプロパティ

レイアウトの更新：アンカーカテゴリ
コンテナ：サイドバーメイン
「ウィジェットオプション」をクリックし、作成した「満足保証」ブロックを選択します。

Magentoウィジェットオプションは

「保存」をクリックします。
サイトの前面にアクセスします。トップメニューのカテゴリリンクの1つをクリックします。下の画像では、「フルーツ」をクリックしました。左側のサイドバーに保証ブロックが表示されます。

サイドバーのmagentoブロック

Magentoウィジェットの配置の説明

Magentoの学習者からよく寄せられる質問の1つは、ウィジェットの配置についてです。

コンテナに「CMSフッターリンク」または「サイドバーメイン」を選択する方法をどのように知っていますか？下の画像でわかるように、結局のところ、22の異なる選択肢があります。

「ページヘッダー後」と「ページヘッダー後トップ」の違いは何ですか？「ページフッター」と「ページフッターコンテナ」の違いは何ですか？それらの名前は非常に似ているため、間違いなく混乱する可能性があります。

Magentoウィジェットコンテナ

残念ながら、名前から配置の良いアイデアが得られますが、事前に伝える確実な方法はありません。

ページヘッダーの後：これはメインメニューの下にある可能性があります。
メインコンテンツ下部：これはおそらく、画面の中央部分、製品またはページコンテンツの下の下部にあります。
ページトップ：これはページの上部に表示されますが、製品画面には表示されません。

同じサイトであっても、これらのオプションが変わることは注目に値します。ブロックを配置して、ウィジェットの「レイアウトオプション」に「すべての製品タイプ」を選択しようとすると、下の画像に示すように、さまざまな選択肢が表示されます。これらのオプションは、製品画面にのみ意味のあるいくつかの配置を提供します。たとえば、「Product sociallinkscontainer」と「ReviewFormFieldsBefore」を含む選択肢が表示されます。これらのウィジェットの配置は、製品画面以外では意味がありません。

一方、このリストは非常に短い場合があります。この章の次のパートでは、一部のウィジェットに3つのコンテナオプションしかないことがわかります。

したがって、特定のコンテナを選択した場合にウィジェットが表示される場所を正確に知る方法は保証されていません。これらのさまざまなオプションをテストする際には、いくつかのテストと実験が必要になります。

Magentoウィジェットコンテナ製品

Magentoのブロックとウィジェットの概要

ブロックとウィジェットを使用すると、サイトのデザインに新しいアイテムを追加できます。ただし、サイトには、Magentoの管理インターフェイスから簡単に変更または置換できない要素がいくつかあります。それらはブロックとウィジェットである必要があるように見えますが、Magentoはそれらをそのように作成していません。そこで、これらのデフォルト要素のいくつかを更新するための手順を記載したページを作成しました。

Magentoについて詳しく知る準備ができている場合は、Magento2のベストセラー本であるMagento2Explainedをチェックしてください。

また、オンラインには、次のような優れたMagentoチュートリアルがいくつかあります。

Magentoの税金を理解するための初心者向けガイド
Magentoのベース、スモール、サムネイル、スウォッチの画像
Magento2インデックスとは何かとそれらを管理する方法を学ぶ