WordPress(5.9〜) theme.jsonの設定方法とブロックテーマ/オリジナルテーマの作り方・後半
  1. 銀ねこアトリエ
  2. ノマドブログ
  3. CMS
  4. WordPress

WordPress(5.9〜) theme.jsonの設定方法とブロックテーマ/オリジナルテーマの作り方・後半

公開日

WordPressブロックエディタ

前回はブロックテーマでtheme.jsonの設定の仕方、テンプレートやブロックパターンの作成方法を紹介しました。

今回は一覧と記事詳細ページのテンプレートを作ります。簡単なブロックテーマが作成できる構成となっています。

この記事を書いた人

かみーゆ/フロントエンドエンジニア

資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。


Read More

この記事は二部構成となっています。

トップページのテンプレートを作る

ファイル構造などは前回のWordPress(5.9〜) theme.jsonの設定方法とブロックテーマ/オリジナルテーマの作り方・前編を参考にしてください。

index.htmlを複製して新たなテンプレート・home-page.htmlを作成します。

index.htmlは 記事一覧を表示させるページ として利用します。

myblocktheme/
  ├ index.php
  ├ templates/
  │  ├ page-home.html(index.htmlを複製)
  │  └ index.html
  ├ parts/
  │  ├ header.html
  │  └ footer.html
  ├ style.css
  └ theme.json

WordPress管理画面からhomeという固定ページを作り、テンプレートpage-homeをセットしておきます。

WordPress側からHOMEという固定ページを作り、テンプレートを追加

WordPress管理画面から記事一覧という固定ページも追加しておきます。スラッグはblogとかで大丈夫です。

設定　>　表示設定からホームページの表示を固定ページで ホームページは home 、投稿ページは記事一覧 にセットしておきます。

WordPress側からHOMEという固定ページを作り、テンプレートを追加

ブロックテーマのテンプレートの仕組み

ブロックテーマではテンプレートファイルがHTMLになるだけで、従来のテンプレート同様ファイル名で判断で用途が判断されます。

ファイル名説明
single.html投稿
page.html固定ページ
xxx.html固定ページ用テンプレート
home.htmlHOME用テンプレート
archive.html一覧用テンプレート
category.htmlカテゴリ一覧
tags.htmlタグ一覧
４０４.html404

もし、htmlテンプレートがなくphpのテンプレートがある場合は、phpのテンプレートが使われます。

記事一覧を作成

index.htmlを編集し記事一覧を作成を作成します。完成イメージはこちら。

コードが長くなってしまったので小分けに説明していきます。

説明をすっ飛ばしたい人は記事一覧テンプレートのすべてのコードへ。

index.htmlを編集し記事一覧を作成

一覧のタイトル追加

まずは、見出しを追加します。

index.html 
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","align":"wide","layout":{"inherit":true}} -->
<main class="wp-block-group alignwide">
  <!-- wp:heading {"level":1,"align":"wide"} -->
  <h1 class="alignwide">記事一覧</h1>
  <!-- /wp:heading -->
  </div>
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

h2以外の見出しにはレベルを追加します。指定しないとブロックが壊れます。

<!-- wp:heading {"level":1,"align":"wide"} -->
  <h1 class="alignwide">記事一覧</h1>
<!-- /wp:heading -->

ループで記事一覧を出力

ループの方法です。

<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"align":"wide"} -->
  <div class="wp-block-query alignwide">
    <!-- wp:post-template -->
    <!-- ここにループさせたい内容を記述 -->
    <!-- /wp:post-template -->
  </div>
</div>
<!-- /wp:query -->
オプション説明
perPage1ページに表示させるページ数
pagesページ送り数
offset表示させたいページ数
postType絞り込みたいページのタイプ
categoryIds表示させたいカテゴリー
tagIds表示させたいタグ
order昇順･降順
orderByソートの基準（日付とか）
author投稿者で絞り込む
exclude除外
sticky調べ中

記事からは以下の値を取得してみます。{"isLink":true} でリンク付きのブロックが呼び出せます。

サムネイル 
<!-- wp:post-featured-image {"isLink":true} /-->

<!-- 出力結果 -->
<figure class="wp-block-post-featured-image"><a href="http://localhost:3011/aaaaaaaa/"><img width="1200" height="900" src="http://localhost:3011/wp-content/uploads/2022/06/entry503-1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="http://localhost:3011/wp-content/uploads/2022/06/entry503-1.jpg 1200w, http://localhost:3011/wp-content/uploads/2022/06/entry503-1-300x225.jpg 300w, http://localhost:3011/wp-content/uploads/2022/06/entry503-1-1024x768.jpg 1024w, http://localhost:3011/wp-content/uploads/2022/06/entry503-1-768x576.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px"></a/></figure>
タイトル 
<!-- wp:post-title {"isLink":true} /-->

<!-- 出力結果 -->
<h1 class="wp-block-post-title"><a href="http://localhost:3011/aaaaaaaa/" target="_self" rel="">aaaaaaaa</a></h1>

{"format":"Y.m.d"}で日付のフォーマットを指定します。

日付 
<!-- wp:post-date {"format":"Y.m.d"} /-->

<!-- 出力結果 -->
<div class="wp-block-post-date"><time datetime="2022-06-19T13:58:06+09:00"><a href="http://localhost:3011/aaaaaaaa/">2022.06.19</a></time></div>
抜粋 
<!-- wp:post-excerpt /-->

<!-- 出力結果 -->
<div class="wp-block-post-excerpt"><p class="wp-block-post-excerpt__excerpt">aaaaa </p></div>

wp:post-template内をまとめて書くとこんな感じになります。

wp:columnsを使って2カラムにしました。

ループ内のコード 
<!-- wp:post-template -->
  <!-- wp:columns -->
  <div class="wp-block-columns">
    <!-- wp:column {"width":"200px"} -->
    <div class="wp-block-column" style="flex-basis:200px">
      <!-- wp:post-featured-image {"isLink":true} /-->
    </div>
    <!-- /wp:column -->
    <!-- wp:column {"width":""} -->
    <div class="wp-block-column">
      <!-- wp:post-title {"isLink":true} /-->
      <!-- wp:post-date  {"format":"Y.m.d","isLink":true} /-->
      <!-- wp:post-excerpt {"isLink":true} /-->

    </div>
    <!-- /wp:column -->

  </div>
  <!-- /wp:columns -->
<!-- /wp:post-template -->

ページネーションを出力

ページネーションを出力します。

ページネーションを出力

「前のページ」「数字」「次のページ」の3つのパーツに分かれています。

ページネーション 
<!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->

記事一覧テンプレートのすべてのコード

index.html 
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","align":"wide","layout":{"inherit":true}} -->
<main class="wp-block-group alignwide">
  <!-- wp:heading {"level":1,"align":"wide"} -->
  <h1 class="alignwide">記事一覧</h1>
  <!-- /wp:heading -->
  <!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"align":"wide"} -->
  <div class="wp-block-query alignwide">
    <!-- wp:post-template -->
    <!-- wp:columns -->
    <div class="wp-block-columns">
      <!-- wp:column {"width":"200px"} -->
      <div class="wp-block-column" style="flex-basis:200px">
        <!-- wp:post-featured-image {"isLink":true} /-->
      </div>
      <!-- /wp:column -->
      <!-- wp:column {"width":""} -->
      <div class="wp-block-column">
        <!-- wp:post-title {"isLink":true} /-->
        <!-- wp:post-date  {"format":"Y.m.d","isLink":true} /-->
        <!-- wp:post-excerpt {"isLink":true} /-->

      </div>
      <!-- /wp:column -->

    </div>
    <!-- /wp:columns -->
    <!-- /wp:post-template -->
    <!-- wp:spacer {"height":50} -->
    <div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->
    <!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"center"}} -->
    <!-- wp:query-pagination-previous /-->

    <!-- wp:query-pagination-numbers /-->
    <!-- wp:query-pagination-next /-->
    <!-- /wp:query-pagination -->
  </div>
  <!-- /wp:query -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

カテゴリーやタグ一覧を出力したい場合

archive.htmlを追加し、タイトルを出力するコードを書き換えるだけです。

archive.html 
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","align":"wide","layout":{"inherit":true}} -->
<main class="wp-block-group alignwide">
  <!-- wp:query-title {"type":"archive","level":1,"align":"wide"} /-->  省略
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

記事詳細のテンプレート

記事詳細のテンプレートの作り方です。

記事詳細のテンプレートの作り方

記事詳細出力用のsingle.htmlを作成します。

myblocktheme/
  ├ index.php
  ├ templates/
  │  ├ page-home.html
  │  ├ single.html(新規追加)
  │  └ index.html
  ├ parts/
  │  ├ header.html
  │  └ footer.html
  ├ style.css
  └ theme.json

コードが短いのでまとめて紹介します。

single.html 
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","align":"wide","layout":{"inherit":true}} -->
<main class="wp-block-group">
  <!-- wp:group {"tagName":"article"} -->
  <article class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image {"align":"wide"}}}} /-->
    <!-- wp:post-date {"format":"Y.m.d","style":{"fontSize":"small"} /-->
    <!-- wp:post-terms {"term":"category","fontSize":"small"} /-->
    <!-- wp:post-terms {"term":"post_tag","fontSize":"small"} /-->
    <!-- wp:post-content /-->
  </article> <!-- /wp:group -->
</main> <!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

各パーツを出力するコードです。

記事タイトル 
<!-- wp:post-title {"level":1} /-->
アイキャッチ 
<!-- wp:post-featured-image {"align":"wide"}}}} /-->
投稿日 
<!-- wp:post-date {"format":"Y.m.d","style":{"fontSize":"small"} /-->
カテゴリーやタグ 
<!-- wp:post-terms {"term":"post_tag","fontSize":"small"} /-->

term の指定を変えるだけです。

  • category … カテゴリー
  • post_tag … タグ
本文 
<!-- wp:post-content /-->

固定ページ

タイトルとコンテンツだけを出力するのであれば以下でOKです。

page.html 
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","align":"wide","layout":{"inherit":true}} -->
<main class="wp-block-group">
  <!-- wp:group {"tagName":"article"} -->
  <article class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-content /-->
  </article> <!-- /wp:group -->
</main> <!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

まとめ・ブロックテーマを使うと自由度が高くなる

2回に分けてブロックテーマの作り方をご紹介しました。

まだまだブロックテーマはリリースされたばかりで情報が不足しています。

随時追記していきますので乞うご期待ください。

この記事が、ブロックテーマで次世代WordPressを試したい方の一助となれば幸いです。

最後までお読みいただきありがとうございました。

Category
CMS

この記事のサマリー

記事を探す

    お仕事のご依頼

    相談する

    初見の方、30分無料相談承っております。