LoginSignup
2

More than 5 years have passed since last update.

WP ZoomUP #9 / ブロックエディタ―は、沢山ブロックが出てきて戸惑ってしまうと言われたので、シンプルにカスタマイズした話(2019/1/25 wpzoomup)

Last updated at Posted at 2019-01-25

WordPress コードエディターのカスタマイズ

テーマのCSSを投稿画面に適用する

editor-style.css の読み込み(functions.php に追記)

/**
* 投稿画面にオリジナルのスタイルを適用
*/
add_theme_support( 'editor-styles' );
add_editor_style("editor-style.css");

//add_editor_style("style.css");    // メインのCSS
//add_editor_style("css/style.css");    // こうやって色々読み込めます

editor-style.css(内容はテーマに合わせる)

@charset "UTF-8";
/*------------------------------------------------------
# Normalize
------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, font,
ins, kbd, q, s, samp, small, strike, strong, sub, sup,
tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*!
* Bootstrap Grid v4.2.1 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5rem;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}

h1 { font-size: 2.441em; }
h2 { font-size: 1.953em; }
h3 { font-size: 1.563em; }
h4 { font-size: 1.25em; }

p { margin-bottom: 1rem; }
~~~~ 省略 ~~~~
.col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.3333333333%;
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.6666666667%;
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}
~~~~ 省略 ~~~~
/*------------------------------------------------------
body
------------------------------------------------------*/
body {
  background: url("../images/common/bg.png");
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 500;
}
~~~~ 省略 ~~~~

尚、ここで読み込まれたCSSは、WordPress で変換された後、投稿画面の html 内に出力されます。

body {
  background: url("../images/common/bg.png");
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 500;
}

 ↓

.editor-style-wrapper {
  background: url("../images/common/bg.png");
  color: #333;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 500;
}

h1 { font-size: 2.441em; }

 ↓

.editor-style-wrapper h1 { font-size: 2.441em; }

h2 { font-size: 1.953em; }

 ↓

.editor-style-wrapper h2 { font-size: 1.953em; }

h3 { font-size: 1.563em; }

 ↓

.editor-style-wrapper h3 { font-size: 1.563em; }

h4 { font-size: 1.25em; }

 ↓

.editor-style-wrapper h4 { font-size: 1.25em; }

デフォルトのエディタ幅をテーマに合わせる(functions.php に追記)

// admin_style.css の読み込み
function load_custom_wp_admin_style() {
    global $current_screen;
    wp_enqueue_style( 'custom_wp_admin_css', get_theme_file_uri('/css/admin_style.css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

admin_style.css(内容はテーマに合わせる)

/* メインのカラム幅をテーマに合わせる
 * 左右に15pxのpaddingがあるので、コンテンツは 766px-30px
 */
.wp-block {
    max-width: 766px;
}

/* 「幅広」ブロックの幅、コンテンツは1080px-30px */
.wp-block[data-align="wide"] {
    max-width: 1080px;
}

/* 「全幅」ブロックの幅 */
.wp-block[data-align="full"] {
    max-width: none;
}

.editor-block-list__layout .editor-block-list__block[data-align=left] .editor-block-list__block-edit {
    margin-right: 1em;
}
.editor-block-list__layout .editor-block-list__block[data-align=right]>.editor-block-list__block-edit {
    margin-left: 1em;
}

管理者以外で表示ブロックを絞り込む

functions.php に追記する場合

  • allowed_block_types にフック
  • ホワイトリストなので、表示するブロックを全てリストアップ
/**
 * 必要なブロックのみ表示
 */
add_filter( 'allowed_block_types', 'custom_allowed_block_types' );
function custom_allowed_block_types( $allowed_block_types ) {
    // 管理者ではない場合
    if ( !current_user_can( 'administrator' ) ) {
        $allowed_block_types = array(
            // 一般ブロック
            'core/paragraph',           // 段落
            'core/heading',             // 見出し
            'core/image',               // 画像
            'core/gallery',             // ギャラリー
            'core/list',                // リスト
            'tadv/classic-paragraph',   // TinyMCE Advanced

            // レイアウト要素
            'core/columns',             // カラム
            'core/separator',           // 区切り
            'core/spacer',              // スペーサー
        );
        return $allowed_block_types;
    }
}

プラグインを使用する場合

Advanced Gutenberg でもユーザープロファイルごとに各ブロックのアクティブ化を選択できます。
https://wordpress.org/plugins/advanced-gutenberg/

日本語への翻訳は途中です。
https://translate.wordpress.org/locale/ja/default/wp-plugins/advanced-gutenberg

Classic Editorプラグインを使わずにブロックエディターを無効化

functions.php に追記する場合

サイト全体

add_filter( 'use_block_editor_for_post', '__return_false' );

管理者以外

function disable_blockeditor( $is_enabled ) {
    //管理者以外の場合
    if ( ! current_user_can( 'administrator' ) ) return false;
    return $is_enabled;
}
add_filter( 'use_block_editor_for_post', 'disable_blockeditor' );

プラグインを使う場合

Disable Gutenberg

Classic Editorプラグインと同じように機能しますが、もっと多くのことができます。
https://wordpress.org/plugins/disable-gutenberg/#description

まだ日本語には翻訳されていません。
https://translate.wordpress.org/locale/ja/default/wp-plugins/disable-gutenberg

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2