WordPressのブロックエディタのコンテンツ幅を広げる

今回やりたいこと

最新のWordPressはデフォルトでブロックエディタが入っています。(Guternbergと呼ばれるもの)

ビジュアルで操作したい人(HTMLが書けない人)からすると使いやすくて便利なエディターだと思うのですが、編集エリアが狭い(細い)なと思ったことはありませんか?

たった1つの設定をするだけで、このコンテンツ幅をpx単位で編集することができるので、今回はその方法を紹介します。

functions.php

まずはfunctions.phpに以下のコードを追加します。


// ブロックエディタの幅を広げる
function add_my_assets_to_block_editor()
{
  wp_enqueue_style('my-gutenberg-style', get_stylesheet_directory_uri() . '/my-gutenberg-style.css');
}
add_action('enqueue_block_editor_assets', 'add_my_assets_to_block_editor');

ブロックエディタに適用されるcssファイル(my-gutenberg-style.css)を読み込ませるための記述です。

cssファイルを配置するディレクトリ階層に応じて、パスの部分は適宜書き換えるようにしてください。

cssファイルを用意

上記で読み込ませるためのcssファイルを作成し、指定したディレクトリに配置します。

ちなみに「get_stylesheet_directory_uri()」はテーマフォルダまでのパスになります。

つまり今回はテーマフォルダ直下にcssファイルを配置すればOKです。


// my-gutenberg-style.css
.wp-block {
  max-width: 1000px; /* 好きな幅で */
}

今回は1000pxにしてみました。
これで編集エリアの幅が広がり、記事を下記やすくなります。

簡単にできる設定で操作性がよくなるので是非やってみてください。

参考にさせていただいた記事

今回参考にさせていただいた記事はこちらです。ありがとうございました。

related article

2020/07/03 WordPress

管理画面で固定ページを検索すると投稿が表示されてしまう

2021/01/20 WordPress

年度別アーカイブリンクリスト

2021/02/26 WordPress

デフォルトの「投稿」のURLをカスタマイズする

2020/08/06 WordPress

カスタム投稿にカテゴリーを追加する