この記事は最後に更新してから1年以上経過しています。

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


お勧め

has_image_size(2014年4月24日 更新)

bool has_image_size( string $name )
イメージサイズが登録済みか調べる。

wp_publish_post(2020年12月12日 更新)

void wp_publish_post( int | WP_Post $post )
投稿を公開する。

get_category(2018年5月27日 更新)

mixed get_category( mixed $category [ , string $output = OBJECT [ , string $filter = 'raw' ] ] )
IDを指定してカテゴリー情報を取得する。

add_term_meta(2018年5月27日 更新)

mixed add_term_meta( int $term_id, string $meta_key, mixed $meta_value [ , bool $unique = false ] )
タームのメタ情報を追加する。

win_is_writable(2013年8月3日 更新)

bool win_is_writable( string $path )
Windows環境でディレクトリが書き込みできるか調べる。