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日 / [最終更新日] 2024年12月9日 / カテゴリー：WordPress

この記事を書いた人

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

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

Follow @popodesign

最新情報をお届けします

同じカテゴリーの記事

WordPressで英語サイトの作り方【Poeditの翻訳・使い方】
WordPressで英語サイトを作る機会がありましたので、備忘録としてまとめてみました。私の英語力は全くないのですが、 [続きを読む]
WordPressメールフォームで「スパム送信の可能性があります」表示の修正方法
WordPressでメールフォームプラグインを設置して、送信テストをしていると「スパム送信の可能性があります」と表示され [続きを読む]
WordPressグーテンベルク(Gutenberg)のカラム落ちを調整
グーテンベルクを使い始めてページ作成が早くなりとても便利なのですが、「カラム」ボックスで２カラムのブロックを作り、画像 [続きを読む]
WordPressの画像をWebP(ウェッピー)に変換するプラグイン
Webサイトの表示速度を上げるため、画像をGoogleが推奨している画像形式「WebP（ウェッピー）」へ変換しました。初 [続きを読む]