新しいフォーマットの登録

まずはじめにプラグインで適用する新しいフォーマットを登録します。これには WordPress の registerFormatType 関数を使用します。

最小限のプラグインを準備します。新しいフォルダーにファイル my-custom-format.php を作成し、中に登録と JavaScript アセットのエンキューに必要な PHP コードを記述します。

<?php
/**
 * Plugin Name: My custom format
 */

function my_custom_format_script_register() {
    wp_register_script(
        'my-custom-format-js',
        plugins_url( 'my-custom-format.js', __FILE__ ),
        array( 'wp-rich-text' )
    );
}
add_action( 'init', 'my_custom_format_script_register' );

function my_custom_format_enqueue_assets_editor() {
    wp_enqueue_script( 'my-custom-format-js' );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_format_enqueue_assets_editor' );

次に新しいファイル my-custom-format.js を次の内容で作成します。

ES5

( function( wp ) {
    wp.richText.registerFormatType(
        'my-custom-format/sample-output', {
            title: 'Sample output',
            tagName: 'samp',
            className: null,
        }
    );
} )( window.wp );

ESNext

import { registerFormatType } from '@wordpress/rich-text';

registerFormatType(
    'my-custom-format/sample-output', {
        title: 'Sample output',
        tagName: 'samp',
        className: null,
    }
);

WordPress にインストールして有効化し、新しい投稿または固定ページをロードしてください。

利用可能なフォーマットタイプは core/rich-text ストア内で管理されます。ストアを照会し、作成したカスタムフォーマットが利用可能かどうかを確認します。ブラウザーのコンソールで以下を実行してください。

wp.data.select( 'core/rich-text' ).getFormatTypes();

作成したものを含むフォーマットタイプの配列が返されます。

最終更新日: 2020年4月26日