WordPressプラグイン「Lazy Blocks」の使い方を実例をまじえて解説！

こんにちは。
Web制作者のhikaruです。

今回はWordPressプラグイン「Lazy Blocks」の使い方を、
実例をまじえながら解説していこうと思います。

Lazy Blocksで作成するサンプルを確認

今回はFacebookのような、
プロフィールブロックを作成していきます。

Lazy Blocksでブロックを構成する

まずはじめにブロックを構成していきます！

右上のブロックタブを選択後に必要なデータを入力してください。
ちなみにここでは次のようにしました!

Title: 「プロフィール」
Sulg: 「profile」
Icon: 「顔マーク」
Category: 「ウィジェット」

ひとまず上記を入力しておけば大丈夫だと思います！

ブロック構成を解説

ブロック構成を解説すると、
これから「プロフィール画像」「名前」「自己紹介」などの部品を作っていきます。

これらの部品が所属するグループが必要になります。
(部品をまとめるラベルみたいな)

それがブロック構成です。

ブロックコントロールを追加する

次にブロックコントロールを追加していきます！

ここでは背景画像・プロフィール画像・名前・自己紹介の４つを作成しました。

背景画像

Label: 「背景画像」
Name: 「bg_img」
type: 「Image」

プロフィール画像

Label: 「プロフィール画像」
Name: 「profile_img」
type: 「Image」

名前

Label: 「名前」
Name: 「profile_name」
type: 「Text」

自己紹介

Label: 「自己紹介」
Name: 「self_introduction」
type: 「Text」

ブロックの出力コードを記述する

最後に作成したブロックを投稿に表示させるための、
コードを記述していきます！

まず「HTML + Handlebars」「PhP」「Theme Template」
の中から選択します。

今回はPHPで記述するのでPHPを選択しました。

選択後コードを記述していきます！

PHP

<div class="profile">
  <div class="profile__row1">
    <img class="profile__bg" src="<?php echo  esc_url( $attributes['bg_img']['url'] ); ?>">
    <img class="profile__icon" src="<?php echo esc_url( $attributes['profile_img']['url'] ); ?>" alt="<?php echo esc_attr( $attributes['profile_img']['alt'] ); ?>">
  </div>
  <div class="profile__row2">
    <p class="profile__name"><?php echo esc_attr( $attributes['profile_name'] ); ?></p>
    <p class="profile__self-introduction"><?php echo esc_attr( $attributes['self_introduction'] ); ?></p>
  </div>
</div>

Css

私の環境に最適化されているので、
使用する際にはご自身の環境用にアレンジしてください！

.profile {
  max-width: 480px;
  width: 100%;
  border-bottom: 1px solid #ddd;
}
.profile__bg {
  border-radius: 16px 16px 0 0;

}
.profile__row1 {
  position: relative;
  margin-bottom: 56px;
}
.profile__icon {
  position: absolute;
  width: 150px;
  height: 150px !important;
  object-fit: cover;
  border-radius: 90%;
  border: 4px solid #fff;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
}
.profile__name {
  font-size: 16px;
  margin-bottom: 16px !important;
}

PHPに関して解説！

今回ブロックコントロールを以下のように作成しました。

• 背景画像: 「Name = bg_img」
• プロフィール画像: 「Name = profile_img」
• 名前: 「Name = profile_name」
• 自己紹介: 「Name = self_introduction」

これから投稿エディタでそれぞれのフィールドに、
値を入力することになりますが、

入力されたデータを参照するには、
それぞれのNameからアクセスする必要があります。

要は下記のような構文。

名前: $attributes[‘profile_name’]
自己紹介: $attributes[‘self_introduction’]

画像に関しては、
「id」「url」「alt」「caption」「link」
を配列として所持しているので次のように書きます。

url: $attributes[‘profile_img’][‘url’]
alt: $attributes[‘profile_img’][‘alt’]

$attributesはLazy Blocksがもともと用意しているものなので、
他でも同じように書くことができます！

作成したブロックを実際に使ってみる

作成したブロックを確認して終わりたいと思います！

投稿エディタを開いて、
ブロックの追加 > ウィジェット > プロフィールを選択します。

プロフィールブロックが存在していることを確認できました！

まとめ

クラシックエディタ のサポート終了が近いので
今後ブロックエディタで納品する機会も多くなってくると思います。

正直まだクラシックエディタを好む方が多いですが、サポート終了後のことも考えると、
「ブロックエディタを提案していく必要があるかな」と思います。

以上「Lazy Blocksの使い方を実例をまじえて解説」でした！