Zenn
Closed9

WordPressのブロックテーマとやらに入門してみる

WordPress
masa5714masa5714

ブロックテーマという概念が追加されたらしい

WordPressのテーマ開発の方法が大きく変更された模様。
デフォルトテーマの twentytwentythree は 「ブロックテーマ」と呼ばれる手法で制作されている。

ブロックテーマとは、ブロックの集合体でサイト／ページを構成するもの。
従来のWordPressでは記事コンテンツの中でブロックを利用していたが、これがサイト／ページ全体でも使えるようになった。

Shopifyのテーマのようなイメージ。
というかほぼ同じ考え方だと思う。

参考（公式）

https://ja.wordpress.org/support/article/block-themes/

独断と偏見ですが...

まだ2022年頃に追加された機能であり、
Webサイト制作に新規参入したばかりの人も逆転のチャンスがある分野だと思います。
（古い人たちはクラシックエディタと呼ばれるかなり古いエディタを利用する傾向にあります。WordPress界隈はモダンな技術の学習をしない人たちが多い印象なので、古い人たちを出し抜くチャンスがここにあると思います。）

情報を追っていくときの心得

ブロックテーマ周りの情報は日本語ではかなり少ないです。
公式ドキュメントも日本語翻訳が全く追いついておらず、古い情報を掴まされる可能性があります。
可能な限り英語のドキュメントを見るようにしましょう。

大丈夫、DeepL使えばかなり読めるから。

2022年5月2日以前の情報に注意しよう

細かな部分ではどれぐらい影響があるか分かりませんが、
こちらの古い日本語ドキュメントで index.php が必須であると記述があります。しかし、現在（2023年9月27日時点）では不要です。

現在では不要な情報が溢れているので十分に注意しましょう。

日本語で分かりやすい情報発信されている方が居るのでご紹介

https://kiwi-dev.com/2022/11/27/wordpress-block-editor-basic/

めちゃくちゃ分かりやすい表現で書いてくださっていて感謝！

情報収集が辛すぎる！

なぜかブロックマークアップのドキュメントが無かったり、 layout types の属性値が箇条書きになって隠れていたり...。Next.jsのドキュメントがいかに優れているかを痛感しています＞＜

masa5714masa5714

テーマをWordPressに認識させて、とりあえず有効化させてみよう。

まずは Hello World! として、テーマをWordPressに認識させて表示させることを目標にしてみます。

1. wp-content/themes/ にテーマフォルダを作成する

ここは従来のWordPressと同じで、
wp-content/themes/ 配下に好きな名前でテーマフォルダを作成します。

ここでは、例として watashi-no-sample という名前にしておきました。
※この先でも watashi-no-sample という文言が出てきますが、そこはテーマフォルダ名として読み替えてください。

2. テーマフォルダの中に必要なファイルを構成する

まだこれだけでは認識されません。
作成した watashi-no-sample の中に必須ファイルを新規作成していきます。

下記のようにファイル／フォルダを作成してください。
これが最小構成です。

📄: ファイルを表します。
📁: フォルダを表します。

ディレクトリ構造
📁watashi-no-sample/
├─ 📁styles/
├─ 📁templates/
│  ├─ 📄index.html
├─ 📄theme.json
├─ 📄style.css

それぞれ、記述が必要な箇所を説明します。

theme.json

theme.json
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2
}

※ $schema は、VSCodeで補完を効かせるための記述です。覚えるのは無理なので書かない理由はありませんね。

templates/index.html

template/index.html
<p>はろー</p>

表示用に記述を書いておきましょう。

※ここは index.html ではなく、index.php でもOKです。

3. テーマを有効化しよう

WordPress管理画面から
「外観」→「テーマ」より watashi-no-sample を探して、「有効化」ボタンを押してみましょう。

そして自身のWordPressサイトを開いてみてください。

ブラウザさんから挨拶して頂くことができれば完了です！

masa5714masa5714

theme.json の記述を見つけるには？

theme.json で設定できる項目は下記リンクをご覧ください。

どれも似たようなドキュメントですね...。
困ったらこれらの中でいい感じの情報を見つけるといいと思います。

https://developer.wordpress.org/themes/advanced-topics/theme-json/

https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/

https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/

おさえておきたいポイント

theme.json の存在意義だけは最低限おさえておいた方が良いかもしれません。

  • カスタマイズオプションの定義。
    ユーザーにGUIで各ブロックの設定の選択肢を提供できる。
  • ユーザーが利用できるデフォルトの色、フォントサイズを指定。
  • デフォルトのスタイルを定義。

画面でポチポチと設定するための項目を定義できるものだと捉えておけばいいと思います。
Shopifyと同じイメージですね！

masa5714masa5714

サイトエディターの使い方

ブロックテーマはサイトエディターを使っていくことになるので、最低限の操作だけは覚えておきましょう。また、サイトエディターで編集した内容はテーマを変更しても維持されることは、しっかり覚えておきましょう。（つまり、従来のように配布テーマを使う際に、子テーマ化する必要が無くなります！）

サイトエディターで編集した内容を解除する

例えば、ヘッダーを呼び出しているのに、サイトエディター上でヘッダーを消してしまったとき。
基本的には Ctrl + Z を使えばいいですが、保存をしてしまったときには、サイトエディター上で操作しなければ復帰できません。

サイトエディターの右側にあるテンプレートタブの「・・・」をクリックし、「カスタマイズをクリア」で元に戻せます。

戻せるんですが、1つだけ戻すということができないのは不便ですね...。
デフォ定義されたブロック一覧が表示されていたりすると便利そうなんですが。
ここ改善求む...ですね！

masa5714masa5714

ブロックマークアップ

ブロックテーマには、ブロックマークアップ（block markup）と呼ばれる記述法があります。
例を出すと下記のようなものです。

<!-- wp:site-title /-->

▲ WordPressサイトのタイトルが出力される。

<!-- wp:navigation /-->

▲ ナビゲーションが出力される

こんな感じのHTMLのコメントアウトで宣言的に記述していくものです。

ブロックリファレンス

https://developer.wordpress.org/block-editor/reference-guides/core-blocks/

恐らくブロックマークアップは手動で行うものではなく、WordPress管理画面のエディタ上で作って、コードエディタで出力されたものを貼り付けて使うものだと思う

じゃないとあまりにも作るのが厳しすぎる。
パターンはあくまでテーマとして何度でも呼び出したいものを作る。

パーツとパターンの使い分けが難しいところ。

masa5714masa5714

"useRootPaddingAwareAlignments": true とは？

WordPressのコントリビューターであり、人気の有料テーマ「SWELL」開発者のAki Hamanoさんの記事がとても分かりやすいです。下記リンクよりご覧ください。

https://qiita.com/AkiHamano/items/4c1576131a71fc41ef41#settingsuserootpaddingawarealignments

端的に表すと、

  • 画面いっぱい表示エリアに対して、左右の余白を確保するための機能。
  • ネガティブマージンでよく対応する例のアレ。
masa5714masa5714

編集エディタの幅がリセットされてしまう問題

こんな感じで左右に余白がなく、ちょっと見づらい。
デフォルトテーマ（twentytwentythree等）のように画面中央に来るようにするには、 theme.json を編集する必要がある。

{
  "settings": {
    "layout": {
      "contentSize": "650px",
      "wideSize": "1200px"
    }
  }
}

これを追加すれば解決します。

JSONで書けるの便利だけど、管理が面倒くさそうだなぁという気持ちが強い...。

masa5714masa5714

CSS を追加する

ブロックテーマでは、 wp_head() などを自動的に出力してくれる。
そのため、CSSを呼び出すような機構が無く、全て functions.php から指示を投げる必要がある。

functions.php
function sample_styles () {
  wp_enqueue_style('app', get_template_directory_uri(). '/assets/css/app.css', false);
}

add_action('wp_enqueue_scripts', 'sample_styles');

これで、 wp-content/themes/【テーマ名】/assets/css/app.css が呼び出しされる。

JavaScript を追加する

これもほぼ同じ書き方で実現できる。

functions.php
function sample_scripts () {
  wp_enqueue_script('app', get_template_directory_uri(). '/assets/js/app.js', false);
}

add_action('wp_enqueue_scripts', 'sample_scripts');

これで、 wp-content/themes/【テーマ名】/assets/js/app.js が呼び出しされる。

なお、 wp_enqueue_scripts を使うと style.css の自動出力は無くなる模様。

このスクラップは2ヶ月前にクローズされました