サイドバーの起動
注意: このチュートリアルではカスタムサイドバーを扱います。サイドバーにコントロールを追加する詳細については、ブロックツールバーと設定サイドバー を参照してください。
最初のステップではまずエディターに対して新しいプラグインが自身のサイドバーを持つことを伝えます。これには WordPress が提供する registerPlugin、PluginSidebar、createElement ユーティリティを使用します。それぞれ @wordpress/plugins
、 @wordpress/edit-post
、@wordpress/element
パッケージに含まれます
次のコードを JavaScript ファイル plugin-sidebar.js
に追加し、プラグインディレクトリに保存してください。
( function( wp ) {
var registerPlugin = wp.plugins.registerPlugin;
var PluginSidebar = wp.editPost.PluginSidebar;
var el = wp.element.createElement;
registerPlugin( 'my-plugin-sidebar', {
render: function() {
return el( PluginSidebar,
{
name: 'my-plugin-sidebar',
icon: 'admin-post',
title: 'My plugin sidebar',
},
'Meta field'
);
},
} );
} )( window.wp );
このコードが動作するにはブラウザ内でユーティリティが利用可能でなければなりません。これらを含むパッケージをエンキューするよう、スクリプトの依存先に wp-plugins
、 wp-edit-post
、wp-element
を導入することで WordPress に伝えます。
このコードをプラグインディレクトリ内の PHP ファイルにコピーしてください。
<?php
/*
Plugin Name: Sidebar plugin
*/
function sidebar_plugin_register() {
wp_register_script(
'plugin-sidebar-js',
plugins_url( 'plugin-sidebar.js', __FILE__ ),
array( 'wp-plugins', 'wp-edit-post', 'wp-element' )
);
}
add_action( 'init', 'sidebar_plugin_register' );
function sidebar_plugin_script_enqueue() {
wp_enqueue_script( 'plugin-sidebar-js' );
}
add_action( 'enqueue_block_editor_assets', 'sidebar_plugin_script_enqueue' );
プラグインをインストールし有効化すると、エディターの右上に新しい「ピン」アイコンが表示され、クリックするとプラグインのサイドバーが開きます。

最終更新日: