Gutenbergの横幅を変える方法

こんにちは、minoruです。

私はワードプレスのクラシックエディターが好きだ。Gutenberg（グーテンベルグ）は重いしゴチャゴチャと余計な物が多すぎるし、使いづらい。

だけどクラシックエディターのサポートは2021年までらしく、多分有志の誰かがクラシックエディター的な何かを作るだろうけど、それは確定事項では無いので、一応Gutenbergの操作に慣れるべく嫌々ながら更新頻度の低い別ブログで試している。

Guternbergの横幅を変える方法

まずGutenbergを使い始めて思ったのは実際にブログが表示される場合の横幅と、編集中の横幅が違うため、自分にとっては気持ち悪い箇所で改行になっていたりする。

なのでGutenbergのエディターの横幅を実際の横幅に合わせた。

WordPressのブロックエディタのコンテンツ幅を広げるのページが一番わかりやすかった。以下は自分の備忘録的に書いておく。

functions.phpの最下部にCSSを読み込ませるための命令文を追加する
CSSファイルを用意する
そのCSSファイルをテーマの入っているフォルダの直下にアップロード

functions.phpに追加する奴

そもそも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');