サイドバーの起動

注意: このチュートリアルではカスタムサイドバーを扱います。サイドバーにコントロールを追加する詳細については、ブロックツールバーと設定サイドバー を参照してください。

最初のステップではまずエディターに対して新しいプラグインが自身のサイドバーを持つことを伝えます。これには 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' );

プラグインをインストールし有効化すると、エディターの右上に新しい「ピン」アイコンが表示され、クリックするとプラグインのサイドバーが開きます。

サイドバーの起動

説明

最終更新日: