Gutenberg(ブロックエディタ)メモ: metaデータを設定する

Cat WEBサイト構築Tag , by cubismer
WordPressのGutenberg
WordPressのGutenberg

WordPressのGutenbergハンドブックに載っている記述そのままでは作る方法が分からず、実装して試した内容です。

構築環境
WordPress4.9.8
JavaScriptJSX/ESNext
Gutenberg3.8.0

注意点

  • Gutenbergがコアに入る前の段階の記事です
  • 書き方だけではなく、語句や名称にも問題がある可能性があります

実現したいこと

  • 記事にメタデータを設定する

ハンドブックでは以下のページに説明があります。

なお、metaタグ(meta name=""でrobotsなどに使うHTMLのmetaタグ)ではなく、WPのオブジェクト(投稿データなど)それぞれに付けることが出来るメタデータです(説明があってないかもしれませんが)。

サンプル


const { registerBlockType } = wp.blocks;

registerBlockType('my-plugin/event-location', {
  title: 'meta author',
  category: 'widgets',

  attributes: {
    author: {
        type: 'integer',
        source: 'meta',
        meta: 'author'
    },
  },

  edit( { attributes, setAttributes } ) {
      function onChange( event ) {
          setAttributes( { author: event.target.value } );
      }

      return <input value={ attributes.author } onChange={ onChange } type="text" />;
  },

  save () {
    return null
  }
})

続いてPHPファイル(プラグインで作っているならプラグイン内のPHPファイル、それ以外ならfunctions.phpなど)に以下を記載します。


//初期設定
add_action( 'enqueue_block_editor_assets', function() {
  wp_enqueue_script(
    'myplugin-gutenberge',
    plugins_url( 'block.js', __FILE__ ),
    [ 'wp-blocks' ]
  );
} );

//配列を対象とする場合
function gutenberg_my_block_init() {
    register_meta( 'post', 'author', array(
        'show_in_rest' => true,
    ) );
}
add_action( 'init', 'gutenberg_my_block_init' );

//配列ではなく単体を対象とする場合
function gutenberg_my_block_init() {
    register_meta( 'post', 'author', array(
        'show_in_rest' => true,
        //singleでメタキーがオブジェクトごとに1つの値を持つか、オブジェクトごとに値の配列を持つかを切り替える
        //初期値はfalseで配列が対象となる　
        'single' => true,
    ) );
}
add_action( 'init', 'gutenberg_my_block_init' );

metaのオブジェクトが配列か否かで出力方法も変わりますが、それぞれ出力したい箇所に以下のように記載します。


  //配列の場合
  $postid = get_the_ID();
  //postは投稿タイプで、投稿ページで設定したならpost。
  //$postidはオブジェクトIDを入れるところだが、今回は記事IDでよい。
  //authorはattributesで設定したキーを入れる。
  $meta = get_registered_metadata( 'post', $postid, 'author' );
  //１つだけ入れた前提なので、最初の１つだけ取り出す。
  echo $meta[0];

  //単体の場合
  $postid = get_the_ID();
  $meta = get_registered_metadata( 'post', $postid, 'author' );
  echo $meta;

以下参考URL。

注意点

WPのREST-API(rest_output_link_wp_head含む)をfunctions.phpで無効にしている場合、metaなどは利用できずにエラーになります。

関連記事

Gutenberg(ブロックエディタ)に関連する記事一覧。

1人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄