WordPressマルチサイトで、複数の子サイトを１つのテーマで管理する方法

Posted on by Eternal-tears
Sponsored Link

WordPressのマルチサイトで複数の子サイトを運用する時は、
デザインが異なる場合は、
通常子サイトの分だけテーマ数を作成します。

レイアウトが同じで、
デザインだけ異なる場合は、
複数の子サイトを１つのテーマで対応しようという方法です。

Sponsored Link

WordPressのマルチサイトはサブドメイン形式と、
サブディレクトリー形式があります。

サブドメイン形式を中心に説明しますが、
サブディレクトリーに対応するソースはその都度記載します。

目次

はじめに

私がこの方法を思いついたのは、
サイト内容を分野別にWordPressのマルチサイトで構築していました。

子サイトは同じレイアウトにして、
デザイン部分は差し替えという形にして、
WordPressのテーマフォルダ内のテーマ数は、

親テーマ＋子テーマ✕子サイト数

の状態でした。
↓下記の図。

複数の子サイトを１つに。

しかし、

デザイン部分のみの差し替えなのに、
子テーマが沢山あって、
管理が面倒臭くなり、

何とか１つに統一したいと思いました。

要は、親テーマに修正が発生した場合、
子テーマの数だけ修正も必要になるのを、
１つ修正したら、全て反映させたかったからです。

メリット・デメリット

メリットは、

  • 子テーマを含めて一元管理することが出来る。
  • テーマディレクトリー内がスッキリ。
  • １箇所修正したら、全サイトに反映される。

デメリットは、

  • 子サイトの数が多い場合、
    テーマ負荷が発生するかもしれない。

注意事項

この方法は、親テーマを自作する場合は、
親テーマのみでも対応できます。

ただ、公式テーマを使用していて、
更新が入る場合は、子テーマで作成することを推奨します。
アップデートすると、全て消えてしまうので…。

ここでは敢えて、親テーマ＋子テーマという構成で解説していきます。

ディレクトリー構成

ディレクトリー構成を図にしてみました。

ディレクトリー構成図

子テーマの中に、サブドメイン名でフォルダを作成します。
サブドメイン名のフォルダの中には、
style.cssとimagesフォルダを格納します。

サブドメイン名フォルダ内のディレクトリーとファイルの役割

サブドメイン内のフォルダ構成図

このサブドメイン名のフォルダは、
デザインのみ差し替えるために存在しており、
画像や色などスタイルによる調整を行う最低限のものです。

子テーマ直下のディレクトリーとファイルの役割

子テーマディレクトリー内の説明図

子テーマ直下にあるimagesフォルダとstyle.cssは、
子サイトの中で共通して使用する画像やcssスタイルを記述します。

子テーマ直下にあるfunctions.phpには、
子テーマの独自機能や、
サブドメインを取得する関数を追加します。

header.phpはサブドメインフォルダに対応させるため、
親テーマのheader.phpをオーバーライドします。

例えば、サブドメイン内のstyle.cssにリンクするためのソースを記述したり、
ロゴ画像などのテンプレートファイルに、
サブドメイン内にある画像をリンクする時などは、
対応しなければなりません。

その他、親テーマをオーバーライドしたいファイルや、
画像URLがあるファイルは、子テーマ内に格納します。

サブドメイン名を取得して、子テーマのfunctions.phpに記述する場合

サブドメインかサブディレクトリーかによって、
functions.phpに記載するソースが異なります。
サイトの環境に合わせて、下記のソースの書き方を参考に、
functions.phpに記載してください。

マルチサイトの管理サイトが、サブドメインではない場合

マルチサイトの管理サイトがサブドメインではない、
URLが、（http://example.com/wp-admin/network/）の場合です。

管理サイトのサイトidは、デフォルトで1だと思います。
もし異なる場合は、get_blog_details(1)を修正してください。

サイトIDを調べる方法は、
サイトネットワーク管理者ページに行き、
（http://example.com/wp-admin/network/）
サイト＞全てのサイトを表示します。
（http://example.com/wp-admin/network/sites.php）

マルチサイトのネットワーク管理サイト
サイトリストの一番上のサイトが管理サイトになっているはずなので、
管理サイトのドメインをマウスオーバーすると、
【編集 | ダッシュボード | 表示】が表示されるので、
【編集】をマウスオーバーします。

すると、ステータスバーにURLが表示されるので、
id=◯の部分の数値がネットワーク管理サイトのIDとなります。

http://example.com/wp-admin/network/site-info.php?id=1

最終的なソース

function subdomain_name(){
     global $blog_id;
     $top_domain = get_blog_details(1);
     $child_domain_details = get_blog_details($blog_id);
     $child_domain =str_replace(".".$top_domain -> domain, "", $child_domain_details -> domain);
     echo $child_domain;
}

マルチサイトの管理サイトが、サブドメインである場合

マルチサイトの管理サイトがサブドメインである、
URLが、（http://www.example.com/wp-admin/network/）の場合です。

例として、wwwのサブドメインで構築した場合、“www.”にします。
自分のサイトに合わせて修正してください。

$top_domain_only = str_replace("www.","",$top_domain -> domain);

最終的なソース

function subdomain_name(){
     global $blog_id;
     $top_domain = get_blog_details(1);
     $top_domain_only = str_replace("www.","",$top_domain -> domain);
     $child_domain_details = get_blog_details($blog_id);
     $child_domain =str_replace(".".$top_domain_only, "", $child_domain_details -> domain);
     echo $child_domain;
}

参考：マルチサイトで子サイトのサブドメインを抜き出す方法

サブディレクトリー名を取得して、子テーマのfunctions.phpに記述する場合

マルチサイトをサブディレクトリー型で構築している場合は、
サブドメイン部分をサブディレクトリーで取得するように置き換えてください。
下記のどちらを使っても同じ結果が取得できます。

function subdirectory_name(){
     global $blog_id;
     trim( get_blog_status( $blog_id, 'path' ), '/' );
}
function subdirectory_name(){
     global $blog_id;
     $my_name=get_blog_details($blog_id);
     echo $my_name->blogname;
}

参考：マルチサイトのサブディレクトリ名を取得したい

サブドメイン（サブディレクトリー）内のスタイルシートへのリンクを記述する

functions.phpに記載したサブドメイン（サブディレクトリー）を取得する関数を使って、
header.php内のhead間に、
サブドメイン（サブディレクトリー）内にあるスタイルシートへのリンクを記載します。

サブドメインの場合

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/<?php subdomain_name(); ?>/style.css" type="text/css" media="screen">

サブディレクトリーの場合

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/<?php subdirectory_name(); ?>/style.css" type="text/css" media="screen">

サブドメイン（サブディレクトリー）内の画像を使う場合

サブドメイン（サブディレクトリー）内の画像を使う場合も、
スタイルシート同様に、
functions.phpで記載したサブドメイン（サブディレクトリー）を取得する関数を使います。

例えば、ロゴ画像をheader.phpに記載している場合に対応していないと、
子テーマ直下のimagesフォルダを見に行ってしまいます。

テーマファイル内で子サイト独自の画像を使用したい場合は、
親テーマからファイルをコピーして、
子テーマ内に格納し、
画像URLの部分を修正します。

例ではheader.phpを取り上げていますが、
home.phpなども使用する場合が多いので気を付けてください。

例：header.php内のロゴ画像を修正する

サブドメインの場合

<img src="<?php bloginfo('stylesheet_directory'); ?>/<?php subdomain_name(); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" />

サブディレクトリーの場合

<img src="<?php bloginfo('stylesheet_directory'); ?>/<?php subdirectory_name(); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" />

子テーマ直下のスタイルシートの記述

子テーマ情報を記述します。

/*
Theme Name: 子テーマ名
Description: 子テーマの説明文
Author: 子テーマの作成者名
Template: 親テーマ名
*/

親テーマのスタイルシートを継承したいので、
@importを使用します。
また、全ての子サイトで共通するスタイルなども記載します。

@import url("../親テーマ名/style.css");

サブドメインフォルダ直下のスタイルシート

子テーマ直下のスタイルシートを継承します。
サブドメインフォルダ直下のスタイルシートは、
子サイト独自のスタイルを記述します。

@import url("../子テーマ名/style.css");

デザインによっては、
親テーマのstyle.cssや、
子サイトテーマ直下のstyle.cssのスタイルを上書きします。

親テーマと子テーマ、更にサブドメイン内のstyle.cssをスッキリする。

マルチサイトで、
既に同じレイアウトの子サイトが複数ある場合、
ファイル差分機能を使ってスタイルシートを分けていくと便利です。

子テーマ内のstyle.cssは、
子サイトで共通するスタイルを記述します。
場合によっては、親テーマのスタイルを上書きします。

サブドメイン内のstyle.cssは、

私の場合、sublime text2を使っているので、
File Diffsというパッケージをインストールして、

【Preferences -> Keybord Bindings – User】に移動して、

[
     { "keys": ["ctrl+shift+d"], "command": "file_diff_menu" }
]

を記述して保存、sublime text2を再起動します。
差分したいファイルをタブで開いて、
これでctrl+shift+dを押すと、
「Diff file with Open Tab(タブで開いているファイルを差分する)」と表示されるので、
クリックすると、新しくタブが開き、差分が表示されるので、
ダブっている箇所を削っていきます。

逆にマイナス（ー）になっている部分は要注意で、
スタイルをオーバーライドしないと、
親テーマのスタイルが反映されてしまいます。

お試しあれ！

まとめ

この方法で実装しましたが、
問題なく動作しています。

同じレイアウトなのに、
テーマフォルダ内に子サイトのテーマが並んでいたのが、
若干気持ち悪かったので、
この方法でスッキリして、更に無駄がなくなりましたヽ(=´▽`=)ﾉ

Sponsored Link