WordPressのブロックエディタを快適にする初期設定の魔法
WordPressって、初期設定のままだと「これ使わないな〜」って機能が有効になってたり、「あ！これ欲しいのに！」って機能がオフになってたりするんですよね。ブログを毎日更新している私としては、もっと快適に、もっとおしゃれに記事を書きたい！ってことで、今回は私が今使ってる機能や、これから絶対使いたい機能を中心に、ブロックエディタ周りの設定をまとめてみました！😉
目次
📝設定の基本ステップ
まず、これらの設定は基本的に自作テーマのfunctions.phpの中に書き込んでいくことになります！コードを見るとちょっと難しそう？でも大丈夫！「テーマが読み込まれたら、この設定を実行してね！」っていうおまじないだと思ってくださいね！
functions.php
/**
* fc_after_setup_theme
* テーマ読み込み直後に実行される「after_setup_theme」フックの処理を定義する関数
*/
function fc_after_setup_theme(){
// ここに書きます
add_theme_support( 'xxxxxxxxxx' );
}
add_action( 'after_setup_theme', 'fc_after_setup_theme' );そして、忘れてはいけないのが、設定によってはheader.phpなどのテンプレートファイルに追記が必要だったり、スタイルシート（CSS）の調整も必要になることがあるということ！コードをコピペするだけでなく、しっかりと確認しておきましょうね！👌
1. ブロック配置の自由度をアップ！「幅広」と「全幅」の有効化
記事の途中で画像をドーンと大きく見せたい時ってありますよね！この設定を有効にすると、ブロックの配置で「左寄せ」「中央揃え」「右寄せ」に加えて、画面いっぱいに広がる「幅広」と「全幅」が選べるようになります！
functions.php
add_theme_support( 'align-wide' ); // ブロックエディタで幅広と全幅を有効化これで、よりダイナミックな記事のレイアウトが楽しめますよ！😍
2. カラーパレットをシンプルに！カスタムカラーの無効化と色の置き換え
ブログのデザインって、色を統一するのがとっても大事！読者さんに「このブログ、見やすい！」って思ってもらうためにも、記事ごとにバラバラな色を使いたくないんです。
カスタムカラー選択の無効化
これを設定すると、エディタで色を選ぶときに出てくる自由な色選択ができなくなります。つまり、事前に決めた色だけが使えるようになるんです！デザイン崩れを防ぐためにも、これは必須かな！
functions.php
add_theme_support( 'disable-custom-colors' ); // カラーパレットのカスタムカラー選択の無効化カラーパレットの色を置き換える
そして、実際に使う色を自分で設定しちゃいましょう！私のブログのテーマカラーを設定しておくと、記事作成中に迷わなくて済みます！
functions.php
add_theme_support( 'editor-color-palette', array( // カラーパレットの色を置き換える
array(
'name' => 'テーマカラー1',
'slug' => 'theme1',
'color' => '#037F9E',
),
array(
'name' => 'テーマカラー2',
'slug' => 'theme2',
'color' => '#9E033A',
),
array(
'name' => 'テーマカラー3',
'slug' => 'theme3',
'color' => '#9E9103',
),
));💡ポイント！
この設定をした後は、style.cssに設定した色に対応するCSSコードも忘れずに追記してくださいね！
style.css
/* 文字色 */
.has-theme1-color {
color: #037F9E;
}
.has-theme2-color {
color: #9E033A;
}
.has-theme3-color {
color: #9E9103;
}
/* 背景色 */
.has-theme1-background-color {
background-color: #037F9E;
}
.has-theme2-background-color {
background-color: #9E033A;
}
.has-theme3-background-color {
background-color: #9E9103;
}3. フォントサイズのブレを防ぐ！カスタムサイズ無効化＆サイズ置き換え
カラーと同じく、フォントサイズも統一感が命！読者さんの読みやすさを考えて、サイズの種類を絞り込んじゃいます！
カスタムサイズ選択の無効化
これで、勝手なフォントサイズが使えなくなり、設定したサイズ（「S」「M」「L」「XL」など）だけが選べるようになります。
functions.php
add_theme_support( 'disable-custom-font-sizes' ); // フォントのカスタムサイズ選択の無効化フォントサイズの選択を置き換える
自分で使いたいサイズだけを登録しちゃいましょう！名前を「小さめ」「普通」「大きめ」みたいに分かりやすくすると、記事を書くときもサクサク進みますね！
functions.php
add_theme_support( 'editor-font-sizes', array( // フォントのサイズ選択を置き換える
array(
'name' => '小さめ',
'shortName' => 'S',
'size' => 14,
'slug' => 'small',
),
array(
'name' => '普通',
'shortName' => 'M',
'size' => 16,
'slug' => 'regular',
),
array(
'name' => '大きめ',
'shortName' => 'L',
'size' => 18,
'slug' => 'large',
),
));💡ポイント！
もちろん、これもstyle.cssに対応するCSSの追記が必要です！
style.css
/* フォントサイズ */
.has-small-font-size {
font-size: 14px;
}
.has-regular-font-size {
font-size: 16px;
}
.has-large-font-size {
font-size: 18px;
}4. 見たままのデザインに！独自スタイルの適用
「エディタで記事を書いてる時の見た目と、公開された後の見た目が違う！」ってこと、ありませんか？これを有効にすると、エディタ画面にもブログのデザインを適用できるようになります！🎉
functions.php
add_theme_support( 'editor-styles' ); // ブロックエディタに独自スタイル適用を有効化
add_editor_style( 'css/editor-style.css' ); // 適用するCSSファイルこれで、記事を書きながら完成形に近いデザインを確認できるので、とっても効率的になりますよ！
5. その他のお役立ち設定！
デフォルトのブロックパターンを無効化
最初から入っているブロックパターンが要らないな、って思ったらこれでスッキリ！自分で作ったパターンだけを使いたい時におすすめです。
functions.php
remove_theme_support( 'core-block-patterns' ); // デフォルトのブロックパターンを無効化ブロックのパディング（余白）設定を有効化
ブロックとブロックの間にちょっとだけ余白を開けたい、みたいな細かいデザイン調整が可能になります！
functions.php
add_theme_support( 'custom-spacing' ); // ブロックのパディング設定を有効化リンク色や枠線の設定も有効に！
リンクの色を記事ごとに変えたい時や、画像にパッと目を引く枠線を付けたい時に便利ですよ！
functions.php
add_theme_support( 'link-color' ); // リンク色の設定を有効化
add_theme_support( 'border' ); // 枠線の設定を有効化🎀まとめ
WordPressのカスタマイズって、自分のノートを使いやすくデコレーションしていくみたいで、本当に楽しいですよね！💻✨ 今回ご紹介した設定を駆使すれば、もっともっと快適なブログライフが送れるはず！
みんなはどんな設定で、ブログの書き心地をアップさせていますか？私のおすすめ設定も、ぜひ試してみてくださいね！
また次回の記事で、最新のガジェット情報をお届けするのを楽しみにしています！👋😄