get_block_editor_theme_styles()


WordPressのget_block_editor_theme_styles()関数は、ブロックエディターに適用されるテーマのスタイルを取得するために使用されます。この関数は、テーマのスタイルシートやカスタムスタイルをエディターに反映させるために役立ちます。

構文

get_block_editor_theme_styles();

例1: ブロックエディターにテーマスタイルを適用

この例では、ブロックエディターにテーマのスタイルを適用します。

add_theme_support('editor-styles'); add_editor_style('style-editor.css');

例2: カスタムスタイルを追加

カスタムスタイルをブロックエディターに追加する例です。

function custom_block_editor_styles() { wp_enqueue_style('custom-editor-style', get_template_directory_uri() . '/css/editor-style.css'); } add_action('enqueue_block_editor_assets', 'custom_block_editor_styles');

例3: テーマの色をエディターに反映

テーマの色設定をブロックエディターに反映させる例です。

add_theme_support('editor-color-palette', array( array( 'name' => '赤', 'slug' => 'red', 'color' => '#ff0000', ), ));

例4: フォントサイズをエディターに適用

テーマのフォントサイズ設定をブロックエディターに適用する例です。

add_theme_support('editor-font-sizes', array( array( 'name' => '小', 'size' => 12, 'slug' => 'small' ), ));

例5: カスタムCSS変数を追加

カスタムCSS変数をブロックエディターに追加する例です。

function add_custom_editor_variables() { wp_add_inline_style('wp-edit-blocks', ':root { --custom-color: #333; }'); } add_action('enqueue_block_editor_assets', 'add_custom_editor_variables');

例6: テーマのスタイルをエディターに適用

テーマのスタイルをブロックエディターに直接適用する例です。

add_editor_style(array('style.css', 'editor-style.css'));

例7: カスタムブロックスタイルを追加

カスタムブロックスタイルをブロックエディターに追加する例です。

function register_custom_block_styles() { register_block_style('core/paragraph', array( 'name' => 'custom-style', 'label' => 'カスタムスタイル', )); } add_action('init', 'register_custom_block_styles');

注意点

  • get_block_editor_theme_styles()は、テーマのスタイルをエディターに適用する際に使用されますが、スタイルが正しく読み込まれるようにテーマの設定を確認してください。
  • カスタムスタイルを追加する場合は、enqueue_block_editor_assetsフックを使用して適切にスタイルを読み込む必要があります。

関連機能：