マルチサイトで親子テーマを設計する

マルチサイトではテーマはネットワーク全体で1セットを共有します。そのうえで「共通の見た目」と「サイトごとの違い」をどう作るか——設計の選択肢は2つです。

• 案A：共通の親テーマ＋サイトごとの子テーマ——違いが大きいとき
• 案B：1つのテーマの中でサイトごとに分岐——違いが色や一部の文言だけのとき

サイト数と差分の大きさで選びます。

テーマの配り方（ネットワークでの有効化）

wp-content/themes/
├── mynet-base/        ← 共通の親テーマ
├── mynet-shop/        ← 子テーマ（Template: mynet-base）
└── mynet-school/      ← 子テーマ（Template: mynet-base）

• サイトネットワーク管理→「テーマ」→「ネットワークで有効化」すると、全サイトの選択肢に入る
• 特定のサイトだけに使わせたいときは、「サイト」→対象サイトの編集→「テーマ」タブで個別に有効化

親テーマはネットワークで有効化しなくてよい（子テーマを有効化すれば親は自動で使われます）。子テーマだけを配るほうが、各サイトの管理者が誤って親を選ぶ事故を防げます。

案A：親テーマ＋サイトごとの子テーマ

共通の骨組みを親に、サイト固有の見た目と差分を子に置く構成です。

/*
Theme Name: MyNet Shop
Template: mynet-base
Version: 1.0.0
*/

:root {
  --color-primary: #e8618c;   /* このサイトだけの色 */
}

<?php
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style('parent-style', get_parent_theme_file_uri('style.css'), [], '1.0.0');
});

テンプレートは同名ファイルを置けば子が優先、functions.phpは親子の両方が読みこまれます。この性質はマルチサイトでも同じです。

向いているケース——サイトごとにレイアウトやテンプレート構成が違う、サイト数が5つ以下、担当者が別々にデザイン調整する。

つらくなるケース——サイトが10個を超える（子テーマも10個になり、共通修正のたびに全部を確認することになる）。

案B：1テーマの中でサイトごとに分岐

差分が色・ロゴ・文言程度なら、テーマは1つにして中で分けるほうが保守が楽です。

<?php
/** サイトごとの設定をまとめて持つ */
function mynet_site_config() {
  $path = trim(get_blog_details()->path, '/');   // 例: 'shop'

  $config = [
    'shop'   => ['color' => '#e8618c', 'label' => 'オンラインショップ'],
    'school' => ['color' => '#3d7ea6', 'label' => 'スクール'],
  ];

  return $config[$path] ?? ['color' => '#333333', 'label' => get_bloginfo('name')];
}

/** 色をCSS変数として出力する */
add_action('wp_head', function () {
  $c = mynet_site_config();
  echo '<style>:root{--color-primary:' . esc_attr($c['color']) . ';}</style>';
});

設定を1か所の配列に集めるのがコツです。サイトを追加するときは、この配列に1行足すだけで済みます。

サイトごとのCSSを当てる（bodyにclassを足す）

案A・案Bのどちらでも便利な小技です。

<?php
add_filter('body_class', function ($classes) {
  if (is_multisite()) {
    $path = trim(get_blog_details()->path, '/');
    $classes[] = 'site-' . ($path !== '' ? sanitize_html_class($path) : 'main');
    $classes[] = 'site-id-' . get_current_blog_id();
  }
  return $classes;
});

.site-shop .site-header { background: var(--color-primary); }
.site-school .site-header { background: #3d7ea6; }
.site-main .hero { min-height: 70vh; }

1つのCSSファイルの中でサイトごとの差を書けるので、子テーマを増やさずに調整できます。

共通パーツを「サイトによって差し替える」

テンプレートパーツの名前にサイトのスラッグを混ぜると、あるサイトだけ違うパーツにできます。

<?php
$slug = trim(get_blog_details()->path, '/');
// parts/header-shop.phpがあればそれを、無ければparts/header.phpを使う
get_template_part('parts/header', $slug ?: null);
?>

get_template_part('parts/header', 'shop')はparts/header-shop.phpを探し、無ければparts/header.phpにフォールバックします。この仕組みを使えば、条件分岐を書かずに差し替えられます。

サイト共通の設定値を1か所で持つ

「全サイトのフッターに同じ会社情報を出す」ような値は、ネットワーク全体のオプションに置けます。

<?php
// ネットワーク全体で共通（どのサイトからでも同じ値）
update_site_option('mynet_company_tel', '03-1234-5678');
echo esc_html(get_site_option('mynet_company_tel'));

// サイトごとに別（通常のオプション）
update_option('mynet_catch', 'ようこそ');
echo esc_html(get_option('mynet_catch'));
?>

get_site_option()＝ネットワーク共通、get_option()＝そのサイト専用。この2つの使い分けが、マルチサイトのテーマ作りでは効いてきます。

どちらの案を選ぶ？

まとめ

1. テーマはネットワークで1セット共有。「ネットワークで有効化」またはサイト個別に有効化して配る
2. 差分が大きいなら親テーマ＋子テーマ、色や文言だけなら1テーマ＋設定配列で分岐
3. body_classにサイトのスラッグを足すと、1つのCSSでサイトごとの調整ができる
4. 共通の値はget_site_option()、サイト固有の値はget_option()

「共通をどこまで共通にするか」を先に決めておくと、サイトが増えても崩れない構成になります。