今回やりたいこと

最新の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にしてみました。
これで編集エリアの幅が広がり、記事を下記やすくなります。

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

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

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