投稿編集画面へ挿入した再利用ブロックを編集できないようにする方法

投稿編集画面へ挿入した再利用ブロックを編集できないようにする方法

WordPressの便利機能として使われる機会が多いのが、再利用ブロック。再利用ブロックの特徴を端的に紹介すると、以下のようなものでしょう。

  1. 定型文を作成しておくことができる
  2. 複数の記事へ作成した定型文を簡単に挿入できる
  3. 編集することで、同じ再利用ブロックを挿入したすべてのコンテンツの内容が変更される
  4. 挿入した再利用ブロックを通常のブロックへ戻して、そのコンテンツだけの内容にすることができる

1と2はテキストエディタ時代の話でいう、AddQuictagプラグインを使ったのと同じ動作、3と4は仕組みが分かっていれば本当に便利な機能ですね。

ただ、どこかの投稿編集画面で編集したものが多数の投稿などに反映されてしまうのは、逆を言えば、誰かがどこかで再利用ブロックを誤って編集したらえらいことになる可能性もあり、3については不要と思われる方も多いのではないでしょうか?

今回は【HABONE】テーマの機能の1つである、挿入した再利用ブロックを投稿編集画面上では編集できないようにする方法を紹介します。

後述していますが、再利用ブロック内にあるテーブルブロックの編集を禁止するためのコードについては2021年10月11日現在テストを始めたばかりですので、他の場所で影響が出るかも知れません。

本記事を参考にWordPressサイトのカスタマイズをお考えの方へ

このカスタマイズ内容は、当サイトで配布している【HABONE BASE】テーマへ、上位バージョンの【HABONE】テーマの機能の一部を追加するための参考記事です。

テーマによってプログラムの書き方や構成が異なりますし、デザイン要素も異なりますので、特に【HABONE BASE】以外のテーマへの適用を行う場合には、以下のスキルが必要となります。

  • カスタマイズで不具合が発生した場合にご自身で復旧が可能なこと
  • FTPクライアントツールやサーバーのファイルマネージャーなどを使ってファイルの転送などが行えること
  • テーマファイルの編集を行った経験があること
  • ご自身でデザインの修正や調整ができること

また、【HABONE BASE】へ追加する場合には、子テーマでのカスタマイズをおすすめします。

挿入した再利用ブロックの編集を禁止する方法

以下のコードをテーマのfunctions.phpへ挿入するだけで、比較的簡単に制御できます。

/***** エディタで再利用ブロックの編集を禁止する *****/
if ( !function_exists( 'habone_disable_reuse_block_edit' ) ){
	function habone_disable_reuse_block_edit(){
?>
<style>
.block-library-block__reusable-block-container {
	border: 4px solid #FF0000;
	pointer-events: none;
}

.block-library-block__reusable-block-container:before {
	content: "再利用ブロックのためここでは編集できません";
	font-size:0.8em;
	color:#FF0000;
}
/* テーブルブロックの制御 */
.block-editor-block-list__layout {
    user-select: none;
}
</style>
<?php
}
}
add_action( 'admin_head', 'habone_disable_reuse_block_edit');

コードについて

コード自体はアクションフックを使って、admin_head(管理画面側でのテーマヘッダー)へ内容を追加するというもので、単純に再利用ブロックに割り当てられているCSSに対して「pointer-events:none;」でクリックを不可にして、枠線と再利用ブロック上にメッセージを表示することで判別しやすくしたものです。

再利用ブロック内のテーブルブロックに対しては「pointer-events:none;」が効かないため、別に「user-select: none;」(選択させない)を追加して保護するようにしています。

テーブルブロックの部分はどうするか結構悩みましたが、その他の部分は案外簡単に実装できました

テーブルブロックの編集禁止について

冒頭でも書いた通り、再利用ブロック内のテーブルブロックに関しては、通常の処置では編集が可能となってしまうため、別の処理を追加しています。問題がある場合は、前項のコードから以下の部分を削除してください。

/* テーブルブロックの制御 */
.block-editor-block-list__layout {
    user-select: none;
}

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

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

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