WordPressの新エディタ「Gutenberg」のスタイルを変更してWYSIWYGにしてみたで

投稿者: | 2018年8月28日

WordPressの新エディタ「Gutenberg」のスタイルを変更してWYSIWYGにしてみたので紹介します。ちなみに新しいエディタは「Gutenberg」のことで、見出しや本文、画像をブロック単位で操作できるようにしたもので、デフォルトではないがプラグインを導入するだけ。それと「WYSIWYG」っていうのは「What You See Is What You Get」のことで、DTP界隈では20年ほど前から使われており、一言で言えば「編集画面の見た目がそのまま出力される」ってことですな。

そもそもWordpressの「Gutenberg」は使いやすいのか

色々意見が分かれているようですが、自分的にはとても気に入ってる。素直に書いていける感じ。ただ気になるのはブロック単位で操作できるのはいいんだけど、ブロックを複数一緒に移動したりできないのが気に入らない。そのうち改善されるよう願いたい。

それ以外、見出しや本文、画像なんかは直感的に入力できるんで、4、5記事前からは「Gutenberg」を採用している。

WordPressの「Gutenberg」の見た目がちょっと気に入らない

後、強いていうのであればエディタのテキストスタイルがまんますぎて、なんかストンと入ってこない。タイトルとかめっちゃ大きいし。ちなみに下記がデフォルトのスタイル。


スポンサーリンク

うーん、味気ないですよね。なんか書いててもパッとしない。せっかくだからエディタ画面にも本ページのスタイルを当てたい!ってことで調べて出てきたのがこちらのサイト。

How to add WordPress Theme Styles to Gutenberg

なるほど、function.phpにちょっと付け加えたらいいんだね。

Gutenbegのエディタ画面でスタイルシートを適用する

ということでGutenbergにスタイルシートを適用させるために関数をfunction.phpに付け加えましょう。こちらがその関数。


function editor_gutenberg_styles() {
	 wp_enqueue_style( 'tabor-gutenberg', get_stylesheet_directory_uri() . '/style.css' , false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'editor_gutenberg_styles' );

参照先では別のスタイルシートを読み込むように書かれて胃たが、今回はメインのスタイルシートファイルを読み込むようにしてみた。

Gutenbegのエディタ画面へのスタイルシートの適用方法

まずはタイトルのスタイルを変えてみよう。タイトル部分の要素は下記のものになる。


スポンサーリンク
body.gutenberg-editor-page .editor-post-title textarea{
}

ここにページと同じスタイルを割り当ててみると・・・

うまい具合に変わった。

次に見出しや本文、ボールドのも変えてみる。見出しと本文の要素はこのようにしてみた。

/* 見出し */
body.gutenberg-editor-page div.editor-block-list__layout h2
body.gutenberg-editor-page div.editor-block-list__layout h3
body.gutenberg-editor-page div.editor-block-list__layout h4

/* 本文 */
body.gutenberg-editor-page div.editor-writing-flow textarea

これで他のスタイルも変更することができた。

ボールド部分はページのスタイルを勝手に読み取っていたので特に何もしなかった。で、全体的(ボックスの幅とかも)に変えた結果がこちら。

カスタムHTMLの部分はiframeで作られておりスタイルシートは変更できなさそうなので諦めた。また画像のサイズも実際の合図に合わせるのは無理なようだ。

まとめ

ということで結果的には満足できるくらいにスタイルを本ちゃんのものに合わせることができた。たまにキズなのは、本ちゃんとほぼ同じなので、編集画面にいると思ったら、実際のページにいたり、実際のページをプレビューで確認してると思ったらまだ編集画面だったりと。

WordPressでGutenbergを使ってる方はぜひ試してみては。


スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です