マルチサイト化したWordPressでは、場合によっては1つのテーマを共有する。各子サイトで子テーマを持てず、CSSカスタマイズにおいて足かせになる。そこで、子テーマ作成時に、各サイトごとに異なる子テーマを作成し、スタイルシートの共有を防ぐことにする。
対策前は子テーマを共有している。
- 親テーマ
- 子テーマ //すべての子サイトが共有
対策後は各子サイトが独自子テーマをもち、独立したカスタマイズを行える。
- 親テーマ
- テストサイトA用 子テーマA
- テストサイトB用 子テーマB
- テストサイトC用 子テーマC
コンテンツ
手順
親テーマはTwenty Twenty-Oneを使用する。
メモ
- WordPress5.9デフォルトテーマのTwenty Twenty-Twoはブロックテーマのため子テーマの作成方法が異なる。
子テーマを作成する
まず子テーマフォルダを3個作成する。
- sitea-child
- siteb-child
- sitec-child
style.cssとfunctions.phpのセットを3セット作成し、それぞれの子テーマフォルダに格納する。
style.cssのTheme Nameは、子サイト名を記述する。
/*
Theme Name: sitea child
Template: twentytwentyone
*/
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
- sitea-child
- style.css
- functions.php
- siteb-child
- style.css
- functions.php
- sitec-child
- style.css
- functions.php
子テーマフォルダをテーマフォルダにアップロードする
作成した3つの子テーマフォルダを、サーバーの親テーマと同階層にアップロードする。
- public_html
- wp-admin
- wp-content
- themes
- twentytwentyone
- sitea-child //こちらにアップロードする
- siteb-child //こちらにアップロードする
- sitec-child //こちらにアップロードする
- themes
- wp-include
- .htaccess
- index.php
- etc…
サイトネットワーク管理者の権限でダッシュボードにログインし、テーマ＞インストールされているテーマを確認する。
各サイトで子テーマを使用できるように設定する
サイトネットワーク管理のダッシュボード＞サイト＞すべてのサイトに移動し、siteaにマウスオーバーして編集をクリックする。
サイトを編集：サイトAの画面で、テーマタブへ移動し、sitea-childを有効化する。
子サイトで子テーマを有効化する
続けて、子サイトAのダッシュボードに移動し、外観＞テーマの画面でsitea-childを有効化する。
子テーマが適用される
サイトAのブラウザ表示確認を行うと、Twenty Twenty-Oneが適用されている。またソースコードを表示すると、parent-style-css（親テーマCSS）としてTwenty Twenty-One、child-style-css（子テーマCSS）としてsitea-childを読み込んでいることが確認できる。
<link rel='stylesheet' id='parent-style-css' href='http://XXXXXX/sitea/wp-content/themes/twentytwentyone/style.css?ver=5.9.3' media='all' />
<link rel='stylesheet' id='child-style-css' href='http://XXXXXX/sitea/wp-content/themes/sitea-child/style.css?ver=5.9.3' media='all' />
サイトB、サイトCも同様に子テーマを有効化する。
子テーマにスタイルを記入してみよう
sitea-childのstyle.cssにトップページのh1見出しのフォントカラーを赤色にするスタイルを記述する。
/*
Theme Name: sitea child
Template: twentytwentyone
*/
body.home h1 {
color: red;
}
サーバーへアップロードして上書きし、ブラウザ表示を確認すると、サイトAの文字色だけ赤色に変更されていることがわかる。
サイトA
変更前
サイトA
変更後
サイトB
変更前
サイトC
変更前
このように、別名の子テーマを作成すれば、同一の親テーマを有効化していても、スタイル記述を共有せず、各子サイトのみに適用することができる。
マルチサイト化したWordPressの子テーマ有効化の挙動
前述したように、子テーマを適用するためには、
- サイトネットワーク管理者の権限で、子テーマの使用を許可し、子サイトのテーマ一覧に表示させる
- 子サイトにおいて、子テーマを有効化する
という2段階プロセスを踏む必要があった。
ただし、親テーマは子サイトのダッシュボードに表示される必要はなく、サイトネットワーク管理のインストールされているテーマの一覧に登録されていれば良い。この時、サイトネットワークで有効化も不要だった。
子サイトのテーマ一覧には、子テーマ1点しか表示されなくても、親テーマも読み込まれている。
子テーマをサイトネットワークで有効化する場合
子テーマをサイトネットワークで有効化した場合の挙動について。
テーマ一覧で、サイトネットワークで有効化をクリックする。これにより、子サイトで子テーマを適用することが可能になる。
サイトネットワークで有効化した場合、すべての子サイトのテーマ一覧に表示され、適用可能になる。
サイトネットワーク管理権限でテーマを管理する
子サイトが個別にテーマを使用できるようにしたい場合
サイトネットワーク管理のダッシュボード＞サイト＞すべてのサイトの一覧から変更する子サイトの編集をクリックし、サイトを編集：（子サイト名）の画面のテーマタブへ移動し、個別に有効化する。
ネットワーク管理のインストールテーマ一覧と、子サイトAのテーマ一覧に表示されるテーマの対応表
| インストールテーマ | SN | サイトを編集：サイトA | 子サイトAテーマ |
|---|---|---|---|
| 管理者画面 | 管理者画面 | 管理者画面 | 子サイト画面 |
| sitea child | 有効なテーマ | 有効 | |
| siteb child | 現在のテーマ | （表示されない） | |
| sitec child | 現在のテーマ | （表示されない） | |
| Twenty Twenty | 有効 | （表示されない） | 選択可能 |
| Twenty Twenty-One | 有効 | （表示されない） | 選択可能 |
| Twenty Twenty-Two | 選択可能 | （表示されない） |
- サイトネットワーク管理で有効化されたテーマは、
サイトを編集には表示されないが、すべてのサイトで選択して適用が可能 サイトを編集：サイトAの現在のテーマとは、サイトAとは別の子サイトで有効化しているテーマを指す- 子サイトでテーマを選択できるようにするためには、
サイトネットワークで有効化もしくは個別にサイトを編集で許可のどちらか片方が必要 サイトネットワークで有効化されたテーマであっても、子サイト側には強制的に適応されない。プラグインの挙動とは異なる点- テーマの決定権は子サイトにある
- サイトネットワーク管理は、使用できるテーマを制限できる
- サイトネットワーク管理にインストールされていても、
サイトネットワークで有効化もしくはサイトを編集のどちらかで有効化されないテーマは、いずれの子サイトにおいても使用されない
マルチサイトにおけるテーマの挙動は複雑
マルチサイトにおける子テーマの作成のメリット、テーマ有効化の挙動について確認した。シングルサイトと異なり複雑な挙動があることが判明した。