こんにちはー、プライム・ストラテジーの森下です。
今回は次世代のAdvanced Custom Fieldsと思った「Block Lab」というプラグインについて紹介したいと思います。
カスタムブロックについて
プラグインの説明の前に前提知識のカスタムブロックについて簡単に説明します。新エディターのGutenbergではブロックという新しい概念が導入され、見出し、文章、画像などの要素をレゴブロックの様に組み合わせて記事を作成します。カスタムブロックはその名の通りで独自に作成したブロックのことです。Block Labというプラグインは独自のブロックを管理画面に簡単に追加することができます。
今まではショートコードやクイックタグ、Advanced Custom Fieldsをを使用して管理画面を拡張していましたが、今後カスタムブロックがそれらの代替機能として活躍していくのではないでしょうか。
Block Labの使い方
使い方はほとんどAdvanced Custom Fieldsと同じです。サンプルで１つブロックを作成してきます。まず「Add New」をクリックしてブロックを追加します。
次にブロック名とフィールドを追加していきます。
まずブロック名に「おすすめ商品」と入力して、次に「Add Field」をクリックして具体的フィールドの値を入力していきます。１つ目のフィールドは上記の通りに埋めてください。
それが完了したら続けて「Add Field」をクリックし、上記の画像の通りにもう２つフィールドを作成してください。
上記のように必要なブロックフィールドを作成したら「公開」を押して作成したブロックを有効化します。しかしこれだけでは当然フロントに表示されるようになりません。上記の画像にも表示されている通り作成したブロック用にテンプレートを作成する必要があります。そのテンプレートファイルを参照してフロントに表示されるようになります。それでは早速作成していきます。
// wp-content/theme/使用しているテーマ/blocks/block-product.php
<div class="product">
<h3><?php block_field( 'product-name' ); ?></h3>
<?php
// 画像があれば表示
$image = block_field( 'product-image', false );
if ( $image ) {
echo wp_get_attachment_image( $image );
}
?>
<p>
<?php
$product_information = block_value( 'product-detail' );
// デフォルトでは改行されないため下記を記述
echo nl2br($product_information); /
?>
</p>
</div>
使用しているテーマ配下にblocksというディレクトリを作成し、その中にblock-product.phpというファイルを作成し、そのファイル内に上記のコードを記述してください。そして先ほどのブロック編集画面に戻ってみてください。
すると先ほどのアラートは消えているので、きちんと先ほど作成したファイルが認識されていることが確認できます。そして管理画面「投稿」> 「新規追加」から先ほど作成したブロックを追加しきちんと表示されているかを確認します。
「ブロックを追加」をクリックし一般ブロックを覗くと「おすすめの商品」がちゃんと認識されてブロックとして保存されています。そしてクリックし、詳細な情報を入力していきます。
入力が完了するとプレビューをクリックして表示されているかを確認します。
きちんと表示されていることが確認できます。
保存されるテーブル
最初はwp_postmetaに保存されていると思ったらwp_postsのpost_content内にシリアライズ化されて保存されていました。すごく意外だったため一応記述しておきました。
*************************** 1. row ***************************
ID: 781
post_author: 1
post_date: 2019-06-01 09:35:21
post_date_gmt: 2019-06-01 00:35:21
post_content: <!-- wp:block-lab/product {"product-name":"新商品〇〇","product-image":813,"product-detail":"つい昨日発売されましたー！"} /-->
post_title: テスト
(略)
使ってみて感想
使いやすく未来感があるなとは思いましたが、ブロックを作成するごとにテンプレートファイルを作成したりUI等を鑑みるとまだまだAdvanced Custom Fieldsの方が使いやすいし便利だなと思いました。しかしブロック機能はGutenbergの醍醐味的要素なので自ずとカスタムブロックが主流になっていくんじゃないかなぁと思っています。
一応公式サイト、ドキュメントのリンクを下記に貼っておきます。
公式サイト：https://getblocklab.com/
ドキュメント：https://github.com/getblocklab/block-lab/wiki/
今回はいかがでしたでしょうか。今後新規サイト構築やサーバの引っ越しを考えられている方がいらっしゃいましたら、是非日本に大規模なデータセンターを構え、手厚いサービスをしてくれることで定評のある鈴与シンワートの「S-Port」クラウドを導入してみてください。
また、併せてKUSANAGIというWordPressサイトをキャッシュ未使用でも高速化を可能とするサービスも是非使ってみてはいかがでしょうか。
ご興味がある方は以下をご参照ください。
https://s-port.shinwart.com/service/eva/kusanagi/
