[WordPress] Gutenberg で新規投稿時に任意のブロックを入れておく方法

投稿エディタで Gutenberg を使用している場合に、新規投稿時、任意のブロックをデフォルトで配置しておくことができます。

デザイン上、指定のタグやクラス付きのタグを最初に入力してほしい場合に便利な設定です。

hタグの見出しブロックやpタグの段落ブロックを入れておく

見出しや段落ブロックを入れるには以下のようなコードを functions.php へ記入します。

function my_post_template() {
    $post_obj = get_post_type_object( 'post' );
    // get_post_type_object( 'post' )  → の部分で、設定をしたい投稿タイプのスラッグを記入
    $post_obj->template = [
		// h2タグを入れる
		[ 'core/heading', [ 'className' => 'myclass', 'level' => '2', 'content' => 'H2見出しダミーテキスト' ] ],
			// 'core/heading' → 入れたいブロックのスラッグを記入
			// 'level' => '' → 見出しの場合タグの指定を記入
			// 'className' => '' → 指定しておきたいクラスがあれば記入
			// 'content' => ''  → 入力しておきたいテキストがあれば記入

		// h3タグを入れる
		[ 'core/heading', [ 'className' => 'myclass', 'level' => '3', 'content' => 'H3見出しダミーテキスト' ] ],

		// pタグを入れる
		[ 'core/paragraph', [ 'className' => 'myclass', 'content' => 'pダミーテキスト' ] ],
    ];
}
add_action( 'init', 'my_post_template' );

これで新規投稿時、以下のキャプチャのように指定したブロックがデフォルトで入るようになります。

グループブロックなど入れ子になるブロックを入れておく

見出しなどのブロックの場合はわりとすんなりテンプレートに登録ができますが、入れ子のブロックの場合は、実際に入れ子になるように配列を入れておく必要があり、少しややこしい印象です。

前項のh2とpタグを入れ子でグループブロックに入れておくには以下のように functions.php へ記入します。

function my_post_template() {
    $post_obj = get_post_type_object( 'post' );
    $post_obj->template = [
		// グループブロックで囲む
		[ 'core/group', [ 'className' => 'myclass' ], [

			// h2タグを入れる
			[ 'core/heading', [ 'className' => 'myclass','level' => '2', 'content' => 'H2見出しダミーテキスト' ] ],

			// pタグを入れる
			[ 'core/paragraph', [ 'className' => 'myclass', 'content' => 'pダミーテキスト' ] ],
		] ],
    ];
}
add_action( 'init', 'my_post_template' );

これで新規投稿時に以下のキャプチャのようにブロックが入れ子になって入ります。

ブロックのスラッグの確認方法

ブロックのカスタマイズをする際に該当するブロックのスラッグが必要になります。

どのブロックになんというスラッグが振られているのかを確認するには、カスタマイズしたいブロックをエディタに入れてみて、コードエディタに変換すると簡単に判明しておすすめです。

右上の3つの点のボタンをクリックし、「コードエディタ」を選択すると表示が変更されます。

wp: からはじまる部分が WordPress の core のブロックになり、その後にあとにつづくテキストがスラッグになります。

プラグインで入れたカスタムブロックの場合は、そのプラグインのスラッグが表示されるので確認して使用しましょう。

Related Article

    関連する記事はありません。

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS