Lazy Blocksの解説

今回はLazy Blocksの解説をしていきます。全３回になるかと思います。

Lazy Blocksとは？

WordPress5.0から導入されたGutenbergという、ブロック型エディタで使えるカスタムブロックのことです。

ブロックエディタについては、詳細を省きます。（自分で調べてね('ω')）

他にもカスタムブロックについては、Block Labなどもあるらしいですが今回はこの、Lazy Blocksについて、メモ的に残しておこうと思います。

ブロックの作り方

テキストのカスタムブロックを作る例

新規プラグインから、Lazy Blocksを追加します。（有効化を忘れずに！）

左のメニューにLazy Blocksが追加されていることを確認し、新規追加をクリック。

Controlsからプラスマークをクリック。

右のメニュー画面で追加したコントロールの詳細を決定していく。

基本的には3つを入力していれば問題ないです。

①　Label
コントロールの名前。わかりやすい名前であればなんでもOKです。

②　Name
コントロールの変数名。コード画面で呼び出すので被りは無し。一意な名前にする。

③　Type
コントロールのタイプ。テキストやら画像やらを選べる。

次にコードを書いていく。

PHPや、Lazy Blocksが用意したHTML Hundlebersなど各々が描きやすい構文で書いていく。
今回はPHPで書いていきます。
先ほど追加したName（変数名）を使用します。

右のメニュー画面上部タブからBlockを選択し、このカスタムブロックそのものの詳細を決定していく。

基本的には、3つを入力していれば問題ありません。

①　Title
カスタムブロックの名前。表示名になります。なんでもOKです。

②　Slug
カスタムブロックのSlug名です。カスタムブロックを識別するために使います。一意な名前にします。

③　Category
カテゴリー選択欄です。実際にブロックを選択する際に役立ちます。

あとは、icon、keyword、Descriptionなどですが、好みでおつけください。

最後に、公開を押して準備完了です。

実際に使ってみる。

固定ページでも、投稿ページでもいいのでブロックエディタを表示させます。

左上にある、プラスボタンを押します。

すると、ブロック欄の一番下に先ほど作ったカスタムブロックがでているはずです。

それをクリックすれば、エディタ欄で、カスタムブロックとして使用できます。

the content(); などでそのまま表示できます。

終わりに

今回はLazy Blocksの使い方について、解説しました。

もっと詳細を知りたい方は、Lazy Blocksのドキュメントページを参照してください。
https://lazyblocks.com/

次は、Lazy Blocksのタイプについてまとめたいと思います。

次→Lazy Blocksのタイプ解説