おはようございます！
6月26日、水曜日。薄曇りしかない晴れ。
最高気温31℃。
今日も朝からエアコンのお世話になっております。
さあさあ、今日もやってまいりますよ。
本日の教材も昨日に引き続きこちら、
よしやっていこう！
CHAPTER６ WordPressのブロックエディター
SECTION０４ theme.jsonでブロックエディターの設定を定義する
theme.jsonとは
ブロックエディターは、多くの機能を持っている。その機能をコントロールできるJSONファイルのことをtheme.jsonという。
・theme.jsonを準備する
学習用素材のtheme.jsonをアップロード
＜theme.jsonの中身＞
各項目には次のような内容を記述できる。
| 項目名 | 内容 |
| $schema | JSONで設定する項目に関する情報を参照するURLを指定する。 |
| version | バージョンを指定する。WordPress6.2では「２」を指定する。（必須項目） |
| settings | テーマに関する設定を記述する。 |
| styles | ルート要素や各ブロックに関する設定を記述する。 |
| patterns | パターンディレクトリで公開されているパターンを登録するために使用する |
| templateParts | テンプレートパーツに関する情報を記述する。 |
| customTemplates | テンプレートに関する情報を記述する。 |
theme.jsonを利用する
・コンテンツ幅を設定する
投稿画面の本文欄が端まで広がっている、、、とのことだが、「投稿画面」というか「ブロックエディターの画面」ってことですね↓
これは、theme.jsonをテーマにアップロードした時点でedhitorｰstyles機能が自動的に有効になるため。
次の機能が自動的に有効になる。
| add_theme_support( ‘post-thumbnails’ ); |
| add_theme_support( ‘responsive-embeds’ ); |
| add_theme_support( ‘editor-styles’ ); |
| add_theme_support( ‘html5’, [‘style’,’script’] ); |
| add_theme_support( ‘automatic-feel-links’ ); |
・theme.jsonで幅を指定する
| 幅タイプ | キー | 本書での指定サイズ |
|---|---|---|
| 通常幅 | contentSize | 800px |
| 幅広 | wideSize | 1200px |
＜theme.jsonに追記＞
ブロックエディターの画面を確認すると、
「800px」と「1200px」を設定したのになぜ「800px」になるかというと、おそらく「800px」がデフォルトなんでしょうな。
theme.jsonファイルのcontentSizeの行とwideSizeの行を逆にしても結果は同じでした。（もちろん「,（カンマ）」は気を付けた）
画像ブロックを選択すると幅の指定が増えている。
・コンテンツ幅に対応するCSSの書き方
＜single.phpを修正＞
テーマがtheme.jsonを持っているかどうかは、WordPress6.2以降なら「wp_theme_has_theme_json()」で調べられる。
＜single.php＞
＜コンテンツ部分のSCSSの例＞
ブロックエディターのテキストを設定する
・色を指定する
＜theme.jsonに追記＞
＜変更前＞
＜変更後＞
・フォントを選択できるようにする
＜theme.jsonに追記＞
プルダウンで「フォント」が選択可能となり、「游明朝体」が選択できるようになった。
・Webフォントを選択できるようにする
＜theme.jsonに追記＞
※サーバにアップロードしたフォントファイルを直接指定する場合
実装すると
ブロックパターンを追加する
WordPress公式サイトの「パターン」のページには、たくさんのブロックパターンが公開されている。
これらの公開されているパターンをテーマに追加することが可能。
＜ブロックパターンディレクトリ＞
ブロックパターンディレクトリ – WordPress.org 日本語
ここでは「価格表」のパターンを追加する。
Three column pricing table – ブロックパターン – WordPress.org 日本語
【URLアドレス】https://ja.wordpress.org/patterns/pattern/pricing-table-ja/
このURLアドレスの「pricing-table-ja」がキーになる。
実装する前に、functions.phpファイルにて↓の表示制限しているところを削除する必要あり。。
実装！
パターンが選択できるようになった。
＜複数のパターンを登録する場合＞
公式サイトを確認する
ここまで学習した機能は、theme.jsonのごく一部。ブロックエディターについて「この箇所を設定したい」といった要望が出たときは、下記サイトを参考のこと。
＜グローバル設定とスタイル（theme.json）＞
theme.json – Japanese Team – WordPress.org 日本語
さてと。。。
今日はちょっと早いけど、終わろうかな。暑いし。。。
そうしよそうしよ
ではでは、おつかれさまでした～。
コメント