Lazy Blocksの使い方・WordPressでカスタムブロックが作れるプラグイン

WordPressのブロックエディターで、独自のカスタムブロックを作れるプラグイン、Lazy Blocksを使ってみたのでレビューします。

カスタムブロックの作り方

まずは管理画面の「プラグイン」→「新規追加」からプラグインの検索で「Lazy Blocks」と検索して「Custom Blocks Constructor-Lazy Blocks」の「今すぐインストール」ボタンを押してインストール、「有効化」します。

有効化したら、左メニューに「Lazy Blocks」のメニューが出来ているので選択。
ブロックの「新規投稿を追加」ボタンを押して新しいブロックを追加します。
あらかじめ入っているサンプルブロックを見ると使い方の役に立ちました。

新規投稿を追加したら、編集画面でタイトルを入力します。ここは自分が分かれば何でも良いので「テストのURL」にしました。
タイトルを入力したら「Content Controls」をクリックしてカテゴリーを追加します。
右側のパネルが表示されるので、項目を入力していきます。

SLUGはカスタムブロックを表示するURLなので、半角英数字で入力。ここでは「buttun-url」。
CATEGORYはどのブロックカテゴリーに表示させたいかを選択します。ここでは一番上に表示される「テキスト」にしました。
DESCRIPTIONは説明文なので「テストのボタン」にしておきました。

次に実際のブロックを追加します。中央の「＋」プラスボタンをクリックして追加。
右側のパネル項目を埋めて行きます。

LABELはカスタムブロックに表示される名前です。「テストのボタン」にしました。
NAMEはURLの名前部分です。「button-url」とカテゴリーで付けた名前と合わせておきます。
TYPEは、今回はURLのブロックを追加するので「URL」を選択。

Codeについて

画面下をスクロールして、Codeの項目からカスタムブロックを出力するタグを入れます。
今回はPHPの項目を選択して、HTMLのタグの中にPHPを入れて、先ほど作った「button-url」を入力します。

実際に書き込んだタグ。echo esc_urlリンクタグで、attributesで作ったカスタムブロックの名称を囲むとうまくいきました。



<p class="test-button">
    <a href="<?php echo esc_url( $attributes['button-url'] ); ?>" target="_blank">
        <i class="fas fa-link"></i>
テストのボタン <i class="fas fa-external-link-alt"></i>
    </a>
</p>

完成したら、右上の「公開」ボタンを押して、ようやくカスタムブロックの完成です。

こんな感じでURLだけでなく、画像や他のカスタムブロックも作成できます。

カスタムブロックは出来たので、実際の投稿ページか固定ページを開いてブロックを追加すると、先ほど作ったカスタムブロックが表示されています。

カスタムブロックを追加したところ。URLの入力欄が表示されるので、リンクさせたいURLを入力すれば完成です。

まとめ

最初はどこがどの部分になるのかよく分かりませんでしたが、触っていくうちに少しずつ理解してきました。PHP別ファイルを用意する必要もなく、管理画面の中だけでカスタムブロックが作れるのはすごく便利でした。

[公開日] 2024年10月31日 / カテゴリー：WordPress

この記事を書いた人

ポポデザイン
西宮市在住のWEBクリエイター・グラフィックデザイナー・マーケター。ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
Facebook｜X｜Instagram

この記事が気に入ったら
いいね！をお願いします

Follow @popodesign

最新情報をお届けします

同じカテゴリーの記事

WordPressの[…]を【続きを読む】に表示・抜粋文字数を変更する方法
PHPのバージョンを上げたら、投稿の抜粋を表示するPHPタグで下記のようなエラーが出ました。 Warning: Unde [続きを読む]
【WP Mail SMTP】WordPressでメールが届かない時の設定方法
WordPressのメールフォームプラグイン「Contact Form 7」や「Snow Monkey Forms」など [続きを読む]
レンタルサーバーの借り方（ロリポップ！）
サーバーとはホームぺージのデータを置いておく「場所」のことです。レンタルサーバーを借りることで、自分で作ったホームペー [続きを読む]
WordPressはテーマカスタマイズかオリジナルテーマ制作かの判断基準
WordPressがグーテンベルクのブロックエディターというものになってから、ホームページの制作は誰でも簡単に作れるよう [続きを読む]