DigiPress

Highly Flexible WordPress Theme

メニュー

Gutenbergと旧ビジュアルエディターの両方にカスタムCSSを反映する方法

WordPress 5.0 から、記事のエディターは従来の「ビジュアル(TinyMCE)/テキスト」エディターから、各コンテンツをブロック単位で直感的なGUIで追加するスタイルのエディター「Gutenberg」(グーテンベルグ)に一新されるようです。

「Gutenberg」は WordPress 4.9.8にアップデートされるとダッシュボードにも案内が表示されるようになり、v5.0 のリリースまでは プラグインとして試すことができます。

エディター機能が全く別のものになるため、実際の記事の表示状態に近づけるために指定していたビジュアルエディター(TinyMCE)にCSSを反映させるためのコードでは、Gutenberg では反映されません

提供中のWordPressテーマ「DigiPress」でもそろそろこの Gutenberg への対応もしていかなければいけないため、Gutenbergと旧エディターの両方にCSSを反映させる方法を調べてみました。

また、カスタマイザーなどで、フォントカラーやリンクカラーなど変動するCSSの要素についても反映させてみます。

従来のビジュアルエディターに CSS を反映させるコード

ビジュアルエディター用CSSの追加(PHP)

従来のビジュアルエディターでは、例えば function.php に add_editor_style関数の引数にビジュアル用の CSS ファイルを指定してやれば簡単に反映できます。

function my_custom_editor_style() {
    // テーマフォルダ直下の「css」フォルダにある "editor_style.css" を読み込む場合
    add_editor_style( 'css/editor_style.css' );
}
add_action( 'admin_init', 'my_custom_editor_style' );

エディター用CSSの例(editor_style.css)

エディターに反映させる各要素の CSS は、エディターのラッパー要素の class にある .mce-content-body というセレクタを先頭に付ければOKです。

.mce-content-body{
    color:#333;
    font-size:14px;
    font-family:"Century Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
.mce-content-body a{
    color:#e00f47;
}
.mce-content-body a:hover{
    color:#ea4672;
}
.mce-content-body p{
    margin-bottom:30px;
}
/* その他お好みで */

従来のビジュアルエディターについては、上記のコードをベースにすれば CSS が反映されます。

Gutenberg に CSS を反映させるコード

CSSの追加(PHP)

Gutenberg の場合、enqueue_block_editor_assetsという専用のアクションフックが用意されており、このタイミングで wp_enqueue_style 関数を使ってCSSを読み込ませます。

function my_custom_editor_style_for_gutenberg() {
	// テーマフォルダ直下の「css」フォルダにある "editor_style.css" を読み込む場合
	$css = get_theme_file_uri( '/css/editor_style.css' );
	wp_enqueue_style( 'my-editor-style', $css, array( 'wp-edit-blocks' ) );
}
add_action('enqueue_block_editor_assets', 'my_custom_editor_style_for_gutenberg');

Gutenberg用CSSの例

Gutenberg の場合、従来のビジュアルエディター用に先頭に指定していた .mce-content-body というセレクタは、各ブロック内の個別の要素にも含んでおりそのまま用いると表示上の不具合が発生します。
そのため、Gutenberg用には .edit-post-visual-editor というラッパー要素の class にあるセレクタを先頭に付けて CSS を構成します。

また、Gutenberg の CSS では pタグ自身にもフォントカラーやフォントファミリー、フォントサイズなどを個別に指定しているため、pタグにも font-family, font-size, color, line-height を必要に応じてテーマ側と一致させます。

.edit-post-visual-editor{
    color: #333;
    font-size: 14px;
    font-family: "Century Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
.edit-post-visual-editor a{
    color: #e00f47;
}
.edit-post-visual-editor a:hover{
    color: #ea4672;
}
/* pタグにも個別にフォントサイズ、書体、カラーを指定 */
.edit-post-visual-editor p{
    font-size: 14px;
    font-family: "Century Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
    color: #333;
    line-height: 1.8;
    margin-bottom: 30px;
}
/* その他お好みで */
エディターの幅を変更する

Gutenberg のブロック編集エリアは、最大で 610ピクセル幅となっており、ディスプレイ環境によっては狭く感じるユーザーもいるかもしれません。
そんな場合は、以下のように CSS を追加することで手っ取り早く最大幅を変更できます。

/* Gutenberg の編集エリアの幅を変更 */
.edit-post-visual-editor .editor-block-list__block{
    max-width:824px;
}

Gutenberg と従来のビジュアルエディターを併用する場合のCSS

Gutenberg は、タグをゴリゴリ直打ちして記事を作成することに慣れているユーザーには、現段階のレベルでは使いにくい、というよりもかなり厄介なエディターかもしれません。

また、投稿済みの過去の記事を再編集するにも、Gutenberg で行うと、HTMLタグから class がごっそりなくなってしまったり、ソース構成がめちゃくちゃになってしまうこともあり、非常に危険です。

そんなときは、「Classic Editor」(クラシックエディター)プラグインを利用すると、従来の「ビジュアル/テキスト」エディターで記事を投稿、再編集が行えるようになります。

Gutenberg と Classic Editor プラグインによる従来のエディターを併用する場合は、それぞれで同じ内容 CSS を用意するのも読み込むのも面倒なので、共有させるようにセレクタだけ分けてコーディングした同じ CSSファイルを読み込ませます。

クラシックエディターの場合は、.mce-content-body セレクタと同時に .editor-area というセレクタも加えれば、従来のビジュアルエディターのみに適用されます。

/* Gutenberg 用 */
.edit-post-visual-editor,
/* クラシック(従来のビジュアル)エディター用 */
.mce-content-body.editor-area {
    color: #333;
    font-size: 14px;
    font-family: "Century Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
.edit-post-visual-editor a,
.mce-content-body.editor-area a{
    color: #e00f47;
}
.edit-post-visual-editor a:hover,
.mce-content-body.editor-area a:hover{
    color: #ea4672;
}

/* Gutenberg のpタグ用 */
.edit-post-visual-editor p{
    font-size: 14px;
    font-family: "Century Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
    color: #333;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* クラシック(従来のビジュアル)エディターのpタグ用 */
.mce-content-body.editor-area p{
    margin-bottom: 30px;
}
/* その他お好みで */

カスタマイズ対象のCSSをエディターに反映する

テーマによっては、カスタマイズ機能によって、記事本文のフォントサイズやカラー、フォントファミリーなどが変更できますが、これらはユーザーごとで変動するスタイルとなるため、先述の方法で予めまとめておいたCSSファイルを読み込むだけでは当然反映させることができません。

カスタマイズで変動する CSS については、インラインでエディターに CSS を適用させます。

インラインCSSの挿入(クラシックエディター用)

従来のビジュアルエディター用にインラインCSSを挿入するには、tiny_mce_before_init という名前のアクションフックのタイミングで、ビジュアルエディターのスタイルをセットします。

値の取得は、予めカスタマイザー等で保存してあるCSSに関する値を get_theme_mod 関数で対象のキー名を指定して取得することを例にしています。

function my_custom_tiny_mce_inline_style($settings){
	// 挿入するインラインCSS
	$inline_css = sprintf(
		'.mce-content-body.editor-area {
			font-size: $s;
			color: $s;
			background-color: $s;
		}
		.mce-content-body.editor-area a {
			color: $s;
		}
		.mce-content-body.editor-area a:hover {
			color: $s;
		}',
		get_theme_mod('font_size'),
		get_theme_mod('font_color'),
		get_theme_mod('background_color'),
		get_theme_mod('link_color'),
		get_theme_mod('link_hover_color')
	);

	// TinyMCEの 'content_style' に代入
	$settings['content_style'] = $inline_css;

	return $settings;
}
add_filter('tiny_mce_before_init', 'my_custom_tiny_mce_inline_style');

インラインCSSの挿入(Gutenberg用)

Gutenberg エディター用にインラインのCSSを挿入する一つの方法としては enqueue_block_editor_assets フック内で wp_add_inline_style 関数を使用します。

function my_custom_gutenberg_inline_style() {
	// 挿入するインラインCSS
	$inline_css = sprintf(
		'.edit-post-visual-editor {
			font-size: $s;
			color: $s;
			background-color: $s;
		}
		.edit-post-visual-editor a {
			color: $s;
		}
		.edit-post-visual-editor a:hover {
			color: $s;
		}',
		get_theme_mod('font_size'),
		get_theme_mod('font_color'),
		get_theme_mod('background_color'),
		get_theme_mod('link_color'),
		get_theme_mod('link_hover_color')
	);

	// ファイルパスなしでこのインラインCSSのハンドル名を登録
	wp_register_style( 'my-custom-editor-inline', false );
	// 同様にパス指定なしで指定したハンドル名でキュー追加
	wp_enqueue_style( 'my-custom-editor-inline' );
	// 指定したハンドル名としてインラインCSSを挿入
	wp_add_inline_style( 'my-custom-editor-inline', $inline_css );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_gutenberg_inline_style' );

さいごに…

今後は、どれだけテキストベースの記事入力に慣れていても、メインエディターが Gutenberg になる以上、否応なしに全ユーザーが Gutenberg への移行を余儀なくされます。

Gutenberg は、より簡単に視覚的に、HTMLのソースを意識することなく誰でも様々なレイアウトやコンテンツを作成できることを目的としているのだと思いますが、正式リリース前の段階では、かなり癖があり、特に既存の記事を再編集するには 強制的に Gutenberg の仕様にソースが勝手に書き換えられてしまうため、もっとブラッシュアップが必要な部分が多々あると感じました。

DigiPress シリーズでも、従来のエディターに搭載してきたクイックタグなどの入力補完機能を、今後はさらに Gutenberg のブロックを追加してテーマが提供するコンテンツ(ボタン、ボックス、一部のショートコードなど)をGUIで挿入する機能がいよいよ必要になってきました。

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Feedly