-
Notifications
You must be signed in to change notification settings - Fork 0
（意訳）Child themes
https://fullsiteediting.com/lessons/child-themes/
-
子テーマは従来、テーマに対して細かいカスタマイズを行い、その変更が親テーマの更新によって置き換えられないようにするために使われてきた
-
ブロックテーマは高度なカスタマイズが可能であり、本質的にこれらの問題を解決するし、グローバルスタイルバリエーションを持つテーマは、１つのテーマで多くのデザインを提供することができる
-
サイトエディタを使えば、コードを使わずにテンプレートの構造を変更したり、新しいテンプレートを追加することができる
-
サイトエディターで編集すると、WordPress がデータベースに保存するので、テーマのアップデートで変更内容が削除される心配はない
-
これらの理由により、子テーマを作成する必要性は、以前に比べてかなり低くなっている
-
theme.json、HTML、CSS、PHP、JS のファイルを直接変更する場合、テーマのアップデートをインストールしても、これらのファイルは保護されないので、やはり子テーマを作成する必要がある
-
theme.json には、グローバルスタイルのインターフェイスで削除できない設定やスタイルがあるため、子テーマを作成し、カスタムの theme.json を追加する必要がある
-
どのような種類の子テーマを作ることができるか
-
２つのブロックテーマやハイブッドテーマを混ぜることもできる
-
親ブロックテーマには PHP ベースの子テーマを、PHP ベースのテーマにはブロックの子テーマを作成することもできる
-
これらは以前と同様に親テーマを拡張したり上書きしたりすることができる
-
子テーマは親テーマから、関数、フィルター、テンプレート、テンプレートパーツ、ブロックパターン、theme.json を継承する
-
親テーマのファイルや theme.json を複製することで親テーマをオーバーライドする
-
親テーマに含まれない新しいファイルや theme.json の機能をふくめることで、親テーマを拡張する
- 既存のテーマを更新する前に、theme.json のプリセットをどのように活用できるのかを検討したい場合
- 既存のテーマに影響を与えることなく、テンプレート編集とサイトエディタを使用してユーザーにカスタムテンプレートを提供したい場合
テンプレートファイルを上書きしたり、テーマ間で共有したいときは、以下の２つのルールを覚えておこう
- WordPress は親テーマのファイルを読み込む前に、子テーマのファイルをチェックする
- テーマに
templates/index.htmlファイルがある場合、WordPress はルートディレクトリから PHP テンプレートファイルを読み込む前に templates フォルダ内の HTML テンプレートをチェックする
ハイブリッドテーマとブロックテーマのテンプレート階層におけるファイルの読み込み順は、以下の通り
- 子テーマの html ファイル
- 子テーマの php ファイル
- 親テーマの html ファイル
- 親テーマの php ファイル
もし、親テーマが以下のようなハイブリッドテーマだった場合、
index.php
single.php
page.php
header.php
/templates/
404.html
/parts/
header.html
そして、子テーマには以下のようなファイルが含まれているとします。
/templates/
index.html
single.html
/parts/
header.html
その場合、WordPress は以下のファイルを採用することになります。
page.php
header.php
/templates/
index.html
single.html
404.html
/parts/
header.html (子テーマから)
そして、サイトエディタで新しい固定ページ用のテンプレートを作成すると、page.html が上書きされます。
親テーマが更新されると、保存していないテンプレートやパーツだけが更新されます。
テンプレートやテンプレートパーツを子テーマにコピーしてか r 亜変更すれば、更新を失われることはありません。WordPress は子テーマのファイルを使用します。
テンプレートをコピーせず、サイトエディタでテンプレートへの変更を保存した場合、その変更が失われることはありません。
サイトエディターで変更を保存していても、親テーマから更新されたテンプレートを使いたい場合は、まずカスタマイズをリセットする必要があります。
親テーマがたらしいテンプレートを追加した場合、同じ名前のテンプレートをまだ持っていなければ利用することができます。
テンプレートを子テーマにコピーしていない場合、またはサイトエディタで保存していない場合、テンプレートは利用できなくなります、
そのテンプレートを既に利用している既存のコンテンツは、最も近いテンプレートにフォールバックし、代わりのそのテンプレートを使うことになります。
いいえ。テンプレートを置き換えることはできますが、親テーマのテンプレートを削除する方法は知られていません。
テンプレートとテンプレートパーツを theme.json にリストアップすることはできますが、子テーマの theme.json からそれらを削除しても無効になるわけではありません。
親テーマと子テーマの両方が theme.json を含む場合、
- 子テーマは親テーマの theme.json から全ての機能を継承する
- 子テーマの theme.json はスタイルと設定を複製して親テーマを上書きする
子テーマの theme.json とスタイルは、親テーマの同等のものを置き換えます。子テーマの theme.json にカラーパレットが含まれる場合、これは親のカラーパレットを完全に置き換えます。そのため、１色だけ置き換えたい場合でも、 theme.json からパレット全体をコピーする必要があります。
それば場合によります。スタイルを保護する方法は２つあって
- サイトエディターでグローバルスタイルを編集して保存する方法
- 子テーマに theme.json を含める方法
親テーマの theme.json ファイルが更新されても、あなたのウェブサイトに適応されるエッジケースがあります。
それは、あなたが theme.json で上書きしていない新しいスタイルや設定が親に追加された場合です。
例えば、親も子もカスタムグラデーションを含んでいなかったのに、親がアップデートでカスタムグラデーションを追加した場合、子テーマはそのゴラデーションを継承することになります。
同様に、子テーマは親テーマのスタイルバリエーションを継承します。
子テーマが親テーマのスタイルバリエーションを削除する方法はなく、上書きするのみです。
例えば、TT3 の子テーマで「Pitch」というスタイルバリエーションを上書きするには、独自の styles/pitch.json ファイルを用意します。
冒頭で述べたように、子テーマは親テーマに登録されているブロックパターンを継承します。子テーマは unregister_block_pattern() 関数でブロックパターンを登録解除することができます。
子テーマは親テーマのカスタムブロックスタイルを継承します（カスタムブロックスタイルとは、ユーザーインターフェイスで選択可能なスタイルのこと）。子テーマのカスタムブロックスタイルは、unregister_block_style() 関数で登録を解除することができます。
このセクションでは、いくつかのコード例を追加し、典型的な使用例について説明します。全ての例では、親テーマとして、TT3 を使用しています。
子テーマには、テーマフォルダとファイルヘッダに Template パラメータを指定した style.css ファイルが必要でる。もちろん、カスタマイズの追加も必要です。
- 子テーマ名が FSE Child の場合、
wp-content/themes/内にfse-childというフォルダを新規に作成します。 - 子テーマフォルダ内に、最小限のファイルヘッダを持つ
style.cssファイルを新規に作成します。Templateパラメータの値には、親テーマのスラッグを指定します。
/*
Theme Name: FSE child
Template: twentytwentythree
*/
これは、テーマを有効化するために必要な絶対条件です。 Template を除き、子テーマは親テーマと同じ style.css ファイルのヘッダを使用します。
全ての親テーマが、子テーマの style.css ファイルを自動的に読み込むように作られているわけではありません。例えば、TT3 は CSS ファイルを一切キューに入れません。
子テーマの style.css ファイルを使ってカスタム CSS を追加したい場合、そのファイルが既に読み込まれているかどうかを確認する必要があります。
もし読み込まれていなければ、子テーマのルートフォルダに functions.php ファイルを追加する必要があります。
次のステップは、スタイルシートをエンキューする新しい関数を functons.php に作成することです。
function fse_child_styles() {
wp_enqueue_style( 'fse-child-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'fse_child_styles' );
Theme Developer Handbook では、親テーマと子テーマの両方おスタイルシートを読み込む方法について解説しています。
TT3 についてよくある質問の１つに、サイト全体の上下パティングを削除する方法があります。
サイトエディターのん「レイアウト」セクションでもできますが、今回は子テーマで行う方法を紹介します。
- まず、子テーマのルートフォルダに
theme.jsonファイルを作成します。 - 次に、以下のコードを
theme.jsonに追加します。
{
"version": 2,
"styles": {
"spacing": {
"padding": {
"top": "0",
"bottom": "0"
}
}
}
}
バージョン番号は、 WordPress のパーサーに、この theme.json 形式が padding をサポートしていること知らせます。バージョン番号がないと変更が効きません
上下のパディングを変更するだけで、子テーマは他のすべての設定とスタイルを親テーマの theme.json から継承します。（親テーマの左右パディングも含む）
カラーパレットを変更するには以下のように theme.json を書き換えてください。
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#6d93f4",
"name": "Primary",
"slug": "primary"
},
{
"color": "#345099",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#F6F6F6",
"name": "Tertiary",
"slug": "tertiary"
}
]
}
}
}
このパレットは、TT3 の２つの緑色（主色と副色）を青色に変更するだけです。他の全ての色と機能は変更されません。
WordPress は、パレットカラーを使用している全てのブロックを更新し、新しい青色を表示します。
**パレットから色を削除すると、WordPress はその色を使用しているブロックをデフォルトの色にリセットします。
TT3 は、段落ブロックの機能を無効化します。ドロップキャップです。ユーザーインターフェイスに再有効化できる設定はありませんが、子テーマで解決することができます。
先ほど作成した theme.json サンプルファイルの内容を、以下のコードに置き換えてください。
{
"version": 2,
"settings": {
"typography": {
"dropCap": true
}
}
}
ブロックエディターでドロップキャップ機能が利用できるようになりました。