1ヶ月前に投稿

WordPress ブロックエディタのプレビューメッセージを変更する

この記事は約 3 分で読めます。

3.5

Block Editor Handbookには、
エディタエクスペリエンスの動作を変更するために、
いくつかの実験的なエディタフィルタが公開されていて、
その中のひとつをご紹介します。

プレビューを生成するときに表示される
インタースティシャルメッセージをフィルタリングします。

var customPreviewMessage = function() {
    return '<b>Post preview is being generated!</b>';
}; 
wp.hooks.addFilter( 'editor.PostPreview.interstitialMarkup', 'my-plugin/custom-preview-message', customPreviewMessage );

先ずはじめに、
導入するにあたり
子テーマのディレクトリ
my_js というフォルダが存在するとして
お話を進めます。

まず、
カスタマイズするためのファイルを
読み込む記述をします。

子テーマのディレクトリの
URI を取得するには

get stylesheet directory uri
使って取得します。

functions.php に
以下のコードを書きます。

function custom_prev_mess() {
    wp_enqueue_script( 'custom_prev_mess_js', get_stylesheet_directory_uri() . '/my_js/custom_prev_mess.js');
}
add_action( 'enqueue_block_editor_assets', 'custom_prev_mess' );

ブロックエディターの編集画面に適用される
CSSやJSを読み込む方法は以下を参照の事。

先ほどの
プレビューを生成するときに表示される
インタースティシャルメッセージをフィルタリングする
JavaScriptソースに
インラインCSS(要素の開始タグの中に
直接CSSのソースコードを書き込んでいく事)
装飾したものが以下。

var customPreviewMessage = function() {
    return '<p style="color: rgba(199,21,133,0.7);font-size: 30px;">Post preview is being generated!</p>';
};
wp.hooks.addFilter( 'editor.PostPreview.interstitialMarkup', 'my-plugin/custom-preview-message', customPreviewMessage );

上記jsファイルを
custom_prev_mess.js として
子テーマの my_js フォルダに置きます。

jsファイルが正常に読み込まれれば
投稿のプレビューボタンを押すと
変更されたメッセージが
表示されるハズです。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
WordPress ブロックエディタのプレビューメッセージを変更する