WordPressのブロックエディタにおけるブロックの選択肢、いっぱいありますよね。
標準のブロックだけでも多いのに、プラグインが追加したブロックが増えると..もう何が何だかわからないという方も多いのではないかと思います。
通常のブロックであれば、投稿編集画面で右上にある「・・・(縦並び)」→「設定」と進み、「ブロック」タブにある一覧からチェックを外せば、簡単に読み込まなく(非表示)にできます。
が、埋め込みブロックに関しては、「埋め込み」のチェックを外すと、TwitterやYoutubeを始め、全部の埋め込みブロックが読み込まれなくなってしまいます。
逆にブロック一覧の中で一番多くて使わなさそうなのが埋め込みブロックなのに、これが制御できないなんて...。
そこで比較的簡単に、埋め込みブロック内の一部ブロックを読み込まなくする(非表示にする)方法を紹介します。
なお、本カスタマイズでは以下のスキルが必要です。
- パソコンでテキストエディタを使ってファイルの作成ができる
- FTPクライアントツールなどで、有効化しているテーマへファイルの転送ができる
- 有効化しているテーマのfunctions.phpへコードの追加をしたことがある(エラーが出たら対処できる)
本記事は、Gutenberg(ブロックエディタ)で不要なブロックを隠す方法3選を参考に、個々の埋め込みブロックに絞り、かつ、より制御しやすい形にして紹介しています。
コードではなく、簡単にプラグインで行いたいという方は、「Gutenberg Block Manager」あたりがおすすめです。
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
- 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)
個々の不要な埋め込みブロックを読み込まなくする手順
前述したとおり、単純に個々の埋め込みブロックを制御することができないので、JSファイルを作り、それをテーマ内へ読み込ませる方法で読み込まれないようにします。
1.不要な埋め込みブロックを非表示にするためのコードファイルを作る
以下のコードをテキストエディタへコピーし、「disabled-embed-block.js」というファイル名、拡張子で保存します。
wp.domReady(function () {
//個々の埋め込みブロックの制御
//wp.blocks.unregisterBlockVariation('core/embed', 'twitter'); // twitterを削除
//wp.blocks.unregisterBlockVariation('core/embed', 'youtube'); // youtubeを削除
wp.blocks.unregisterBlockVariation('core/embed', 'wordpress'); // WordPressを削除
wp.blocks.unregisterBlockVariation('core/embed', 'soundcloud'); // SoundCloudを削除
//wp.blocks.unregisterBlockVariation('core/embed', 'spotify'); // spotifyを削除
wp.blocks.unregisterBlockVariation('core/embed', 'flickr'); // flickrを削除
//wp.blocks.unregisterBlockVariation('core/embed', 'vimeo'); // vimeoを削除
wp.blocks.unregisterBlockVariation('core/embed', 'animoto'); // animotoを削除
wp.blocks.unregisterBlockVariation('core/embed', 'cloudup'); // cloudupを削除
wp.blocks.unregisterBlockVariation('core/embed', 'crowdsignal'); // crowdsignalを削除
//wp.blocks.unregisterBlockVariation('core/embed', 'dailymotion'); // dailymotionを削除
wp.blocks.unregisterBlockVariation('core/embed', 'imgur'); // imgurを削除
wp.blocks.unregisterBlockVariation('core/embed', 'issuu'); // issuuを削除
wp.blocks.unregisterBlockVariation('core/embed', 'kickstarter'); // kickstarterを削除
wp.blocks.unregisterBlockVariation('core/embed', 'meetup-com'); // meetup-comを削除
wp.blocks.unregisterBlockVariation('core/embed', 'mixcloud'); // mixcloudを削除
wp.blocks.unregisterBlockVariation('core/embed', 'reddit'); // redditを削除
wp.blocks.unregisterBlockVariation('core/embed', 'reverbnation'); // reverbnationを削除
wp.blocks.unregisterBlockVariation('core/embed', 'screencast'); // screencastを削除
wp.blocks.unregisterBlockVariation('core/embed', 'scribd'); // scribdを削除
wp.blocks.unregisterBlockVariation('core/embed', 'slideshare'); // slideshareを削除
wp.blocks.unregisterBlockVariation('core/embed', 'smugmug'); // smugmugを削除
wp.blocks.unregisterBlockVariation('core/embed', 'speaker-deck'); // speaker-deckを削除
//wp.blocks.unregisterBlockVariation('core/embed', 'tiktok'); // tiktokを削除
wp.blocks.unregisterBlockVariation('core/embed', 'ted'); // tedを削除
//wp.blocks.unregisterBlockVariation('core/embed', 'tumblr'); // tumblrを削除
wp.blocks.unregisterBlockVariation('core/embed', 'videopress'); // videopressを削除
wp.blocks.unregisterBlockVariation('core/embed', 'wordpress-tv'); // wordpress-tvを削除
wp.blocks.unregisterBlockVariation('core/embed', 'amazon-kindle'); // amazon-kindleを削除
wp.blocks.unregisterBlockVariation('core/embed', 'wolfram-cloud'); // wolfram-cloudを削除
//wp.blocks.unregisterBlockVariation('core/embed', 'pinterest'); // pinterestを削除
});
保存した「disabled-embed-block.js」ファイルを子テーマフォルダ内(style.cssと同じ場所)へアップロードします。
2.コードファイルをテーマへ適用させる
子テーマのfunctions.phpへ以下を追記します。
/***** 不要な埋め込みブロックを削除 *****/
function ha_disable_embed_block() {
wp_enqueue_script('habone-deny-embed-blocks',get_stylesheet_directory_uri().'/disabled-embed-block.js',array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' )
);
}
add_action( 'enqueue_block_editor_assets', 'ha_disable_embed_block' );
親テーマの場合はコード中の「get_stylesheet_directory_uri()」を「get_template_directory_uri()」へ書き換えてください(個人的には親テーマへの適用はおすすめしません)
コード中には、2022年4月20日現在(WordPress5.9.3時点)での埋め込みブロックがすべて列記してあります。
コード中に「//」でコメントアウトしてあるのは、ブロック一覧に表示するアイテムです。
「//」でコメントアウトしているものの中で、不要なものはコメントを外せば非表示になり、逆に必要なものはコメント「//」を入れれば、表示されるようになります。
作業が終わったら、どれかの投稿の投稿編集画面を開き、キャッシュクリア(「Ctrl」+「F5」)した後に、ブロックの追加を行ってきちんと制御されているかを確認してください
その他のブロックの読み込みも制御したいときは
ここまで、個々の埋め込みブロックを無効化するコードを紹介してきましたが、もちろん、WordPress標準(コア)ブロックの制御もできます。
コアブロックを無効にするには、上記コード中のjs側で「//個々の埋め込みブロックの制御」の下へ以下の行を追加していきます。
wp.blocks.unregisterBlockType(ブロック名);
ブロック名のところを変更して追加していけばいくらでも追加できます。
例えば、クラシックブロックがいらないという場合には以下のようにします。
wp.blocks.unregisterBlockType('core/freeform');
次項でコアのブロック名を一覧にしていますので参考にしてください
WordPress本体(コア)ブロック一覧
WordPressのバージョンアップにより、コアブロックが追加されていくことがあります。
最新のブロック一覧は、WordPress公式ページのCore Blocks Referenceを参照ください。
【テキスト】カテゴリー
- ‘core/heading’ // 見出し
- ‘core/list’ // リスト
- ‘core/quote’ // 引用
- ‘core/code’ // コード
- ‘core/freeform’ // クラシック
- ‘core/preformatted’ // 整形済み
- ‘core/pullquote’ // プルクオート
- ‘core/table’ // テーブル
- ‘core/verse’ // 詩
【メディア】カテゴリー
- ‘core/image’ // 画像
- ‘core/gallery’ // ギャラリー
- ‘core/audio’ // 音声
- ‘core/cover’ // カバー
- ‘core/file’ // ファイル
- ‘core/media-text’ // メディアとテキスト
- ‘core/video’ // 動画
【デザイン】カテゴリー
- ‘core/buttons’ // ボタン
- ‘core/columns’ // カラム
- ‘core/group’ // グループ
- ‘core/more’ // 続き
- ‘core/nextpage’ // ページ区切り
- ‘core/separator’ // 区切り
- ‘core/spacer’ // スペーサー
- ‘core/site-logo’ // サイトロゴ
- ‘core/site-tagline’ // サイトのキャッチフレーズ
- ‘core/site-title’ // サイトのタイトル
- ‘core/query-title’ // アーカイブタイトル
- ‘core/post-terms’ // 投稿カテゴリー, 投稿タグ
【ウィジェット】カテゴリー
- ‘core/shortcode’ // ショートコード
- ‘core/archives’ // アーカイブ
- ‘core/calendar’ // カレンダー
- ‘core/categories’ // カテゴリー
- ‘core/html’ // カスタムHTML
- ‘core/latest-comments’ // 最新のコメント
- ‘core/latest-posts’ // 最新の投稿
- ‘core/page-list’ // 固定ページリスト
- ‘core/rss’ // RSS
- ‘core/social-links’ // ソーシャルアイコン
- ‘core/tag-cloud’ // タグクラウド
- ‘core/search’ // 検索
【テーマ】カテゴリー
- ‘core/query’ // クエリーループ, 投稿一覧
- ‘core/post-title’ // 投稿タイトル
- ‘core/post-content’ // 投稿コンテンツ
- ‘core/post-date’ // 投稿日
- ‘core/post-excerpt’ // 投稿の抜粋
- ‘core/post-featured-image’ // 投稿のアイキャッチ画像
- ‘core/loginout’ // ログイン/ログアウト
【埋め込み】カテゴリー
- ‘core/embed’
プラグインなどが追加したブロックなどで、ブロック名が分からない場合は、ブロックアイコンの上でデベロッパーツールを開き、以下のコードにあるブロック名部分を指定すれば非表示にできます。
<button type="button"...class="components-button block-editor-block-types-list__item editor-block-list-item-ブロック名"