WordPress ブロックテーマを作ってみよう その３
前回は、トップページのテンプレートを作成してみました。
引き続き、固定ページや投稿などの個別テンプレートを作成していきたいと思います。
01. 固定ページを作成する
前回作成したindex.htmlを複製してpage.htmlを作成します。
クエリーループブロックを削除して、固定ページに必要な要素を追加します。
post-featured-image：アイキャッチ画像post-title：ページタイトルpost-content：ページの本文
<!-- wp:template-part {"slug":"header", "tagName":"header" } /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:post-featured-image /-->
<!-- wp:post-title /-->
<!-- wp:post-content /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer", "tagName":"footer" } /-->固定ページの表示を確認する
アイキャッチ画像・ページタイトル・本文が表示されました。
02. 投稿ページを作成する
先ほど作成したpage.htmlを複製して、single.htmlを作成します。
投稿ページに必要な要素を追加していきます。
post-date：投稿日post-author：投稿者名post-terms：タクソノミー（ここではカテゴリーとタグを指定）post-navigation-link：投稿ナビゲーションリンク
<!-- wp:template-part {"slug":"header", "tagName":"header" } /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:post-featured-image /-->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- wp:post-author {"showAvatar":false} /-->
<!-- wp:post-terms {"term":"category"} /-->
<!-- wp:post-terms {"term":"post_tag"} /-->
<!-- wp:post-content /-->
<!-- wp:post-navigation-link {"type":"previous"} /-->
<!-- wp:post-navigation-link /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer", "tagName":"footer" } /-->サイドバーを作成する
partsフォルダの中に、新しくsidebar.htmlを作成します。
投稿ページによくある、代表的なサイドバーのブロックを集めました。
categories：カテゴリー・ターム一覧latest-posts：投稿の最新記事archives：投稿のアーカイブ
<!-- wp:group {"tagName":"aside"} -->
<aside class="wp-block-group">
<!-- wp:heading -->
<h2 class="wp-block-heading">カテゴリー</h2>
<!-- /wp:heading -->
<!-- wp:categories /-->
</aside>
<!-- /wp:group -->
<!-- wp:group {"tagName":"aside"} -->
<aside class="wp-block-group">
<!-- wp:heading -->
<h2 class="wp-block-heading">タグ</h2>
<!-- /wp:heading -->
<!-- wp:categories {"taxonomy":"post_tag"} /-->
</aside>
<!-- /wp:group -->
<!-- wp:group {"tagName":"aside"} -->
<aside class="wp-block-group">
<!-- wp:heading -->
<h2 class="wp-block-heading">最新の投稿</h2>
<!-- /wp:heading -->
<!-- wp:latest-posts /-->
</aside>
<!-- /wp:group -->
<!-- wp:group {"tagName":"aside"} -->
<aside class="wp-block-group">
<!-- wp:heading -->
<h2 class="wp-block-heading">アーカイブ</h2>
<!-- /wp:heading -->
<!-- wp:archives /-->
</aside>
<!-- /wp:group -->このサイドバーのテンプレートパーツをsingle.htmlで呼び出します。
左右に並べるために、カラムブロックを使用しました。
<!-- wp:template-part {"slug":"header", "tagName":"header" } /-->
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:80%">
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:post-featured-image /-->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- wp:post-author {"showAvatar":false} /-->
<!-- wp:post-terms {"term":"category"} /-->
<!-- wp:post-terms {"term":"post_tag"} /-->
<!-- wp:post-content /-->
<!-- wp:post-navigation-link {"type":"previous"} /-->
<!-- wp:post-navigation-link /-->
</main>
<!-- /wp:group -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:20%">
<!-- wp:template-part {"slug":"sidebar" } /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- wp:template-part {"slug":"footer", "tagName":"footer" } /-->投稿ページの表示を確認する
こちらも装飾がないのでシンプルですが、新しく追加した項目が表示されました。
03. アーカイブページを作成する
続いて、index.htmlを複製して、archive.htmlを作成します。
トップページのループは3記事の投稿に限定していましたが、削除します。
query-title：クエリータイトルterm-description：タームの説明query-pagination：ページ送り（クエリーループブロック内に設置）
また、投稿ページと同様に、サイドバーのテンプレートパーツを表示します。
<!-- wp:template-part {"slug":"header", "tagName":"header" } /-->
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:80%">
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:query-title {"type":"archive"} /-->
<!-- wp:term-description /-->
<!-- wp:query -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:post-featured-image /-->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-date /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->
<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->
</main>
<!-- /wp:group -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:20%">
<!-- wp:template-part {"slug":"sidebar" } /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- wp:template-part {"slug":"footer", "tagName":"footer" } /-->アーカイブページの表示を確認する
アーカイブタイトルやページ送りが表示されることを確認します。
04. エラーページを作成する
エラーページはindex.htmlを複製して、404.htmlを作成します。
以下のように、見出しと段落で簡単に作成しておきます。
<!-- wp:template-part {"slug":"header", "tagName":"header" } /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:heading -->
<h2 class="wp-block-heading">ページが見つかりません</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>お探しのページは見つかりませんでした。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>URLが間違っているか、ページが削除された可能性があります。</p>
<!-- /wp:paragraph -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer", "tagName":"footer" } /-->エラーページの表示を確認する
このような表示になります。
おわりに
それぞれ個別のテンプレートを作成してみました。
今までPHPで作成していたものをブロックに置き換えていくイメージで、それほど戸惑うことなく構築できました。
気になるところとしては、アーカイブブロックは投稿しか用意されていないため、カスタム投稿では別途プラグインやショートコードなどの実装が必要になってきそうです。
次回はtheme.jsonを使って、グローバルスタイルを設定していこうと思います。
この記事を書いた人
