CONTACT PRIVACY POLICY
HOME / BLOG
BLOG

XserverでWordPressオリジナルテーマを公開する方法【ローカル開発・SSH対応】

BLOG
デフォルト画像

ローカルで作ったWordPressオリジナルテーマをXserverへ公開するときは、ファイルをアップロードするだけでなく、接続先、配置場所、PHPバージョン、バックアップ、公開後の確認までを一つの手順にしておくと事故を減らせます。

この記事では、NINESで実際に使っている「Macで開発し、SSHでXserverへ接続し、必要なファイルだけを本番へ反映する」構成をもとに説明します。初回公開にも、公開後の継続更新にも使える流れです。

この記事のコマンドにあるサーバーID、ドメイン、テーマ名、鍵のパスは例です。自分の環境へ置き換え、初回は必ずバックアップを取ってから実行してください。

今回の構成

項目構成
ローカル環境macOS＋任意のWordPressローカル環境
本番サーバーXserver レンタルサーバー
接続方法SSH公開鍵認証・ポート10022
転送方法scpで変更ファイルを転送
本番操作WP-CLIをPHP 8.3で実行
テーマ配置先/home/サーバーID/ドメイン/public_html/wp-content/themes/テーマ名/

公開前に準備するもの

  • Xserverで稼働しているWordPressサイト
  • ローカルで表示確認できているオリジナルテーマ
  • サーバーパネルへログインできるアカウント
  • SSH公開鍵と秘密鍵
  • ターミナルの基本操作

テーマの作り方から整理したい場合は、先にWordPressオリジナルテーマ開発ロードマップを確認してください。iPhoneのPrompt 3から接続する場合は、Prompt 3からXserverへSSH接続する方法も利用できます。

1. ローカルのテーマ構成を整理する

最初はテーマ直下にすべてを置かず、役割ごとに分けます。以下は小〜中規模のオリジナルテーマで扱いやすい構成例です。

my-original-theme/
├── style.css
├── functions.php
├── index.php
├── header.php
├── footer.php
├── single.php
├── archive.php
├── assets/
│   ├── css/
│   ├── js/
│   └── images/
├── lib/
└── template-parts/

style.cssのテーマ情報、テンプレートの構文エラー、CSS・JavaScriptの読み込みパスをローカルで確認してから本番へ進みます。ビルド処理がある場合は、生成済みファイルも公開対象に含めます。

2. XserverでSSHを有効にする

XserverのサーバーパネルでSSH設定を有効にし、公開鍵を登録します。XserverのSSHは公開鍵認証を使用し、接続ポートは10022です。秘密鍵はリポジトリやWordPressの公開ディレクトリへ置かず、Macの~/.ssh/などで管理します。

chmod 600 ~/.ssh/xserver.key

ssh -p 10022 \
  -i ~/.ssh/xserver.key \
  server-id@server-id.xsrv.jp

初回接続時に表示されるホスト鍵のフィンガープリントは、サーバーパネルのSSH設定画面に表示される値と照合します。警告を読み飛ばして接続しないことが大切です。

3. 本番のテーマ配置先を確認する

cd /home/server-id/example.com/public_html
pwd
ls -la wp-content/themes

ドメインやサブドメインによって公開ディレクトリが異なる場合があります。推測で転送せず、pwdとlsで現在地と既存テーマを確認します。

4. 初回公開前にバックアップする

cd /home/server-id/example.com/public_html/wp-content/themes
cp -a my-original-theme my-original-theme-backup-$(date +%Y%m%d-%H%M%S)

既存テーマを更新する場合は、ファイルとデータベースの両方を戻せる状態にします。テーマファイルだけの変更でも、管理画面設定やプラグインとの組み合わせで表示が変わることがあります。

5. scpでテーマファイルを転送する

初回はテーマディレクトリ全体を転送できますが、2回目以降は変更したファイルだけを指定すると影響範囲を小さくできます。

scp -P 10022 \
  -i ~/.ssh/xserver.key \
  -r ./my-original-theme \
  server-id@server-id.xsrv.jp:/home/server-id/example.com/public_html/wp-content/themes/
scp -P 10022 \
  -i ~/.ssh/xserver.key \
  functions.php assets/css/single.css \
  server-id@server-id.xsrv.jp:/home/server-id/example.com/public_html/wp-content/themes/my-original-theme/

scp -rはローカルにない本番ファイルを自動削除しませんが、同名ファイルは上書きします。接続先と転送先を一文字ずつ確認してから実行してください。

6. WP-CLIをPHP 8.3で実行する

XserverではWebサイト側とCLI側で参照するPHPバージョンが異なることがあります。wpだけで古いPHPが起動する場合は、PHP 8.3の実行ファイルからWP-CLIを呼び出します。

cd /home/server-id/example.com/public_html
/usr/bin/php8.3 /usr/bin/wp --info
/usr/bin/php8.3 /usr/bin/wp core version
/usr/bin/php8.3 /usr/bin/wp theme status my-original-theme

NINESの環境では、通常のwpがPHP 8.0を参照してプラグインの要件エラーになりましたが、/usr/bin/php8.3 /usr/bin/wpで正常にWordPressを読み込めました。

7. テーマを有効化してキャッシュを削除する

/usr/bin/php8.3 /usr/bin/wp theme activate my-original-theme
/usr/bin/php8.3 /usr/bin/wp cache flush

既存テーマの更新だけなら、毎回theme activateを実行する必要はありません。キャッシュプラグインやCDNを使っている場合は、それぞれのキャッシュも確認します。

8. 公開後に確認する項目

  • トップページ、記事、固定ページ、404ページが表示できる
  • CSS、JavaScript、画像が404になっていない
  • スマートフォン幅で横スクロールや重なりがない
  • 管理画面へログインできる
  • 問い合わせフォームや検索などの動的機能が動く
  • ブラウザのコンソールとPHPエラーログに新しいエラーがない
curl -I -L https://example.com/
curl -I -L https://example.com/wp-content/themes/my-original-theme/style.css

よくあるエラー

症状確認すること
Permission denied秘密鍵のパス、権限、登録した公開鍵、接続ユーザー
Connection refusedポート10022、SSH設定の有効化、アクセス制限
テーマが表示されないstyle.cssのテーマ情報と配置ディレクトリ
重大なエラーPHPバージョン、構文エラー、プラグイン要件
変更が反映されないWordPress、プラグイン、サーバー、ブラウザのキャッシュ

Xserverが向いている人

  • WordPressを長期運用しながらテーマも自分で管理したい
  • 管理画面だけでなくSSHやWP-CLIも使いたい
  • 国内向けサイトで日本語サポートを重視したい
  • ブログ、作品、ツールを同じドメインで育てたい

契約前は料金だけでなく、必要なプラン、更新料金、バックアップ、移行方法を公式サイトで確認してください。すでに別サーバーで安定運用できている場合は、この記事のために乗り換える必要はありません。

まとめ

  1. ローカルで表示確認してから本番へ転送する
  2. SSHは公開鍵認証とポート10022を使う
  3. 本番の配置先を確認し、更新前にバックアップする
  4. WP-CLIのPHPバージョンを明示する
  5. 公開後はページ、アセット、動的機能まで確認する

最初は手作業でも構いません。毎回同じ順番で実行し、確認項目を残すだけで公開作業は安定します。慣れてから差分転送や自動デプロイへ広げましょう。

公式情報・参考資料

このシリーズの記事

次に読む記事

STEP BACK