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