WordPress5 カスタム投稿タイプ、カスタムタクソノミー(カテゴリ・タグ)をgutenbergに対応する

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
wordpress image
イラストACの画像をもとに加工しています。

プラグインなしのカスタム投稿タイプやカテゴリ、タグをWordPress 5の標準エディタgutenbergで使うための方法です。

あまりにもかんたんです。1~2か所設定を変更するだけです。

テーマやプラグインのカスタム投稿タイプやカテゴリ、タグで、WordPress 5の新しいエディタgutenbergで使えないときがあります。

カスタムのカテゴリやタグのことをカスタムタクソノミーといいます。

カテゴリやタグは、データ上はタクソノミーという同じ種類で管理しています。

  • カスタム投稿タイプの編集画面がgutenbergで開けない。
  • gutenbergの編集画面でカスタムカテゴリ・タグが設定のメニューが出ない。

など焦る人もいるでしょう。

Custom Post Tpye UIプラグインを使っているときは、プラグインの設定を変更するだけで対応できます。

-> Custom Post Type UIをgutenbergに対応させる

対応させる作業はとてもかんたんです。数秒で終わります。ただし、.phpファイルを編集します。作業をするときはバックアップを取ってからしましょう。

カスタムタクソノミー

register_taxonomy()を使っているソースコードを検索機能を使って探します。

register taxonomy
function register_my_taxes_category_test() {
	$labels = array(
		"name" => __( "test category", "origin_theme" ),
		"singular_name" => __( "test category", "origin_theme" ),
	);

	$args = array(
		"label" => __( "test category", "origin_theme" ),
		"labels" => $labels,
		"public" => true,
		"publicly_queryable" => true,
		"hierarchical" => true,
		"show_ui" => true,
		"show_in_menu" => true,
		"show_in_nav_menus" => true,
		"query_var" => true,
		"rewrite" => array( 'slug' => 'category_test', 'with_front' => true, ),
		"show_admin_column" => true,
		"show_in_rest" => true,
		"rest_base" => "category_group",
		"rest_controller_class" => "WP_REST_Terms_Controller",
		"show_in_quick_edit" => false,
		);
	register_taxonomy( "category_test", array( "post" ), $args );
}
add_action( 'init', 'register_my_taxes_category_test' );

タクソノミーをつくるときに設定する項目(show_in_rest)がfalseになっていませんか?

または未設定ではないですか?

これをtrueにするだけです。未設定の場合は『"show_in_rest" => true,』を追加してください。たったこれだけです。

カスタム投稿タイプ

カスタム投稿タイプは、register_post_type()を使っているソースコードを検索機能を使って探します。

register post type
function register_my_cpts_test() {
	$labels = array(
		"name" => __( "test", "origin_theme" ),
		"singular_name" => __( "test", "origin_theme" ),
		"menu_name" => __( "test", "origin_theme" ),
	);

	$args = array(
		"label" => __( "test", "origin_theme" ),
		"labels" => $labels,
		"description" => "",
		"public" => true,
		"publicly_queryable" => true,
		"show_ui" => true,
		"delete_with_user" => false,
		"show_in_rest" => true,
		"rest_base" => "",
		"rest_controller_class" => "WP_REST_Posts_Controller",
		"has_archive" => false,
		"show_in_menu" => true,
		"show_in_nav_menus" => true,
		"exclude_from_search" => false,
		"capability_type" => "post",
		"map_meta_cap" => true,
		"hierarchical" => false,
		"rewrite" => array( "slug" => "test", "with_front" => true ),
		"query_var" => true,
		"supports" => array( "title", "editor", "thumbnail" ),
		"taxonomies" => array( "category", "post_tag" ),
	);

	register_post_type( "test", $args );
}
add_action( 'init', 'register_my_cpts_test' );

タクソノミーと同じように『"show_in_rest" => true』を設定します。

それともうひとつ、設定項目のsupportsを見てください。"editor"は入ってますか?

これがないとgutenbergでカスタム投稿タイプが使えません。supportsが未設定のときはデフォルトで"editor"が設定されるのでそのままでいいです。

たったこれだけです。

ちなみに、Classic Editorプラグインを使って旧エディタと併用するとき、新旧エディタ両方とも使えます。

gutenbergでカスタム投稿タイプ・タクソノミー(カテゴリ・タグ)を使うには

REST APIを有効化

REST API (Representational State Transfer API)

URLを指定すると常に同じ結果を返すAPI。

URLはユニークで、決まった処理のリクエストになるので、シンプルでわかりやすいのが特長。

処理を受けるサーバーも、URLを見れば何をすれば分かるのでシンプルで実装しやすい。

結果は、HTML, XML, JSONなどで返す。

最近のWebサービスで提供されるAPIはREST APIが多い。

Facebook, Twitterなどもそう。また、ECサイトと在庫管理などのWebサービスと連携するときにもREST APIを使う。

Webサービスでは情報取得、情報の追加・更新・削除などのAPIが提供されるが、その説明にURLを指定するものはREST APIであることが多い。

もうひとつ、セッションを使わないのが特長。

セッションを使わずに1リクエストで処理が完結するため、アクセス数やリクエスト数の多いサイトに適している。(SNSなど)

セッションハイジャックがないので、情報漏えいや不正なリクエストも防ぐことができる。

-> くわしい内容 Wikipedia

前のページ
WordPress5, Custom Post Type UI をgutenbergに対応する
WordPress5 再利用ブロックが表示されない!なんで?
次のページ
WordPressの本
post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ
  • 最新のWordPress(バージョン5)に対応した本

の7冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本7選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!