WordPressの編集画面のCSS読み込みについて

2021年8月6日 2021年8月7日

kurudrive

CSSファイルの登録

add_editor_style( $stylesheet = 'editor-style.css' )

基本的にテーマでは add_editor_style( 'editor.css' ) などのように書けば反映される。

add_editor_style() 内の処理

wp/includes/theme.php に記載されており、add_editor_style() では global $editor_styles に配列で追加するだけで、ここでは読み込みは行われない。

function add_editor_style( $stylesheet = 'editor-style.css' ) {
	global $editor_styles;

	add_theme_support( 'editor-style' );

	$editor_styles = (array) $editor_styles;
	$stylesheet    = (array) $stylesheet;

	if ( is_rtl() ) {
		$rtl_stylesheet = str_replace( '.css', '-rtl.css', $stylesheet[0] );
		$stylesheet[]   = $rtl_stylesheet;
	}

	$editor_styles = array_merge( $editor_styles, $stylesheet );
}

get_block_editor_theme_styles()

wp-includes/block-editor.php 内の get_block_editor_theme_styles() 内で global $editor_styles を読み込んで、ブロックエディタ用に配列を変換している。

https で始まるCSSファイルの場合

この時 CSSファイルが https から始まる場合、wp_remote_get( $style ) でファイルがあるかどうかを確認して、ある場合は配列に格納。

https で始まらない場合

$file = get_theme_file_path( $style ) で読み込まれるので、httpsでない場合テーマ外のファイルが使えない

function get_block_editor_theme_styles() {
	global $editor_styles;

	if ( ! WP_Theme_JSON_Resolver::theme_has_support() ) {
		$styles = array(
			array(
				'css'            => 'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }',
				'__unstableType' => 'core',
			),
		);
	} else {
		$styles = array();
	}

	if ( $editor_styles && current_theme_supports( 'editor-styles' ) ) {
		foreach ( $editor_styles as $style ) {
			if ( preg_match( '~^(https?:)?//~', $style ) ) {
				$response = wp_remote_get( $style );
				if ( ! is_wp_error( $response ) ) {
					$styles[] = array(
						'css'            => wp_remote_retrieve_body( $response ),
						'__unstableType' => 'theme',
					);
				}
			} else {
				$file = get_theme_file_path( $style );
				if ( is_file( $file ) ) {
					$styles[] = array(
						'css'            => file_get_contents( $file ),
						'baseURL'        => get_theme_file_uri( $style ),
						'__unstableType' => 'theme',
					);
				}
			}
		}
	}

	return $styles;
}

get_theme_file_path()

この関数内で

$path = get_stylesheet_directory() . '/' . $file;

$path = get_template_directory() . '/' . $file;

で読み込んでいるので、テーマ内にあるファイルでないと普通は読み込めない。

function get_theme_file_path( $file = '' ) {
	$file = ltrim( $file, '/' );

	if ( empty( $file ) ) {
		$path = get_stylesheet_directory();
	} elseif ( file_exists( get_stylesheet_directory() . '/' . $file ) ) {
		$path = get_stylesheet_directory() . '/' . $file;
	} else {
		$path = get_template_directory() . '/' . $file;
	}

	/**
	 * Filters the path to a file in the theme.
	 *
	 * @since 4.7.0
	 *
	 * @param string $path The file path.
	 * @param string $file The requested file to search for.
	 */
	return apply_filters( 'theme_file_path', $path, $file );
}

テーマディレクトリ外のcssをブロックエディタで読み込ませる

プラグインなどから普通に読み込む場合

https でないURLのファイルを管理画面に使う場合は add_editor_style は使えない（と思われる）ので、enqueue_block_editor_assets にフックして wp_enqueue_style で読み込む事になる。

my_load_skin_gutenberg_css(){
			wp_enqueue_style(
				ハンドル名,
				CSSのURL,
				array( 'wp-edit-blocks' ),
				バージョン
			);
}
add_action( 'enqueue_block_editor_assets', 'my_load_skin_gutenberg_css' );

問題点

ただし、wp_enqueue_style はカスタマイズ画面や記事編集画面で全体に読み込まれるため、操作UI側にもスタイルが適用されてしまう。

そのため、各クラスの外側に .editor-styles-wrapper{} で囲う必要がある

投稿者プロフィール

kurudrive

名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
2018 WordCampOsaka セッションスピーカー
2017 WordCampKyoto セッションスピーカー
2016 WordCampTokyo LT
2016 WordCampKansai ハンズオン世話役
2015 WordCampTokyo セッションスピーカー
2015 WordCampKansai セッションスピーカー
2014 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCampTokyo セッションスピーカー（パネラー）
2013 WordFesNagoya 実行委員 & セッションスピーカー
2013 WordCrabFukui セッションスピーカー
他