今日の amazon「タイムセール」はこちら!!      

[WordPressカスタム]Gutenbergにcssを当てて公開画面と同じにしたら、めちゃくちゃ便利だったよ!

どうも。Wordpressをカスタムしたくてたまらないディズ(@_MONOGREAT_)です。

『Wordpressで記事を公開したらイメージと違った』
『記事の出来映えをいちいちブラウザで確認するのはめんどくさい』

WordPress使ってて、こんな悩みないですか?

WordPressってなんでエディタ画面と公開画面が違うんでしょうね。クソグーテンブルクめ

そこで、今回はWordPressのエディタ画面(Gutenberg)にCSSを当てて公開画面と同じにする方法をご紹介します。めちゃくちゃ便利で、全部コピペでできますので、ぜひやってみてください。

編集画面のBefore Afterです

現在使用中のWordpressテーマにエディター用のCSSを作る

まずは、Gutenbergのエディタ画面用のCSSを作成します。

PCのテキストエディタ(Windowsならメモ帳というソフトがアクセサリというフォルダに入ってます。Windowsマークから探してみてください。)を開いて『user-custom-editor-style.css』という名前で『名前を付けて保存』をしてください。
(CSSの名前はなんでもいいですが、名前を変える場合はfunctions.phpの書き換えをしてくださいね)

テキストエディタからCSSファイルを作る場合は、拡張子(.のあとに付いている部分).cssにするのを忘れないでください。ちゃんと保存できたら、種類の欄に『カスケードスタイルシート』と表示されるはずです。

FTPソフトを使用して使用中のテーマに『user-custom-editor-style.css』をアップロードしましょう。

FTPソフトの使い方はサルワカさんの『【FileZillaの使い方】WordPressでFTPソフトを使おう』が分かりやすいです。

 スポンサーリンク

functions.phpにコードを記入する。

functions.phpにコードを記入してエディタ画面に当てるCSS(さっき作ったuser-custom-editor-style.cssのこと)を設定します。

functions.phpの場所
WordPressの管理画面→外観→テーマ編集→テーマのための関数(functions.php)

この中の<?phpから?>の間に、以下のコードをコピペしてください。

functions.phpは、失敗すると画面真っ白になっちゃいますので、コピペする前に中身をコピーして別に保存しとく等バックアップを取っといてください。ちなみに失敗した場合は、FTPソフトで修正しないとwordpressが使えません。

//////////////////////////////////////
// Gutenberg用のCSSを読み込む
///////////////////////////////////////
add_action( 'enqueue_block_editor_assets', 'gutenberg_stylesheets_custom' );
function gutenberg_stylesheets_custom() {
/*適用テーマのCSSを読み込む*/
$editor_style_url = get_theme_file_uri('/ user-custom-editor-style.css');
/*CSSの名前はさっき自分で作ったファイルです。*/
wp_enqueue_style( 'theme-editor-style', $editor_style_url );
}

これでcssを当てることが出来ました。

 スポンサーリンク

エディタ画面に当てたいスタイルを記入しよう

最後にuser-custom-editor-style.cssにエディタ画面に適用したいスタイルを記入したら完成です。

僕の場合は、子テーマのstyle.cssと親テーマのstyle.cssの必要な部分をコピペして持ってきました。

スマホでのエディタで、タイトルがバカでかくなっていたのを修正したかったので、これでスッキリしました。ちなみにタイトル部分のコードは以下のとおりです。

.editor-post-title__input{
font-size:1.5rem!important;
}

ずっとエディタにスタイルを適用させたいと思っていたので、今回ちゃんと出来て嬉しかったです♪
実際のイメージに近いのでやり直しが少なくなることでしょう。

もし、CSSの書き方がわからない場合は、サルワカさんの『CSSのセレクタとは?覚えておきたい25種類と書き方』が分かりやすいですよ。

今回の記事の参考させてもらったサイト『WordPressのGutenbergエディターにCSSを適用させるカスタマイズ方法

コメントを残す

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