WordPressのエディタGutenbergをカスタマイズする方法

NO IMAGE

Gutenberg。

導入された後、「うーん。前の方がいいね。」「アウトプットに近いからいい感じ」等賛否両論あるみたいですが、自分は直感的にいじれるのと、ブログの投稿に尖っていた前のエディタより、このGutenberg の方が結構好きです。

そんなリリースから半年以上経った新エディタGutenberg で、プラグイン不要で結構使えそうなやり方と方法を書いてみます。

ちなみに自分はPHP・Java・HTML・CSSぐらいしかいじれないのでこれ以外の言語が含まれるカスタマイズについては記載していません。

目次

Gutenbergを旧エディタに戻す場合

とは言え、やっぱり旧エディタの方がいいなと思った場合、以下をfunctions.phpに追記することで旧エディターになり、Gutenbergのスタイルシートも不要になる為、スタイルシートの読み込みを削除できます。

add_filter( 'use_block_editor_for_post', '__return_false' );

function remove_gutenberg_style() {
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'remove_gutenberg_style' );

スポンサーリンク

サイドバーの色設定のカスタマイズ・無効化

デフォルトでカラフルな色が設定されている色設定ですが、functions.phpに以下を記載することで色の選択肢を指定できます。

function mytheme_setup_theme_supported_features() {
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => __( 'strong magenta', 'themeLangDomain' ),
            'slug' => 'strong-magenta',
            'color' => '#a156b4',
        ),
        array(
            'name' => __( 'light grayish magenta', 'themeLangDomain' ),
            'slug' => 'light-grayish-magenta',
            'color' => '#d0a5db',
        ),
        array(
            'name' => __( 'very light gray', 'themeLangDomain' ),
            'slug' => 'very-light-gray',
            'color' => '#eee',
        ),
        array(
            'name' => __( 'very dark gray', 'themeLangDomain' ),
            'slug' => 'very-dark-gray',
            'color' => '#444',
        ),
    ) );
}

add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

カラーピッカーを無効にする

色設定内の一番右にある自由に色を選択するカラーピッカーを無効にします。

add_theme_support( 'disable-custom-colors' );

色設定をまるごと無効にする

カスタム色を空っぽにし、さらにカラーピッカーを無効にすると色設定自体が全て消えます。

functions.phpに以下を記載します。

add_theme_support( 'editor-color-palette' );
add_theme_support( 'disable-custom-colors' );

スポンサーリンク

ブロックのフォントサイズ

テキスト設定内のフォントサイズ設定をカスタマイズします。

functions.phpに配列で指定します。選択肢として表示されるテキストはnameのものです。

add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( '極小', 'themeLangDomain' ),
        'shortName' => __( '極小', 'themeLangDomain' ),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => __( '中型', 'themeLangDomain' ),
        'shortName' => __( '中型', 'themeLangDomain' ),
        'size' => 16,
        'slug' => 'regular'
    ),
    array(
        'name' => __( '大型', 'themeLangDomain' ),
        'shortName' => __( '大型', 'themeLangDomain' ),
        'size' => 36,
        'slug' => 'large'
    ),

) );

文字色と同様、slugに対応してhas-slug名-font-sizeクラスがブロックに付与されます。フロント用CSSにはこのクラスに対応したフォントサイズ指定が含まれています。

カスタムフォントサイズを無効にする

functions.phpに以下の設定により、カスタムフォントサイズ（数字で直接指定するサイズ）の設定が無効になり、ブロックエディターのデフォルトサイズか、editor-font-sizesで指定したサイズのみとなります。

add_theme_support('disable-custom-font-sizes');

スポンサーリンク

埋め込みのコンテンツをレスポンシブ対応にする

デフォルトでは埋め込みコンテンツ(YouTubeやVimeo動画など）がフロント側でレスポンシブになりませんが、functions.phpに以下の設定によりレスポンシブになります。

  add_theme_support( 'responsive-embeds' );

スポンサーリンク

幅広・全幅画像のサポート

デフォルトのままではブロック領域を超える幅の画像配置の指定（幅広・全幅）はできません。functions.phpに以下の設定で有効化されます。

add_theme_support( 'align-wide' );

テーマが正しくサポートしていないと、

出力側で正しく幅広に表示されません。

add_filter( 'block_editor_settings', function( $editor_settings ){
  $editor_settings['alignWide'] = true; // alignWide 設定を上書き
  return $editor_settings;
});

出力側で正しく幅広に表示されません。

幅広設定を許可するalingnWideであれば、以下のように直接指定できます。

add_filter( 'block_editor_settings', function( $editor_settings ){
  $editor_settings['alignWide'] = true; // alignWide 設定を上書き
  return $editor_settings;
});

ボタンブロックのスタイルを追加する

子テーマにJavaScriptのファイルを追加

まずはブロック拡張用のJavaScriptファイルを作成します。

一例で my-block.jsという名前のファイルをjsフォルダ内に作成することにします。

子テーマ ├ …
├ js
│ ├ my-block.js
│ └ …
├ …

作成したJavaScriptファイルを読み込む

作成したmy-block.jsを編集画面で読み込むようにPHPファイルにコードを追加します。

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

function my_block_enqueue() {
  wp_enqueue_script(
    'my-block-script',
    get_stylesheet_directory_uri() . '/js/my-block.js',
    array( 'wp-blocks' )
  );
}
add_action( 'enqueue_block_editor_assets', 'my_block_enqueue' );

スタイルのコードを追加

続いてmy-block.jsにボタンブロックに独自のスタイルを追加するコードを追記します。

nameやlabelは適宜カスタマイズして下さい。

wp.blocks.registerBlockStyle( 'core/button', {
  name: 'icon-btn',
  label: 'アイコン付きボタン'
} );

nameはボタンブロックのclassに影響します。icon-btnであればis-style-icon-btnクラスがつくことになるので、半角英数で設定しましょう。

追加したスタイルのCSSを追記する

追加した独自スタイルのボタンをカスタマイズするCSSをテーマのCSSに追記します。※以下はfont awesome を表示するcssサンプルです。

.is-style-icon-btn .wp-block-button__link::after {
    content: "\f054";
    font-family: "Font Awesome 5 Solid";
    display: none;
    line-height: 1;
}

.is-style-icon-btn .wp-block-button__link svg {
    margin-left: .5em;
}

編集画面にもこのCSSを反映させたい場合は、以下のPHPのコードを追加する必要があります。

//ページ表示・編集画面両方に css-block.css を追加する例
function my_block_css() {
  wp_enqueue_style(
    'my-block-style',
    get_stylesheet_directory_uri() . '/css/css-block.css'
  );
}
add_action( 'enqueue_block_assets', 'my_block_css' );

複数のスタイルを追加する場合

複数のスタイルを追加したい場合、上記で作ったjavaの my-block.js に以下のような一文を追加して、CSSを調整すれば色々追加できます。

wp.blocks.registerBlockStyle( 'core/button', {
  name: 'icon-btn',
  label: 'アイコン付きボタン'
} );
//スタイルを追加する
wp.blocks.registerBlockStyle( 'core/button', {
  name: 'icon-btn2',
  label: '追加ボタン2'
} );
wp.blocks.registerBlockStyle( 'core/button', {
  name: 'icon-btn3',
  label: '追加ボタン3'
} );

WordPressカテゴリの最新記事