Lazy Blocks &#8211; カスタムブロックの作成（注目製品）

Featured Product Grid：注目製品グリッド
コードを記述する
CSSの作成

コードを記述する

実際の HTML+Handlebars コード

<div class="featured-product-grid">
  {{#each featured-products}}
    <a class="product" href="{{product-link}}">
      <img class="product-image" src="{{product-image.url}}" alt="{{product-image.alt}}">
      <div class="product-text">
        <p class="product-name">{{featured-name}}</p>
        <p class="product-description">{{product-blurb}}</p>
      </div>
    </a>
  {{/each}}
</div>

Lazy Blocksに記述する元になるhtmlコード（これを元に上のハンドルバー構文に変換している）

<div class="featured-product-grid">
    <a class="product" href="https//:polo-web.com">
      <img class="product-image" src="画像パス" alt="画像alt">
      <div class="product-text">
        <p class="product-name">名前</p>
        <p class="product-description">product-blurb</p>
      </div>
    </a>
</div>

1行目：外側のコンテナを用意し、その中にそれぞれを配置する。
２行目に {{#each 各ループを配置、記述していく、二重括弧が正しく記述されていることを確認。最後に{{/each}}でループを終了するタグを入れる。
3行目移行は繰り返しの各ループに出力できるテンプレートになる。

ブロックを投稿ページに入れると以下のように表示される。

products1をクリックすると以下のように入力蘭が表示される。

それぞれ４つ分、入力してみる。

URLリンクは右側のチェックを入れること、これでリンクの確定になる。

ページでプレビューしてみる。

最初の部分だけですが４つとも問題なく作成されている。

CSSの作成

後はCSSを記述してレイアウトを整える。

ここにYoutube説明：https://www.youtube.com/watch?v=Klrsfp3ZZxI これは便利ではあるが有料なのでやめておく。使い勝手は非常にいいが、勉強のためには自分でCSSを記述しよう。

/* 各ブロックの横並び */
.featured-product-grid {
	display: flex; /*横並び*/
	flex-wrap:wrap;/*子要素を折り返す*/
}
/* ブロックの中の横並び */
.featured-product-grid a {
	display: flex; /*横並び*/
  flex-wrap:wrap;
}
.featured-product-grid .product-image {
  width: 60px; /*画像サイズ指定*/
	height:60px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.featured-product-grid .product-text {
	width: 160px; /*1つの枠の横幅*/
  margin: 0 0 0 20px;
  padding: 0;
}
.featured-product-grid .product-name {
  font-size: 1.5em;
	font-weight:bold;
	margin: 0 0 0 0px;
  padding: 0;
}
.featured-product-grid .product-description {
  font-size: 1em;
	margin: 0 0 0 0px;
  padding: 0;
}

投稿ページでのプレビュー。

ハンドルバーのクールな秘密の機能をもう２つ紹介します。
Lazy Blocksで使用できます。

以下のコードで各ループアイテムにループカウンターを追加したいとします。特定のアイテムを異なるスタイルにしたり、色を交互にしたりしたい場合。ループインデックス機能があるので、このインデックスを実行すると、ループないでその番号にアクセスでき、積を言うことができます。
つまり、追加作成していくアイテム毎に別のスタイルを適用できるようにすると言うことかな？

3行目、product-{{@index}}が追加した文になる。

<div class="featured-product-grid">
  {{#each featured-products}}
    <a class="product product-{{@index}}" href="{{product-link}}">
      <img class="product-image" src="{{product-image.url}}" alt="{{product-image.alt}}">
      <div class="product-text">
        <p class="product-name">{{product-name}}</p>
        <p class="product-description">{{product-blurb}}</p>
      </div>
    </a>
  {{/each}}
</div>

この状態で更新してプレビューでコードの要素を確認すると0、1、2、3の積が出力されているのがわかる。

0が最初に入るのは、インデクスのスタートが0からだから。実際にはLazy Blocksの秘密の数学演算子を使用する。それがどのように機能するか見てみましょう。

これも、Lazy Blocksのサイトでmath（数学）のハンドルバーを使って、加算、乗算、除算、パーセンテージも実行できる。
ループインデックスに１を加える。これで希望どおりの結果が出るはず。

3行目 {{math 1 ‘+’ @index}} と変更する。

<div class="featured-product-grid">
  {{#each featured-products}}
    <a class="product product-{{math 1 '+' @index}}" href="{{product-link}}">
      <img class="product-image" src="{{product-image.url}}" alt="{{product-image.alt}}">
      <div class="product-text">
        <p class="product-name">{{product-name}}</p>
        <p class="product-description">{{product-blurb}}</p>
      </div>
    </a>
  {{/each}}
</div>

０からでなく、１からスタートできるようになる。これで混乱することなく１からスタートできると言うわけ。

ここでもう一つのトリックを紹介。繰り返しは内のアイテムの数を取得したい場合は、下部で６までカウントできるが、それではダメです。親要素に特別なクラスを配置したい場合、例えば、４つの要素を配置し、小要素が４つある場合は２×２のグリッドにしたい場合と、小要素が３×２のグリッドにしたい場合がある。

長さのプロパティを使って、{{featured-products.length}}-products と追加します。
保存してページを開いて、要素を見てみると以下のように５つの商品がカウントされているのがわかる。これをクラスとして出力する。これを使って、２列のグリッドでなく３列のグリッドをレイアウトする。
もちろん、セレクターを使用することもできるし、ブロックのコントロールを使用して、基本的に２列のグリッドとして設定することもできる。
または３列のグリッドなど、ワークフローに合わせて設定してください。

ここまでの説明でインデックスを追加できることはわかったが実際にどう使うかがわからない。

話が次に進んだ。

カスタムブロックのCSSスタイルを読むことができます。これまではWordPressのカスタマイザーの追加のCSS部分を使用してきたが、明らかな欠点があり、このCSSがすべてのページに読み込まれることです。サイトにカスタムブロックを組み込むのは、おそらくサイト全体の20〜10%程度でしょう。
また、他の追加CSSとパッケージ化されているため、見つけ安くするため別々にしておくと良いでしょう。カスタムブロックのCSSを維持するには、２つの良い解決策があります。

１つのオプションは、インラインスタイルを使用して、HTMLを使用してページに出力されるブロックテンプレートにCSSを直接埋め込むことです。
もう一つの選択肢は、ページにLazy Blocksが配置されるたびに、Lazy Blocks用の別のスタイルシートを条件付きでロードすること。これはWordPressの組み込みのhasブロック機能を使用して実行できます。

まずは最初の方法が一番簡単です。では、これがどのように機能するかお見せしましょう。

HTMLタンプレートにスタイルタグをここに配置するだけ、以下は１番目のアイテムを青色でバックを付け、角丸にしている。さらにマウスを持っていくとホバー動作をるようにスタイルシートで設定追加した分。

CSSが効いていることがわかります。

このように、特にブロックを１ページ内で１回だけ使用する場合や、１〜２回しか使用しない場合は、これで問題ありまえせん。それほど大きくはなく、コードを使用していないサイトの他のページに読み込まれるコードを節約できるのでこれは多くの人にとってコードを追加する良い解決策だと思います。

最終的なコード：

<div class="featured-product-grid {{featured-products.length}}-products">
  {{#each featured-products}}
    <a class="product product-{{math 1 '+' @index}}" href="{{product-link}}">
      <img class="product-image" src="{{product-image.url}}" alt="{{product-image.alt}}">
      <div class="product-text">
        <p class="product-name">{{product-name}}</p>
        <p class="product-description">{{product-blurb}}</p>
      </div>
    </a>
  {{/each}}
</div>
<style>
  .featured-product-grid .product:first-of-type {
    background-color: rgb(105, 200, 255); !important;
    border-radius: 5px;
  }
  .featured-product-grid .product:hover {
    transform: translateY(2px);
  }
  .featured-product-grid .product {
    transition: all .25s;
  }
</style>

以上で完了。