Gutenbergでカスタムフィールドを使う

説明

Gutenbergの新エディターではカスタムフィールドのウィジェットが表示されない。既存のカスタムフィールドのデータはなくなるわけでないので、新エディター上で編集・更新できないか調べてみた。

wp_insert_post関数で網を張る

Gutenbergの新エディターでは、「下書き保存」や「公開する」ボタンを押すことで、投稿内容を更新できる。どんなデータが送信されているかを調べてる手がかりとして、wp_insert_post関数内が呼び出されているかを確認。WordPressの投稿情報はこの関数を使って更新されるのだが、Gutenbergの新エディターになってもそれは変わらないようだ。さらに関数が受け取ったパラメータの内容を確認していくと、ウィジェットのフォーム要素の値を受け取ることが可能なことが判明した。

独自ウィジェットを追加することでカスタムフィールドのデータを更新できそうな雰囲気になったので、さっそく試してみた。

Gutenbergでカスタムフィールドプラグインを作る

小1時間ほど試行錯誤し、プラグインとして実装してみた。そのコードは次の通りである。

$cf4g = new cf4g();

class cf4g {
	public function __construct() {
		global $pagenow;
		if ( in_array( $pagenow,
			array( 'post.php', 'post-new.php', 'page.php', 'page-new.php' ) ) ) {
			add_action( 'admin_init', array( &$this, 'admin_init' ) );
		}
	}
	function admin_init() {
		$title = __( 'Custom fields for gutenberg' );
		$types = get_post_types( array( 'public' => true, 'show_in_rest' => true ) );
		foreach ( $types as $type ) {
			add_meta_box( 'cf4g_meta_box', $title, array( &$this, 'meta_box' ), $type );
		}
	}
	function meta_box() {
		global $post;
		if ( function_exists( 'is_gutenberg_page' ) && is_gutenberg_page() ) {
			$value1 = get_post_meta( $post->ID, 'key1', true );
?>
<label>key1:</label>
<input type="text" id="meta_key1" name="meta_input[key1]" value="<?php echo esc_attr( $value1 ); ?>">
<?php
		}
	}
}

機能の概略としては、

  • リクエストが投稿編集ページの場合のみ'admin_init'アクションを登録する。
  • REST APIに対応した投稿タイプ向けにウィジェットを登録する。
  • Gutenbergの新エディターの場合のみカスタムフィールド用のフォームを表示する。

とシンプルな構成になっている。この中にはカスタムフィールドの値を更新するコードは含まれていないが、これはinput要素のname属性値がポイントで'meta_input'の配列として指定しているところがポイント。このように指定することにより、投稿情報の更新を行うwp_insert_post関数内で適切に処理してくれる。ここで紹介したコードでは1つのカスタムフィールドの値を更新しているが、工夫しだいで複数のカスタムフィールドの値を扱うごとも可能である。

なおGutenbergの新エディター向けにフォームを含んだウィジェットを使用する場合は、name属性値を意識すること。name属性値が投稿情報のプロパティ名と重複してしまうと、意図した通りにデータを更新できないといった不具合が生じる可能性がある。この点は十分に注意してほしい。


最終更新 : 2018年08月10日 17:21


お勧め

wp_privacy_exports_dir(2018年5月27日 更新)

string wp_privacy_exports_dir()
パーソナルデータを格納するディレクトリのパス名を取得する。

wp_get_shortlink(2018年5月27日 更新)

string wp_get_shortlink( [ int $id = 0 [ , string $context = 'post' [ , bool $allow_slugs = true ] ] ] )
短縮URLを取得する。

is_sticky(2014年2月21日 更新)

bool is_sticky( [ int $post_id = 0 ] )
投稿が「先頭に固定表示(sticky)」か調べる。

esc_textarea(2015年12月11日 更新)

string esc_textarea( string $text )
TEXTAREAタグの値をエスケープする。

get_comment_ID(2018年5月27日 更新)

int get_comment_ID( )
現在のコメントのIDを取得する。