Block LabはWordPressの新しいエディタGutengergにカスタムブロックを追加する事ができるプラグインです。
当サイトではBlock Labを使って、さまざまな目的に合ったカスタムブロックの作り方を紹介しています。
この記事ではその基本となる操作・設定の仕方を解説します！
前提条件
- FTPツール：サーバへファイルを送信するためのツール
FTPツールがよく分からない方は、レンタルサーバにファイルマネージャーという機能があればOK - php, cssを書く知識
もちろんコピペでOK
一見難しいのですが、意外と簡単なので気軽に取り組んでみましょう！
今回のゴール
このような感じの青い枠で囲うブロックを作成します。
プラグインの使い方
Block Labをインストールする
まずはプラグインをインストールします。
上記リンクの「Block Lab」をインストールしてください。
プラグインのインストール方法が分からない方はこちら。
WordPressを活用するうえで欠かすことのできない要素が、プラグインです。この記事では、プラグインのインストール方法について紹介致します。プラグインはWordPressを使うなら絶対に必要になります。便[…]
Block Labの設定
Block Labを有効化すると、WordPress管理画面のサイドメニューにBlock Labが追加されています。クリックして設定画面を開いてください。
まだ何もしていないのでまっさらな状態です。
上にある「Add New」ボタンを押して、新規作成します。
こちらが追加画面です。
まずはこのブロックのタイトルをつけましょう。これが記事作成画面で表示される名前になります。
入力が出来たら、右側にブロック情報を入力します。
内容は以下の通りになります。
- Slug: この後配置するphp,cssのファイル名になります。スペース、カンマはNG
- Icon: 記事編集画面で表示されるアイコン。好きな物をどうぞ。
- Category: カスタムブロックのカテゴリを選択します。記事編集画面に影響します。
- Keywords: カスタムブロック一覧から検索する際に適用されるキーワード。最大3つまで設定可
今度は、青枠の中に入力した文字が入れられるようにしたいので、テキストフィールドを追加します。
フィールドを追加する際は、「Add Field」ボタンを押します。
こんな画面が出ます。少々難しいですが、それぞれの意味は以下になっています。
- 入力必須項目
- Field Label: フィールラベル。そのフィールドのタイトルになります。
- Field Name: フィールド名。IDになるので、スペースを入れずシンプルなものにしましょう。
- Field Type: そのフィールドの種類を一覧から選びます。
- Field Location: フィールドの表示箇所を選択します。
- Editor: エディタのブロック内にそのまま表示。基本こっち。
- Inspector: 記事編集画面の右側の設定箇所
- 任意入力項目
- Help Text: フィールドの意味などを補足する際に使う
- Default Value: デフォルトの値
- Placeholder Text: プレースホルダー
- Character Limit: 最大文字数。入力しなければ制限なし
以上を踏まえて、今回の青枠ボックスでは全体を以下のように入力しました。
- タイトル: blueBox
- Slug: box-blue
- Icon: Choose
- Category: レイアウト要素
- Keywords: blueBox
- Field Label: text
- Field Name: text
- Field Type: Textarea(複数行入力できる)
- Field Location: Editor
- Help Text: なし
- Default Value: なし
- Placeholder Text: なし
- Character Limit: なし
- Number of Rows: 4(適当)
- New Lines: Automatically add line breks
ここまで入力できたら、「Close Field」ボタンを押してフィールド入力を完了し、更新ボタンを押します。
完了したら上記のようなメッセージが表示されます。ふわっと意訳すると、「あなたのテーマの以下パスにphpファイルを置いてね」という感じです。次でその手順を説明します。
php, cssファイルを用意する
Block Lab側の準備ができたら、php, cssファイルを用意しましょう。
適当なテキストを作成し、ファイル名を以下のように変更します。
「block-[Slag欄で指定した文字].php」
「block-[Slag欄で指定した文字].css」
今回は、block-box-blueとなります。
それぞれのファイルの中身は、以下のように記述します。
・block-box-blue.php
<div class="box_blue"> <p><?php block_field('text'); ?></p></div>2行目のでフィールド設定した際のフィールド名を使います。今回は’text’となります。
・ block-box-blue.css
box_border{border:1px solid #E5E5E5;padding:20px;margin-top:20px;}ここではレイアウトが指定されます。任意になりますが、今回の例ではそのままコピーすれば同じものができます。
各ファイルを配置する
ファイルの用意ができたら、指定されたパスに配置します。
FTPツールか、レンタルサーバのファイルマネージャーを開きます。
今回は例として、さくらのレンタルサーバのファイルマネージャーを使用しています。
画面が表示されたら先ほどのメッセージで指定されたパスにそのまま2つのファイルを置くだけです。
先ほどのパスの”/blocks”以下は最初存在しないので、blocksフォルダを作成しそこにphpファイルとcssファイルを配置する感じです。
これでカスタムブロックの作成は完了です！
確認
ちょっとしたミスで動作しなかったりするので、作ったらしっかり確認しましょう。WordPressの編集画面を開いて、Blockを追加します。
一覧に追加されています。
編集画面に設置すると、入力欄が出ています。
適当に文字を入力して、ブロック外をクリックすると…
青枠付きで文字が表示されました！
最後に
「Block Lab」は特別なツールも(使いたくなければ)使う必要はありませんし、カスタムブロックを作成するうえでは一番簡単に実現できるプラグインだと思います。
また、CSSが分からない方はブラウザで検索すれば、大体出てきます。
以下のサイトなんかはとても沢山のサンプルをあげてくれていて、私もお世話になっています。
⇒サルワカ -【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30 –
Block Labの使い方とHTML/CSSのコピペさえできちゃえば、多くの人が有料テーマを買ってでも使う「会話形式」のブロックだって簡単に作れちゃいますよ！
もし「こんなカスタムブロック作りたいんだけど、検索しても見つからない…」ということがあれば、私にご連絡くださいね！
作成可能なものであれば、作り方の記事を公開します！
今回の記事について、もし不明点があればコメント欄にてお問い合わせください。
TwitterのDMなども受け付けていますので、お気軽にご連絡ください！