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

[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 お知らせ Facebook JavaScript CSS カテゴリー IE 投稿タイプ seo Photoshop Shareボタン HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能