特定の埋め込みブロックを読み込まなくする(選択できなくする)する方法

特定の埋め込みブロックを読み込まなくする(選択できなくする)する方法
このページについて
WordPressの投稿編集画面の設定では読み込まなくすることができない、個々の埋め込みブロックを非表示にし、選択できなくする方法を紹介します。

WordPressのブロックエディタにおけるブロックの選択肢、いっぱいありますよね。

標準のブロックだけでも多いのに、プラグインが追加したブロックが増えると..もう何が何だかわからないという方も多いのではないかと思います。

通常のブロックであれば、投稿編集画面で右上にある「・・・(縦並び)」→「設定」と進み、「ブロック」タブにある一覧からチェックを外せば、簡単に読み込まなく(非表示)にできます。

が、埋め込みブロックに関しては、「埋め込み」のチェックを外すと、TwitterやYoutubeを始め、全部の埋め込みブロックが読み込まれなくなってしまいます。

逆にブロック一覧の中で一番多くて使わなさそうなのが埋め込みブロックなのに、これが制御できないなんて...。

そこで比較的簡単に、埋め込みブロック内の一部ブロックを読み込まなくする(非表示にする)方法を紹介します。

なお、本カスタマイズでは以下のスキルが必要です。

  • パソコンでテキストエディタを使ってファイルの作成ができる
  • FTPクライアントツールなどで、有効化しているテーマへファイルの転送ができる
  • 有効化しているテーマのfunctions.phpへコードの追加をしたことがある(エラーが出たら対処できる)

本記事は、Gutenberg(ブロックエディタ)で不要なブロックを隠す方法3選を参考に、個々の埋め込みブロックに絞り、かつ、より制御しやすい形にして紹介しています。

コードではなく、簡単にプラグインで行いたいという方は、「Gutenberg Block Manager」あたりがおすすめです。

ページ上部へ戻る▲

個々の不要な埋め込みブロックを読み込まなくする手順

前述したとおり、単純に個々の埋め込みブロックを制御することができないので、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-ブロック名"

この機能は【HABONE】テーマのバージョン2.0で実装しています

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 監修:星野 邦敏, 監修:吉田 裕介
¥2,948 (2022/09/22 08:50時点 | Amazon調べ)
著:Mana
¥2,200 (2022/09/22 08:50時点 | Amazon調べ)
Avatar photo

作者:

WordPress用テーマ「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:50代 趣味/園芸・ペット・卓球