WordPressのブロックエディタでカスタムブロックを簡単に作成できるプラグイン【Block Lab】

WordPressがクラシックエディタからブロックエディタに変わってしばらく経ちました。最初は慣れなかったけど、いざ使ってみるとサクサク画面が作れて便利ですね。

未だにクラシックエディタプラグインを入れて欲しいっていう方もいるんですが、個人的には謎のタグが生成されたり、ビジュアルとテキストを切り替えてレイアウトくずれたりするクラシックエディタよりブロックエディタのほうが大好きです。

ブロックエディタはカラムや画像とテキストを横並びにするようなブロックも用意されていて便利ですが、それでもデザインにぴったり合わせることは難しいので、そういったときはこちらのプラグインでカスタムブロックを作成しています。

【よくある質問】ページなど、カスタムブロックで質問と答えを入力できるようにしてひとつのブロックにしておけば便利です!

プラグインをインストールしたら、【Block Lab】→【Add New】をクリック。

ブロックの名前を入力して、追加したいフィールドを追加していきます。

タイトルは【faq】、【Q】と【A】でそれぞれテキストフィールドを追加しました。

右側で、編集画面で呼び出す時のアイコンやカテゴリーも選択できます。

【公開】をクリックすると、パスが表示されるので、その通りにテーマファイルの中に、【block】ディレクトリを作成して、block-faq.phpファイルを作成します。

入力する内容を取り出すには、block_field()、get_block_field()といったタグを使用します。

例えばfaqの中身をddタグで作成する場合、下記のような記述になります。

<dd class="faq">
 <dt>Q:<?php block_field('q') ?></dt>
 <dd>A:<?php block_field('a') ?></dd>
</dd>

block-faq.phpの中身を上記のようにして、投稿画面でfaqブロックを呼び出します。

検索すればすぐ出てきます!

ブロックを選択すると、入力欄が表示されます。

こちらに入力して投稿すると、先ほどのhtmlで表示されるというわけです。

とっても簡単に思い通りのデザインが反映できますよね、、!

既存のブロックでは物足りないときにとってもおすすめです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


top