1RiDzain 2022年7月6日

ブロックテーマとは

昨今のwordpressの進化の勢いが凄まじく（特にユーザーの投稿機能が著しく変化）、現在β版のブロックテーマエディター対応のテーマを作成することにしました。公式では、Twenty Twenty-Twoはブロックテーマとしてリリースされた最初の公式テーマで、Twenty Twenty-Oneのブロックテンプレート版もリリースされています。

ブロックエディターの導入で、コンテンツをノーコードで作成する機能が充実したワードプレスですが、ブロックテーマはこの方向性を更にサイト全体に拡大したものです。ブロックテーマを使用すると、サイトのタイトルからフッターまで、ほぼすべてをブロックで編集することが可能になります。ただしブロックテーマは、テーマの作成方法が大幅に異なる・・・というテンプレート製作者には最初のハードルがあります。

現時点（2022年7月）ではベータ版のブロックテーマエディターを利用しつつ、ブロックテーマ作成にチャレンジ。試行錯誤しながら、最良の方法には程遠いですが、執筆中の疑問点を解消しつつ記述していきます。

参考

基本構成

まず、ブロックテーマの最低限の構成を確認します。

  • index.phpとstyle.css
  • templatesフォルダ内にindex.html（フォルダ名が間違っていると認識されないので注意）

テンプレートパーツ（header.htmlやfooter.html）はオプションです。 テンプレートパーツは、partsフォルダに収めます。theme.jsonファイルを使用してテーマの構成とデフォルトのスタイル設定を指定することができます。構成のパタンとしては、下記が一般的です。これまでテーマを作成してきた人は、これでだいたいピンとくると思います。

templatesフォルダに含めたindex.htmlは、当然phpは書けません。ブロックコンテンツマークアップ形式で記述します。具体的には下記のような内容になります。

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
<main class="wp-block-group">

	<!-- wp:query -->
	<div class="wp-block-query">
		<!-- wp:post-template -->
		<!-- wp:post-title {"isLink":true} /-->
		<!-- wp:post-date /-->
		<!-- wp:post-excerpt {"moreText":"Continue reading"} /-->
		<!-- /wp:post-template -->
	
		<!-- wp:query-pagination -->
		<div class="wp-block-query-pagination">
			<!-- wp:query-pagination-previous /-->
			<!-- wp:query-pagination-numbers /-->
			<!-- wp:query-pagination-next /-->
		</div>
		<!-- /wp:query-pagination -->
	
	</div>
	<!-- /wp:query -->

</main><!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

wp_template_part

get_template_partの代わりになるのが<!– wp:template-part {} /–>。slugとtagNameなどの属性が指定されています。

  • slug: テンプレートパーツを識別するためのスラッグ
  • theme: パーツがテンプレートの外側に配置されている場合に識別のために使います
  • area: (general), header and footerのいずれかから選択
  • tagName: コンテンツ利用するHTMLタグ。header, main, section, article, aside, footer,divから選択

<!– wp:template-part {“slug”:”header”,”tagName”:”header”} /–><!– wp:template-part {“slug”:”footer”,”tagName”:”footer”} /–> で、headerとfooterテンプレートを呼び出していますので、「parts」フォルダーを作成し、この中にheader.htmlとfooter.htmlを作成します。

なんとなく理解出来てきますね。従来phpで書いていたタグを、ブロックコンテンツマークアップ形式に変換していけば良いわけです。

functions.php

functionsの記述は、以下のようになります。

if ( ! function_exists( 'myfirsttheme_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which runs
 * before the init hook.
 */
function myfirsttheme_setup() {
	// Add support for block styles.
	add_theme_support( 'wp-block-styles' );

	// Enqueue editor styles.
	add_editor_style( 'editor-style.css' );
}
endif; // myfirsttheme_setup
add_action( 'after_setup_theme', 'myfirsttheme_setup' );

次にヘッダーとフッター、所謂テンプレートパーツを作成します。

テンプレートパーツ（ヘッダー）

partsフォルダ内に、「header.html」を作成します。

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"5vh","top":"20px","right":"0px","left":"0px"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-top:20px;padding-right:0px;padding-bottom:5vh;padding-left:0px"><!-- wp:group {"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:site-logo {"width":64} /-->

<!-- wp:site-title {"className":"logo"} /--></div>
<!-- /wp:group -->

<!-- wp:navigation {"ref":88,"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

テンプレートパーツ（フッター）

partsフォルダ内に、「footer.html」を作成します。

<!-- wp:navigation {"ref":88,"layout":{"type":"flex","justifyContent":"center"}} /-->

<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">Copyright AAA All Rights Reserved.</p>
<!-- /wp:paragraph -->