Kinstaでは、これまで様々な角度からWordPressのブロックエディター「Gutenberg」を掘り下げてきました。エディター機能の解説、他のページビルダーとの比較、静的および動的なカスタムブロックの構築など、その他多数のトピックをご紹介しています。
WordPressの最新バージョンでは、新たな機能なツールにより、カスタムブロックを構築することなく、ブロックエディターの機能を強化し、複雑なレイアウトをより簡単に作成できるようになっています。
ブロックパターンやBlock Bindings APIなどの開発ツールの導入により、カスタムブロックを作成する必要性が減り、エディターを離れることなく、複雑なブロック構造を作成したり、コンテンツにメタデータ値を注入したり、ワークフローの大部分を自動化したりできるように。今日のWordPressでは、複雑なサイトを最小限のクリック数で完成させることができます。
さらに一歩進んで、エディターに独自の設定やツールを実装することで、コンテンツ作成をさらにスムーズにすることが可能です。例えば、投稿サイドバーに機能追加用のパネルを実装したり、複数のメタフィールドを管理するために独自のサイドバーを作成したりなどが挙げられます。
カスタムブロックなしでGutenbergプラグインを作成する方法
WordPressには便利なコマンドラインツールがあり、カスタムブロックを作成するために必要なファイルと依存関係をすべて揃えたNode.js開発環境をローカルにインストールできます。インストール手順はコマンドラインツールにnpx @wordpress/create-blockと入力し、数秒待つだけで完了です。
しかしサイドバーやシンプルな設定パネルを追加するだけであれば、カスタムブロックを作成する必要はなく、Gutenbergプラグインを作成できます。
WordPressには、Gutenberg向けのプラグインを作成するプロセスを自動化するユーティリティがないため、自分で作成する必要がありますが、手順は比較的シンプルです。以下、その方法を順を追ってご紹介していきます。
1. ローカル開発環境をダウンロード/インストールする
はじめに）リモート環境でGutenbergプラグインを開発することもできますが、開発用のWordPressサイトをローカルにインストールした方が効率的かもしれません。PHPとMySQLをベースにした環境であればOKです。ローカル開発ツールは多数ありますが、DevKinstaは機能豊富で無料で利用でき、使い勝手も良く、Kinstaと互換性があります。
開発サイトをセットアップしたら、Gutenberg向けプラグインを作成する準備が完了です。
2. Node.jsとnpmをダウンロード/インストールする
nodejs.orgからNode.jsをダウンロードし、コンピュータにインストールします。Nodeのパッケージマネージャーであるnpmもインストールしてください。
その後、コマンドラインツールを起動し、node -vとnpm -vを実行すると、インストールしたNode.jsとnpmのバージョンが表示されます。
3. プラグインのフォルダを作成する
wp-content/pluginsの下にmy-sidebar-pluginなどの名前でフォルダを作成します。フォルダ名にはプラグイン名を反映させてください。
ターミナルを開いてプラグインのフォルダに移動し、以下のコマンドでnpmプロジェクトを初期化します。
npm init -yこれで基本的なpackage.jsonファイルが作成されます。
4. 依存関係をインストールする
コマンドラインツールで、以下のコマンドを入力します。
npm install @wordpress/plugins @wordpress/scripts --save-dev@wordpress/plugins：WordPress用のpluginsモジュールをインストール@wordpress/scripts：WordPress開発用の一連の再利用可能なスクリプトをインストール
これで、node_modulesフォルダがプロジェクトに追加されます。
続いて、package.jsonを開いて、scriptsを以下のように更新します。
{
"name": "my-sidebar-plugin",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@wordpress/plugins": "^7.14.0",
"@wordpress/scripts": "^30.7.0"
}
}これでプラグインのフォルダを確認することができます。
5. プラグインのファイルを作成する
プラグインのディレクトリに.phpファイルを作成し、フォルダと同じ名前を付けます（今回の例では、my-sidebar-plugin.php）。
ファイルを開き、以下のコードを貼り付けてプラグインをサーバーに登録します。
<?php
/**
* Plugin Name: My Sidebar Plugin
*/
function my_sidebar_plugin_register_script() {
wp_enqueue_script(
'my_sidebar_plugin_script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );次にプラグインのディレクトリにsrcフォルダを作成し、以下のコードでこのフォルダ内にindex.jsファイルを作成します。
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/edit-post';
const MyPluginSidebar = () => (
<PluginSidebar
name="my-sidebar-plugin"
title="My Sidebar Plugin"
>
<div>
Hello my friends!
</div>
</PluginSidebar>
);
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );6. コードをコンパイルする
あとはビルドするのみ。コマンドラインに戻って以下のコマンドを実行しましょう。
npm run buildこれで、プロジェクトの圧縮ファイルが入ったbuildフォルダが生成されます。
これが完了したら、WordPress管理画面の「プラグイン」に移動し、プラグインを有効化します。新規投稿または固定ページを作成し、右上のコンセントプラグのアイコンをクリックすると、カスタムサイドバーが表示されます。
7. 開発とビルド
srcフォルダにindex.jsファイルを配置しています。srcフォルダを使用するのは、WordPressのプラグインやテーマの開発における一般的な慣例であり、他の開発者がコードを理解しやすくなります。
srcフォルダにJSコードを配置することで、npm startまたはnpm run startコマンドを使ってスクリプトを監視し、必要に応じてコードを自動的に再コンパイルする開発環境を起動できます。開発が完了したら、npm buildまたはnpm run buildコマンドで、JavaScript コードをbuildフォルダにコンパイルし、本番用に最適化されたコードを格納します。
続いては、上記で見た内容を実践し、この例で作成したプラグインを修正して、カスタムフィールドを管理するためのパネルを投稿エディターのサイドバーに追加してみましょう。
投稿のメタフィールドを管理するために独自のサイドバーを作成する方法
ここでの目標は、独自のメタフォールドを追加・編集するための単一のテキストフィールドを持つパネルを含むカスタムサイドバーを作成することです。
なお、カスタムメタボックスを使用して同様の結果を得ることも可能です。WordPress 6.7では、メタボックスがアップグレードされており、ブロックエディターと完全に互換性があります。今回はメタボックスではなく、カスタムサイドバーからメタフィールドを管理する理由としては、サイドバーを使用することで組み込みのコンポーネントを活用できるためです。WordPressユーザーにとって馴染みがあり、性能にも優れたコンポーネントを使用することで、よりユーザーフレンドリーなインターフェースを構築できます。
ここからは、エディターからカスタムフィールドを管理するサイドバーを作成する手順を見ていきます。
my-sidebar-plugin.php
ステップ1. 投稿メタの登録
まずはメタフィールドを登録します。以下のコードをプラグインのメインファイルに追加します。
function my_sidebar_plugin_register_meta() {
register_post_meta(
'post',
'meta_fields_book_title',
array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'label' => __( 'Book title', 'my-sidebar-plugin' ),
'auth_callback' => function() {
return current_user_can( 'edit_posts' );
}
)
);
}
add_action( 'init', 'my_sidebar_plugin_register_meta' );register_post_meta関数は、以下3つの引数を受け取ります。
- メタキーを登録する投稿タイプ：空文字列を指定して既存のすべての投稿タイプにメタキーを登録。
- 登録するメタキー：メタキーの先頭にアンダースコア（_）を使用すると、カスタムフィールドが非表示になるため、アンダースコアを入れない。カスタムフィールドが非表示になると、Block Bindings APIを使って投稿内容でメタフィールドを使うことができなくなる。
- 引数の配列：
show_in_restはtrueに設定する。これによりメタフィールドがREST APIに公開され、メタフィールドをブロック属性に関連付けることができるようになる。その他の属性についてはこちら。
ステップ2. メタボックスの登録
プラグインの後方互換性を確保するため、クラシックエディターを使用しているユーザーもカスタムフィールドを管理できるように、カスタムメタボックスを登録します。以下のコードをプラグインのPHPファイルに追加してください。
/**
* メタボックスを登録
*
* @link https://developer.wordpress.org/reference/functions/add_meta_box/
*
*/
function my_sidebar_plugin_register_meta_box(){
add_meta_box(
'book_meta_box', // 一意のID
__( 'Book details' ), // ボックス名
'my_sidebar_plugin_meta_box_callback', // コンテンツのコールバック
array( 'post' ), // Post types
'advanced', // コンテンツ
'default', // 優先
array('__back_compat_meta_box' => true) // Gutenbergでメタボックスを隠す
);
}
add_action( 'add_meta_boxes', 'my_sidebar_plugin_register_meta_box' );フォームを作成するコールバックを宣言します。
/**
* メタボックスフォームの作成
*
* @link https://developer.wordpress.org/reference/functions/wp_nonce_field/
* @link https://developer.wordpress.org/reference/functions/get_post_meta/
*
*/
function my_sidebar_plugin_meta_box_callback( $post ){
wp_nonce_field( 'my_sidebar_plugin_save_meta_box_data', 'my_sidebar_plugin_meta_box_nonce' );
$title = get_post_meta( $post->ID, 'meta_fields_book_title', true );
?>
<div class="inside">
<p><strong><?php echo __( 'Book title', 'my-sidebar-plugin' ); ?></strong></p>
<p><input type="text" id="meta_fields_book_title" name="meta_fields_book_title" value="<?php echo esc_attr( $title ); ?>" /></p>
</div>
<?php
}続いて、メタフィールドをデータベースに保存する関数を記述します。
/**
* メタデータを保存
*
* @link https://developer.wordpress.org/reference/functions/wp_verify_nonce/
* @link https://developer.wordpress.org/reference/functions/current_user_can/
* @link https://developer.wordpress.org/reference/functions/sanitize_text_field/
* @link https://developer.wordpress.org/reference/functions/update_post_meta/
*
*/
function my_sidebar_plugin_save_meta_box_data( $post_id ) {
if ( ! isset( $_POST['my_sidebar_plugin_meta_box_nonce'] ) )
return;
if ( ! wp_verify_nonce( $_POST['my_sidebar_plugin_meta_box_nonce'], 'my_sidebar_plugin_save_meta_box_data' ) )
return;
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( ! current_user_can( 'edit_post', $post_id ) )
return;
if ( ! isset( $_POST['meta_fields_book_title'] ) )
return;
$title = sanitize_text_field( $_POST['meta_fields_book_title'] );
update_post_meta( $post_id, 'meta_fields_book_title', $title );
}
add_action( 'save_post', 'my_sidebar_plugin_save_meta_box_data' );このコードに関しては、今回の解説範囲を超えてしまうため、今回は割愛しますが、関数のヘッダーにあるリンクをたどれば、必要な情報にアクセスできます。
最後に、プラグインのindex.jsファイルをエンキューします。
function my_sidebar_plugin_register_script() {
wp_enqueue_script(
'my_sidebar_plugin_script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'my_sidebar_plugin_register_script' );PHPファイルは以上で完了です。次にJSコードを書きます。
index.js
index.jsはsrcフォルダにあります。開発段階ではここにJSファイルを保存します。
index.jsを開いて、以下のimport宣言を追加します。
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/editor';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';サイドバーを作成するには、必要な操作用コンポーネントを組み込むためのリソースが必要です。
続いて、サイドバーコンポーネントを構築します。
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginSidebar
name="my-sidebar-plugin"
icon="book"
title="My plugin sidebar"
>
<PanelBody title="Book details" initialOpen={ true }>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PanelBody>
</PluginSidebar>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );registerPlugin関数はプラグインを登録し、MyPluginSidebarという名前のコンポーネントをレンダリングします。
MyPluginSidebar関数はいくつかの定数を宣言し、コンポーネントのJSXコードを返します。
useSelect：登録されたセレクタからpropsを取得するためのカスタムフックで、今回の例では現在の投稿タイプを取得するために使用（関連するWordPressの開発者向けブログ記事はこちら）useEntityProp：メタフィールドの配列と新たなメタ値を設定するセッター関数を返す（参照）updateBookTitleMetaValue：bookTitleメタフィールドの値を保存するイベントハンドラ
組み込みのコンポーネントは、以下を使用しています。
PluginSidebar：投稿またはサイトエディターのツールバーにアイテムを追加（参照）PanelBody：トグルで開閉できる折りたたみ可能なコンテナを作成（参照）PanelRow：PanelBody内の行の汎用コンテナ（参照）TextControl：テキスト入力に使用できる一行フィールド（参照）
次にnpm run buildコマンドを実行し、プラグインを有効にして、新規投稿を作成します。上部のサイドバーに本のアイコン（以下参照）が表示されます。このアイコンをクリックすると、プラグインのサイドバーが表示されます。
新規サイドバーの作成は不要だが、組み込みの投稿サイドバーにカスタムフィールドを表示したいという場合は、PluginSidebarをPluginDocumentSettingPanelに置き換えるだけでOKです。index.jsファイルは以下のようになります。
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
const MyPluginSidebar = () => {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const bookTitle = meta ? meta[ 'meta_fields_book_title' ] : '';
const updateBookTitleMetaValue = ( newValue ) => {
setMeta( { ...meta, meta_fields_book_title: newValue } );
};
if ( postType === 'post' ) {
return (
<PluginDocumentSettingPanel
name="my-sidebar-plugin"
title="Book details"
className="my-sidebar-plugin"
>
<PanelRow>
<TextControl
value={ bookTitle }
label={ __( "Book title" ) }
onChange={ updateBookTitleMetaValue }
__nextHasNoMarginBottom
/>
</PanelRow>
</PluginDocumentSettingPanel>
);
}
};
registerPlugin( 'my-sidebar-plugin', {
render: MyPluginSidebar,
} );この結果は以下のようになります。
使用例─ブロックパターンを上書きしてワークフローを自動化する
カスタムフィールドに値を追加すると、Block Bindings APIを通じてブロック属性で利用できるようになります。例えば、コンテンツに「段落」ブロックを追加し、カスタムフィールドを段落のcontent属性に関連付けることができます。
カスタムフィールドの値は変更可能で、変更は自動的に段落の内容に適用されます。
カスタムフィールドとブロックバインディングでできることは他にもあり、例えばブロックパターンとBlock Bindings APIを使ってコンテンツ作成プロセス全体を自動化することができます。
これには、見出しか段落を持つパターンを作成します。今回は、カラム、画像、見出し、そしてそれぞれに2つの段落を含む複数の横並びブロックを持つブロックパターンを作成します。
レイアウトを調整したら折り返し要素を選択し、同期パターンを作成します。
ブロックパターンの名前とカテゴリーを追加して同期させます。
投稿エディターでパターンを作成した場合は、そのパターンを選択し、ブロックツールバーの「Edit original（元のパターンを編集）」をクリックします。サイトエディターの「パターン」セクションに移動し、「マイパターン」または以前に設定したパターンカテゴリーから見つけることも可能です。
コードエディターを開き、カスタムフィールドに関連付けるブロックを見つけます。ブロックの区切り文字に以下のコードを貼り付けてください。
<!-- wp:heading {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"meta_fields_book_title"
}
}
}
}
} -->
パターンを保存したら、新規投稿を作成してみます。パターンをコンテンツに追加し、カスタムフィールドに値を設定すると、その値が自動的にパターンに適用されるはずです。
以上が基本的な手順になります。これを踏まえて、このプラグインを色々と試してみてください。カスタムフィールドとBlock Bindings APIにより、レイアウトに自動的に内容を反映させるために、さらにフィールドや設定を追加することができます。
まとめ
カスタムブロックの開発は複雑です。しかしブロックパターンを活用することで、ブロックを作成せずにより簡単に機能を強化することができます。
ブロックパターンの進歩や、Block Bindings APIのような強力な開発者向けツールの導入により、今日では機能的で洗練されたウェブサイトの構築にカスタムブロックを作成する必要はありません。シンプルなプラグインとブロックパターンで、ワークフローの大部分を自動化することができます。
今回はプラグインを使ってWordPress投稿エディターの機能を拡張する方法をご紹介しましたが、他にもWordPressの強力な機能を利用して、さまざまなことを実現できます。
