SP用メニューボタン
ソレゾレブログ

技術的な事だったり日常の気になる事だったり

WordPressのGutenberg右側メニューから特定のものを非表示にしてみた

スポンサーリンク

なぜ思い立ったか

ブログ, お知らせ, 最新情報の投稿などに便利なのがWordpressの投稿機能(Gutenbergエディタ)ですが、もしITが苦手な人がこのページから投稿した場合、余計な部分を変更してしまって自分で直すことが出来なくならないだろうか?だったらその機能を非表示にしてしまおうという考えの元調べるに至りました。

クラシックエディタとか他のプラグインを使えばそんなの簡単に出来るのかもしれませんが、Gutenbergでそれが出来ないか?という視点で調べてみました。

function.phpから非表示に出来るもの

フォントの数値指定

フォントの数値指定1

投稿ページ左メニューから[ブロック] – [タイポグラフィ] – [カスタムフォントサイズ]を非表示にする場合は下記のように追記します。

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

フォントの数値指定を非表示にすることはできますが、残念ながら大中小などのフォントサイズは非表示にすることはできません。

フォントの数値指定2

カラーパレット

カラーパレット

投稿ページ左メニューから[ブロック] – [色] – [カラーパレット](画像の赤枠部分)を非表示にする場合は下記のように追記します。

add_theme_support( 'editor-color-palette' );

カスタムカラーピッカー

カスタムカラーピッカー

投稿ページ左メニューから[ブロック] – [色] – [カスタムカラーピッカー] (画像の赤枠部分)を非表示にする場合は下記のように追記します。

add_theme_support( 'disable-custom-colors' );

スポンサーリンク

それ以外のメニューを非表示にする方法

上記以外のメニューを非表示にする方法を探してみましたが、どうやらメニューやfunction.phpからは機能を非表示にすることは出来ないようで、CSSで非表示にする方法しかないようでした。

ただ、CSSで非表示にできるといってもすべてのブロックが固有のクラス名やidを持っているわけではなさそうですので、非表示に出来ないメニューもありそうでした。

ちなみに、Wordpressの管理画面にCSSを適用する場合は下記の手順が必要です。

WordPress管理画面にCSSを適用する方法

WordPressの管理画面にCSSを適用してデザインを変更する場合は、function.phpに下記を追記して変更用のCSSを読み込ませる必要があります。

function my_gutenberg_css_settings() {
    wp_enqueue_style( 'theme-editor-style', get_theme_file_uri('/css/editor-style.css') );
}
add_action( 'enqueue_block_editor_assets', 'my_gutenberg_css_settings' );

CSSによるメニューの非表示設定例

この設定はあくまで例ですので必ずしも正解であるとは限りません。それぞれの責任の下でご参考にしていただければ幸いです。

[ブロック] – [タイポグラフィ] – [フォントサイズ] の非表示化

下記クラスをdisplay: none;に設定することで非表示化できました。

.components-font-size-picker {
    display: none;
}

[ブロック] – [高度な設定] – [HTMLアンカー] の非表示化

下記クラスをdisplay: none;に設定することで非表示化できました。

.html-anchor-control {
    display: none;
}

[投稿] – [ステータスと公開状態] の非表示化

下記クラスをdisplay: none;に設定することで非表示化できました。

.edit-post-post-status {
    display: none;
}

[投稿] – [カテゴリー] の非表示化

下記クラスをdisplay: none;に設定することで非表示化できました。

.editor-post-taxonomies__hierarchical-terms-list {
    display: none;
}

[投稿] – [新規タグを追加] の非表示化

下記クラスをdisplay: none;に設定することで非表示化できました。

.components-form-token-field{
    display: none;
}

[投稿] – [抜粋を入力] の非表示化

下記クラスをdisplay: none;に設定することで非表示化できました。

.editor-post-excerpt {
    display: none;
}