リアルタイムコラボレーション有効化時のメタボックスの扱い方(例)

公開日:2026(令和8)年4月22日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

サイトの維持や有用なページの紹介を目的として、このページには各所に広告を表示しています。多数の広告が表示され、閲覧しにくいところがあるかも知れませんが、ご協力いただけますようお願いいたします。

WordPress7.0以降でリアルタイムコラボレーション機能が追加され、複数のユーザーによる共同編集ができるようになりますね(このページの作成時点では7.0RC版なのでなりますと表現しています)。

便利な機能であることに間違いはないのですが、1つ不都合があるのがメタボックスがある編集画面では機能しないことです。

メタボックスはカスタムフィールドの値を入力・保存させるための窓のことで、編集画面のサイドバーや本文下などにプラグインなどから追加されることが多いです。プログラム的には「add_metabox()」という関数で作成された入力ボックスのことを指します。

この不都合については「RTC: メタボックスのRTC互換性のためのフィルタリング可能なフラグを追加# 76939」などで対応方法についていろいろと議論されているようですが、今後どうなるかは不透明というのが現在地でしょう。

これを解消するにはメタボックスでない方法(ブロックエディターのカテゴリーなどのパネルと同じ方法)で入力窓の追加と更新をするようにするのが一番ではあるものの、これを構成するには知識が必要で、前述したadd_metabox()のように簡単に作れるものではありません(私も試行錯誤しましたがしっくりくる形にはできませんでした)。

そこで今回は、WordPressは下位互換性を大事にするからきっとメタボックスに対する処置もいろいろとやってくれるだろうという希望、リアルタイムコラボレーションでカスタムフィールドの値を相互に入れ替え合うということは少ないのでは?ということ、それからそもそもリアルタイムコラボレーション機能ってそんなに頻度高く使うの?という疑問があることなどから、とりあえずの対処として、リアルタイムコラボレーションが有効かどうかを判断して、有効になっているサイトではメタボックスを表示させないようにして共同編集できるようにする方法を紹介します。

余談:リアルタイムコラボレーションはRTCと略されているようですが、元某業界人の私にとってRTCはレッドテールキャットの略としか思えないです(笑)。

リアルタイムコラボレーション有効化時にメタボックスがあると共同編集が機能しなくなる理由

そもそも何でリアルタイムコラボレーションを有効にした環境でメタボックスがあると共同編集ができなくなるのかというところに触れておきます。

それはメタボックスに入力した値が保存されるプロセスにあります。

まずは私が実際にテーマに入れているメタボックスを使う場合のコードを以下に示します(データのサニタイズ部分は削除していますのでそのまま流用はしないでください)。

/***** メタボックスの表示とカスタムフィールドの更新 *****/
function pwcn_add_plugin_slug_panel() {
	add_meta_box(
		'pwcn-plugin-slug-panel', // 編集画面セクションのHTML要素のID
		'プラグインのスラグ', // 編集画面セクションのタイトル
		'pwcn_add_plugin_slug_callback', // 編集画面セクションにHTML出力する関数
		'post', // 投稿タイプ
		'normal',// 編集画面セクションが表示される部分
		'high'//位置
	);
}
add_action('add_meta_boxes', 'pwcn_add_plugin_slug_panel');

/* メタボックスの内容 */
function pwcn_add_plugin_slug_callback(){

	$slug = get_post_meta(get_the_ID(), 'pwcn_pluginslug', true);

?>

<textarea name="pwcn_pluginslug" id="pwcn_pluginslug" cols="100" rows="1"><?php echo $slug; ?></textarea>

<?php
}

/***** カスタムフィールドの値を保存する処理 *****/
function pwcn_plugin_slug_save($post_id){

//自動保存では更新しない
if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) 
	return $post_id;

//一括更新では更新しない
if(isset($_POST['action']) && $_POST['action'] == 'inline-save') 
	return $post_id;

//情報の更新
if(isset($_POST['pwcn_pluginslug'])){
	update_post_meta($post_id, 'pwcn_pluginslug', $_POST['pwcn_pluginslug']);
} else {
		delete_post_meta($post_id, 'pwcn_pluginslug');
}
}
add_action('save_post', 'pwcn_plugin_slug_save');

前半でボックスを表示させ、後半で入力された値を保存するという一般的な流れですね。

問題となるのは保存の処理、一般的にはsave_postにフックさせ、投稿に何等かの保存処理(下書き保存、公開、更新といったボタンのクリック)時に値が違えば書き換え、空なら削除するということをしますが、共同編集機能ではそうしたアクションがなくてもその名の通りリアルタイムで内容が変わるので、保存というアクションがないからメタボックスの変更をされても反映されずデータの不整合が起こる可能性があるのです。

そのため、メタボックスがある場合には「投稿設定」でリアルタイムコラボレーションが有効になっていても機能させないというのが現段階での流れとなっているのです。

逆に前述したカテゴリーやタグといったパネルと同じように常に変更を監視してデータを入れ替えるような機構ではこうした不整合が起きませんから共同編集が可能となるわけです

WordPress 7.0段階での対処例

前述したように、テストした限り、現段階ではメタボックスがある=リアルタイムコラボレーションが無効になるというのは間違いありません。

では私のようにカテゴリーやタグと同じ機構の実装が困難という方はどうするか?答えは「リアルタイムコラボレーションが有効になっていたらメタボックスは表示させない」ということです。

以下が前述したメタボックスでのカスタムフィールドの更新措置にこの条件を加えたものです。

/***** メタボックスの表示とカスタムフィールドの更新 *****/
function pwcn_add_plugin_slug_panel() {
	// コラボ有効なら true、無効なら false
	$is_rtc = ( get_option( 'wp_collaboration_enabled' ) === '1' );

	add_meta_box(
		'pwcn-plugin-slug-panel', // 編集画面セクションのHTML要素のID
		'プラグインのスラグ', // 編集画面セクションのタイトル
		'pwcn_add_plugin_slug_callback', // 編集画面セクションにHTML出力する関数
		'post', // 投稿タイプ
		'normal',// 編集画面セクションが表示される部分
		'high',//位置
		array(
			'__back_compat_meta_box' => $is_rtc,
		)
	);
}
add_action('add_meta_boxes', 'pwcn_add_plugin_slug_panel');

/* メタボックスの内容 */
function pwcn_add_plugin_slug_callback(){

	$slug = get_post_meta(get_the_ID(), 'pwcn_pluginslug', true);

?>

<textarea name="pwcn_pluginslug" id="pwcn_pluginslug" cols="100" rows="1"><?php echo $slug; ?></textarea>

<?php
}

/***** カスタムフィールドの値を保存する処理 *****/
function pwcn_plugin_slug_save($post_id){
	//コラボ有効なら更新しない
	if ( get_option( 'wp_collaboration_enabled' ) === '1' ) {
		return $post_id;
	}

//自動保存では更新しない
if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) 
	return $post_id;

//一括更新では更新しない
if(isset($_POST['action']) && $_POST['action'] == 'inline-save') 
	return $post_id;

//情報の更新
if(isset($_POST['pwcn_pluginslug'])){
	update_post_meta($post_id, 'pwcn_pluginslug', $_POST['pwcn_pluginslug']);
} else {
		delete_post_meta($post_id, 'pwcn_pluginslug');
}
}
add_action('save_post', 'pwcn_plugin_slug_save');

見比べたら分かると思いますが、メタボックスの表示条件と、保存条件に「リアルタイムコラボレーションが有効だったら..」という条件を加えています。

このようにすることで、

  • リアルタイムコラボレーションが有効の場合は、ブロックエディターにそのメタボックスを表示させない
  • 更新ボタンをクリックした時、空のデータが渡されてカスタムフィールドのキーと値が削除されないよう、リアルタイムコラボレーションが有効の場合は保存をしない

ようにすることができ、一応問題が解消できるのです。

参考:メタボックス互換性フラグ(フラグのスイッチが逆だと思いますが..)

これは自前でメタボックスを追加している場合に限った措置で、メタボックスを使うようなプラグインやテーマの場合は作者が何等かの対処をしなければリアルタイムコラボレーションは使えないことに注意ください

以上、完全解決ではありませんが、メタボックスを使いつつ、リアルタイムコラボレーションを使うための応急措置でした。

補足:メタボックスでのデータ変更ができないことをエディターに明示する

上記の措置ではメタボックスが表示されなくなり、データが維持されるだけで、「あれ?今まであった入力窓がなくなってる」と思われてしまうかも知れません。

そこで以下のようなコードを使ってリアルタイムコラボレーションが有効なので入力窓が使えないという旨を伝えるのも大事かも知れません。

以下のコードはテーマのfunctions.phpに読み込み用のコードを追加し、テーマディレクトリに「rtc-message.js」というJSファイルを設置した前提ですので利用する際は適宜コード内を変更してください

function pwcn_rtc_alert_message(){
	$handle = 'pwcn-rtc-message';

	wp_enqueue_script(
		$handle,
		get_template_directory_uri() . '/rtc-message.js',
		array('wp-plugins', 'wp-edit-post', 'wp-editor', 'wp-element', 'wp-components', 'wp-data', 'wp-core-data'),
		time(),
	true
	);

	wp_localize_script( $handle, 'pwcnL10n', array(
		'isRtc' => ( get_option( 'wp_collaboration_enabled' ) === '1' ),
		'rtcNotice' => __( '現在、共同編集モードが有効なため、一部のカスタム設定は非表示になっています。', 'text-domain' ),
	) );
}
add_action('enqueue_block_editor_assets','pwcn_rtc_alert_message');
( function() {
	// WPのライブラリがロードされ、DOMの準備ができるのを待つ
	wp.domReady( function() {
		const { subscribe, dispatch, select } = wp.data;
        
		// PHPから渡された情報がない、またはコラボ中でない場合は何もしない
		if ( ! window.pwcnL10n || ! window.pwcnL10n.isRtc ) {
			return;
		}

		let hasNotified = false;

		const unsubscribe = subscribe( function() {
			// エディタの準備が完了したかチェック
			// (select('core/editor') が取得できるまで待機)
			const editorSelect = select( 'core/editor' );
			if ( ! editorSelect ) return;

			const isReady = editorSelect.__unstableIsEditorReady();
            
			if ( isReady && ! hasNotified ) {
				hasNotified = true;

				dispatch( 'core/notices' ).createNotice(
					'warning',
					window.pwcnL10n.rtcNotice,
					{
						 isDismissible: true,
						type: 'default', // エディタ上部に固定表示
					}
				);
                
				unsubscribe();
			}
		} );
	} );
} )();
, , , , , , , , , , , , , ,
Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
PHPから.htaccessへコードを追加する方法、削除する方法