Zenn
🐶

【WordPress】サブドメイン形式でマルチサイトを作成したメモ

2024/03/31に公開
WordPress
tech

WordPressでサブドメイン形式（copo.com、a.compo.com、b.como.com）のマルチサイトのローカル環境を構築する手順のメモ。

ローカル環境前提

  • MAMPPROにてバーチャルホストとエイリアスを登録している
  • 通常のWordPressを構築して管理画面にログインするところまでは完了しているものとする

wp-config.phpを編集してマルチサイトを許可

wp-configの末尾に下記を追加

wp-config.php
define( 'WP_ALLOW_MULTISITE', true );

WP管理画面にログインして初期設定を行う

下記の手順で初期設定行う

  1. ツール→サイトネットワークの設置
  2. サブドメイン型を選択
  3. サイトネットワーク名を入力（管理画面で表示される）
  4. インストールボタンを押す

サイトネットワークの設定

管理画面にある指示通り、wp-configとルート直下の.htaccessを編集します。

wp-config.php のサイトネットワーク構成ルール

wp-config.phpファイルの /* 編集が必要なのはここまでです。それでは、WordPress をお楽しみください。 */ という行の上に、次の内容を追加してください

wp-config.php
define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', true );
define( 'DOMAIN_CURRENT_SITE', 'copo.com' );
define( 'PATH_CURRENT_SITE', '/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );

.htaccess のサイトネットワーク構成ルール

ルート直下の.htaccessファイルへ追加して、他の WordPress ルールを置き換えてください

.htaccess
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^wp-admin$ wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^(wp-(content|admin|includes).*) $1 [L]
RewriteRule ^(.*\.php)$ $1 [L]
RewriteRule . index.php [L]

これらの手順を完了すると、サイトネットワークの有効化と設定を行います。再度ログインする必要があります。

サイトの追加

  • 参加サイト→サイトネットワーク管理→サイトより新規サイト（サブドメインの子サイト）を登録

Cookieエラーの解消

登録した子サイト（例としてa.copo.com）にログインする場合、cookieのエラーが出る場合がある。
その場合、wp-configの先ほど追加したサイトネットワーク構成ルールの下に下記を追記で解消されました。

wp-config.php
define('ADMIN_COOKIE_PATH', '/'); 
define('COOKIEPATH', ''); 
define('SITECOOKIEPATH', ''); 
define('COOKIE_DOMAIN', false);

各サイトにテーマやプラグインを共有する場合

  • 参加サイト→サイトネットワーク管理→テーマ、プラグインから追加可能
  • 同じようにユーザーの追加も可能

本サイトから同時に投稿を各子サイトに投稿する場合

  • Broadcastというプラグインをインストール・有効化すれば簡単に本サイトから同時投稿が可能でした。
  • 参加サイト→サイトネットワーク管理→プラグイン→新規プラグインを追加から追加
  • 参加サイト→サイトネットワーク管理→プラグイン→サイトネットワークで有効化

カスタム投稿タイプを各サイトで共有する場合

  • Broadcast→Settings→Custom post typesから追加可能
  • The custom post types registered on this blog are:etc...のように、登録されている投稿が表示されている
  • デフォルトでは、デフォルトの投稿と固定ページのみ

サイト間での画像の共有はさらにクセが強かった。。

Gutenbergの場合

  • 親サイトから共通の投稿をする際に、投稿の前にメディアから画像をアップして投稿で選択する場合と、投稿時にエディターから画像をアップする場合では挙動が異なる
    • メディアから画像をアップして投稿で選択する場合：画像は子サイトのディレクトリにコピーされず、子サイトの投稿では親サイト側の画像URLが読み込まれた
    • 投稿時にエディターから画像をアップする場合：画像は子サイトのuploadsディレクトリにコピーされ、子サイトの投稿は、子サイト側の画像URLが読み込まれた

カスタムフィールドの場合（プラグインのACFを使用）の場合

  • 悲報。「画像」のカスタムフィールドをACFで用意し、親サイトから投稿（子サイトに共有）しましたが、子サイト側の投稿で画像が反映されませんでした（投稿の管理画面にも反映されず、フロント側でもNullになる）
  • しかし画像の実態ファイル自体は、各子サイトのuploadsディレクトリにコピーされていた

共通の投稿をする際に、カスタムフィールドに入力する画像はどうすればいいのか

  • 個人的には、面倒ですが親サイトのメディアにアップロードして、そのURLを入力するカスタムフィールドのテキストエリアを作り、それを読み込む形がよいのではと思いました。。
  • その際に、メディアライブラリからコピペしてくると親サイトの絶対パスでURLが入るので、ルートパスになるようにPHPで変換して使用するのがよいかと思いました。
// 該当のドメイン名があれば削除
function custom_url($url) {
    $domain = 'http://copo.com';
    $pos = strpos($url, $domain);
    if ($pos !== false) {
        $url = substr_replace($url, '', $pos, strlen($domain));
    }
    return $url;
}

// ACF関数でテキスト形式のカスタムフィールドを呼び出し
$thumb = esc_html(custom_url(get_field('thumb')));

参考
https://www.onamae.com/column/wordpress/49/
https://kinsta.com/jp/blog/wordpress-multisite/

Discussion