【WP6.6対応】自作テーマのfunctions.phpに書く初期設定10選（ブロックエディタ編）
WordPressの初期設定って、有効になってない機能がたくさんあるんですよね。その中で、私が今使ってる機能や、これから使うかもしれない機能をまとめてみました！今回は特に、ブロックエディタで使う編集機能の有効化・無効化についてお話ししますね！
目次
設定方法（共通）
設定は基本的に、自作テーマのfunctions.phpの中に書くんですよね。😊 それで、after_setup_themeのアクションフックで実行されるように実装してみてください！
/**
* 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といった実際に使うテンプレートファイルにも追記が必要な場合があるんです。😄 それに、スタイルシートにも追記が必要なものがあるので、しっかり確認しておいてくださいね！
ブロックエディタの配置で幅広と全幅の有効化
add_theme_support( 'align-wide' ); // ブロックエディタで幅広と全幅を有効化ブロックエディタの配置で、幅広と全幅を有効にするんです！✨ これを設定すると、画像の配置で「左寄せ」「中央揃え」「右寄せ」に加えて、「幅広」と「全幅」も選べるようになりますよ！
カラーパレットのカスタムカラー選択の無効化
add_theme_support( 'disable-custom-colors' ); // カラーパレットのカスタムカラー選択の無効化ブロックエディタで、テキストや背景の色を選ぶカラーパレットのカスタムカラーの選択を無効にするんです！✨ 無効化すると、カラーパレットに表示された色だけが使えるようになりますよ！
カラーパレットの色を置き換える
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',
),
));ブロックエディタで、テキストや背景の色を選ぶカラーパレットの色を置き換えるんです！✨ もし新しい色を追加したい場合は、既存の配列に追加してみてください。
そして、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;
}
フォントのカスタムサイズ選択の無効化
add_theme_support( 'disable-custom-font-sizes' ); // フォントのカスタムサイズ選択の無効化ブロックエディタで、任意のフォントサイズを選べないようにするんです！✨ サイズは「S」「M」「L」「XL」のみ選べるようになりますよ！
タイポグラフィ（フォント）のサイズ選択を置き換える
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',
),
));ブロックエディタで、テキストのフォントサイズの選択を置き換えますね！✨ もし新しいサイズを追加したいなら、既存の配列に追加してみてください。
そして、CSSに追加したフォントサイズに対応するスタイルも追加するのをお忘れなく！
/* フォントサイズ */
.has-small-font-size {
font-size: 14px;
}
.has-regular-font-size {
font-size: 16px;
}
.has-large-font-size {
font-size: 18px;
}
ブロックエディタに独自スタイル適用を有効化
add_theme_support( 'editor-styles' ); // ブロックエディタに独自スタイル適用を有効化
add_editor_style( 'css/editor-style.css' ); // 適用するCSSファイルブロックエディタに独自のスタイルシートを適用します！😊 まず、add_theme_supportで’editor-styles’を有効化した後、add_editor_styleを使って、適用するCSSファイルの相対パスをテンプレートディレクトリから指定してください。
デフォルトのブロックパターンを無効化
remove_theme_support( 'core-block-patterns' ); // デフォルトのブロックパターンを無効化ブロックエディタでは、デフォルトで登録されているブロックパターンが最初から有効になっています！✨ もしそれが不要であれば、remove_theme_supportを使って’core-block-patterns’を無効化してみてください。
ブロックのパディング設定を有効化
add_theme_support( 'custom-spacing' ); // ブロックのパディング設定を有効化‘custom-spacing’を有効にすると、ブロックごとにパディング（余白）を指定できるようになります！✨ これにより、より細かいデザイン調整が可能になりますよ。
リンク色の設定を有効化
add_theme_support( 'link-color' ); // リンク色の設定を有効化‘link-color’を有効にすると、ブロックエディタにおいてリンク色の設定が可能になります！✨ これを使うことで、リンクの色を自分好みに調整できますよ。
枠線の設定を有効化
add_theme_support( 'border' ); // 枠線の設定を有効化‘border’を有効にすると、ブロックエディタで画像などに枠線を設定できるようになります！✨ これを使えば、視覚的なアクセントを加えることができますよ。