ブロックテーマ作成にチャレンジ その2

次にテンプレートやパーツを作成していくのですが、雑に言いますと、空っぽでも作ってしまっても良いです。中身を空で作った上で、wordpressの管理画面から、ブロックテーマエディターを利用してテンプレートにブロックを配置出来ます。この場合は、ほぼノーコードでテンプレートが作成出来ます。ただ、細かくレイアウトしたい場合や、Advanced Custom Fieldsを使う場合には、基本的な構成を覚えておいたほうが断然良いです。

アーカイブテンプレート

アーカイブテンプレートの場所とファイル名

アーカイブテンプレートは、「templates」フォルダの中に作ります。ファイル名の規則は、以前からあるテーマの命名規則と同様に､「archive.html」になります。カスタム投稿を作った場合は「archive-投稿タイプスラッグ.html」という名称をつければ、優先的に利用されます。「category.html」も勿論使えます。

基本的な記述例

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

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

<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:query-title {"type":"archive","align":"wide","style":{"spacing":{"margin":{"bottom":"6rem"}},"typography":{"fontSize":"35px"}}} /-->

<!-- wp:query {"queryId":2,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"tagName":"main","displayLayout":{"type":"list"},"align":"wide","layout":{"inherit":false,"contentSize":"860px"}} -->
<main class="wp-block-query alignwide"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:post-date {"format":"Y/n/j","style":{"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /-->

<!-- wp:post-title {"isLink":true,"align":"wide","style":{"typography":{"fontStyle":"normal","fontWeight":"600","fontSize":"18px"}}} /-->

<!-- wp:post-featured-image {"isLink":true,"align":"wide","style":{"spacing":{"margin":{"top":"calc(1.75 * var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dblock-gap))"}}}} /-->

<!-- wp:post-excerpt /-->

<!-- wp:spacer {"height":"112px"} -->
<div style="height:112px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- /wp:post-template -->

<!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous {"fontSize":"small"} /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next {"fontSize":"small"} /-->
<!-- /wp:query-pagination --></main>
<!-- /wp:query --></div>
<!-- /wp:group -->

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

アーカイブの基本

テーマの書き出し

作成したテーマは、書き出しをすることが出来ます。管理画面のテーマエディターでの編集・追加結果も反映された状態でダウンロード出来るので、テーマの勉強にもなります。