SWELLの子テーマの使い方と導入手順｜迷わず進める9ステップ

SWELLの子テーマって本当に入れたほうがいいのか、使い方もよく分からなくてモヤモヤしていませんか。

この記事では、SWELLの子テーマの使い方と考え方を、できるだけ初心者目線でかみ砕いてお話しします。

先に結論を一言でいうと、「しっかりカスタマイズしていくなら子テーマは必須だけれど、そこまでいじらないなら無理に入れなくても大丈夫」です。

SWELL子テーマの基礎と使い方の全体像を整理しよう

SWELL子テーマとは？親テーマとの違いをざっくり解説

子テーマは、かんたんに言うと「親テーマ（SWELL本体）を安全にカスタマイズするための外付けパーツ」です。サイト自体を動かしているのは親テーマで、子テーマはその上に自分の設定やコードを上乗せしていくイメージです。

よく混乱しやすいポイントを、表にまとめてみます。

項目	親テーマ（SWELL）	子テーマ（SWELL CHILD）
役割	サイトの土台となる本体・エンジン	自分のカスタマイズを書き足す入れ物
アップデート	開発者が配布する更新を適用	自分で中身を編集していく
編集の中心	基本は直接いじらない	こちら側にCSSやPHPを書く
削除した場合	削除するとサイト全体が動かない	削除するとカスタマイズだけ消える
使い方のイメージ	初期設定や標準機能をそのまま使う	見た目や機能を少しずつ上書きする

仕組みとしては、まず親テーマの機能やデザインが読み込まれて、そのあとで子テーマに書いたstyle.cssやfunctions.phpが上からかぶさるように反映されます。だから、親テーマを更新しても、子テーマ側のカスタマイズは基本的にそのまま残るわけです。

大事なのは「親テーマはほとんど触らない」「カスタマイズは子テーマ側にまとめる」という考え方です。親テーマに直接CSSやPHPを書いてしまうと、アップデートのたびに内容が消えたり、最悪サイトが動かなくなったりするので注意しましょう。

SWELL子テーマを使う目的とメリット

では、SWELLの子テーマを使うとどんな良いことがあるのかを整理します。

• 親テーマを更新しても、カスタマイズが消えにくい
• 大きめのデザイン変更や機能追加にチャレンジしやすい
• 「どこをいじったか」が子テーマ側にまとまるので管理しやすい
• トラブルが起きたとき、原因の切り分けがしやすくなる

私自身、最初は親テーマ側にちょこちょこ書いてしまっていた時期がありましたが、あとで何をどこに書いたか分からなくなり、かなり後悔しました。子テーマ側にカスタマイズをまとめるようにしてからは、見直す場所が決まるので、気持ち的にもだいぶラクになります。

特に、functions.phpを触る場合は子テーマ側に書くか、もしくはコード管理用のプラグインを使うほうが安全です。親テーマのfunctions.phpをいじるのは、トラブルのリスクが高いのでおすすめしません。

SWELL子テーマは本当に必要？使い方の前に判断しよう

子テーマを使うべき人チェックリスト

まずは、簡単なチェックリストで考えてみましょう。次の項目のうち、いくつ当てはまるか数えてみてください。

ざっくりした目安はこんな感じです。

• 2〜3個以上当てはまる → 子テーマを導入しておいたほうが安心
• 1個だけ、もしくは0個 → ひとまず親テーマだけでも困らないことが多い

要するに、「そこそこ本格的にカスタマイズしたい人」にとって、SWELLの子テーマはかなり心強い存在になります。逆に、ほぼデザインはいじらず記事を書くことに集中したい人は、無理に入れなくても問題ありません。

子テーマなしでもOKなSWELLの使い方

子テーマがなくてもSWELLを十分活かせるケースも多いです。例えば、次のような方です。

• テーマのデザインはほぼデフォルトで満足している
• やるとしても、文字サイズや色を少し変える程度
• CSSやPHPはできれば触りたくない
• とにかく記事更新を優先したい

SWELLは、テーマ側の設定だけでもかなり細かく見た目を変えられます。

• カスタマイザーでの色・フォント・レイアウト調整
• ブロックエディターでのデザイン装飾
• カスタマイザー内の「追加CSS」欄

このあたりでやりたいことがほぼ済んでしまうなら、「子テーマを入れたからすごく得する」という場面は意外と少なかったりします。むしろ、仕組みがよく分からないまま子テーマのファイルを触るほうが、トラブルの種になりやすいです。

SWELL子テーマの導入手順と基本的な使い方

SWELL子テーマファイルの入手とアップロード

SWELLの子テーマは、公式の会員サイトからダウンロードできます。流れを整理すると、だいたい次のようになります。

手順	やること	ポイント
1	SWELLの会員サイトにログイン	購入時に登録したメールアドレスとパスワードを使う
2	ダウンロードページを開く	「親テーマ」と「子テーマ」が別々のzipファイルになっている
3	親テーマのzipファイルをダウンロード	まだインストールしていない場合は、先に親テーマを用意する
4	子テーマのzipファイルをダウンロード	解凍せず、そのままzipの状態で保存する
5	WordPress管理画面の「外観 > テーマ」を開く	ここからテーマを追加していく
6	「新規追加」→「テーマのアップロード」	親テーマ → 子テーマの順にzipファイルをアップロードする
7	最後に「SWELL CHILD」を有効化	有効化するのは子テーマ側だけでOK

ここで押さえておきたいのは、「親テーマはインストールした状態のまま」「実際に有効化するのは子テーマ」という関係です。親テーマを削除してしまうと子テーマだけではサイトが動かないので、消さないように注意してください。

SWELL子テーマ有効化〜初期設定までの流れ

子テーマを有効化しても、見た目がガラッと変わるわけではありません。サイトが真っ白になったりすることも、通常の手順であればほとんどありません。

有効化したら、次のあたりを軽く確認しておきましょう。

• 「外観 > テーマ」で「有効：SWELL CHILD」と表示されているか
• 実際のサイトを表示して、レイアウトが大きく崩れていないか
• 「外観 > カスタマイズ」が開けるか、設定が見られるか

ここまで問題なければ、子テーマの準備としてはひと区切りです。このあとで、どのファイルを触るのか、どこからカスタマイズしていくのかを決めていきます。

SWELL子テーマの具体的な使い方 カスタマイズ編

style.cssで見た目を変える基本

SWELL子テーマのstyle.cssは、「見た目の微調整用ノート」のような役割です。余白や文字の大きさ、色の変更など、デザイン寄りの調整をまとめて書いていく場所になります。

基本的な操作の流れは次の通りです。

• 管理画面の「外観 > テーマファイルエディター」を開く
• 右上あたりのテーマ選択で「SWELL CHILD」を選ぶ
• 左側のファイル一覧からstyle.cssをクリック
• ファイルの一番下にCSSを追記する
• 更新ボタンを押して保存し、サイトを表示して変化を確認する

よくある使い方のイメージとしては、次のようなものがあります。

• 見出しの上下の余白を少し広げる
• サイドバーだけ文字を小さくする
• フッターの背景色をブランドカラーに合わせる

いきなりテーマファイルエディターで書くのが不安であれば、まずはカスタマイザーの「追加CSS」で試してみて、うまくいったコードをあとからstyle.cssに移す、という流れにすると安心です。「実験は追加CSS、本採用は子テーマのstyle.css」という分け方ですね。

functions.phpで機能を追加する基本

SWELLの子テーマを使ううえで、特に慎重になりたいのがfunctions.phpです。ここはサイトの動きに関わるコードを書くファイルなので、1文字のミスでエラーになることもあります。

functions.phpを触ることが多いのは、例えばこんな場面です。

• ショートコードを作って、よく使うパーツをワンタッチで呼び出したい
• 特定の場所にだけオリジナルのウィジェットエリアを追加したい
• 条件に応じて表示を切り替える処理を追加したい

ざっくりとした使い分けを表にしておきます。

やりたいこと	おすすめのやり方	子テーマの関わり方
文字色や余白のちょっとした調整	追加CSSまたはstyle.css	長く使う調整はstyle.cssにまとめておく
ボタンやボックスのデザイン統一	style.css	SWELL標準ブロックと組み合わせて調整
ショートコードで共通パーツ化	functions.php	子テーマのfunctions.phpにコードを追記
特定条件で動く処理（if文など）	functions.phpか専用プラグイン	子テーマに書くとアップデートの影響を受けにくい

functions.phpを編集するときは、次の3つだけは必ず守ってください。

• いきなり大きなコードを貼らず、小さな単位で試す
• 編集前に、現在のfunctions.phpを丸ごとコピーしてメモ帳などに保存
• 保存したらすぐサイトを表示して、エラーが出ていないか確認

もしどうしても不安な場合は、まずはコード管理用のプラグイン（Code Snippets系など）で慣れてから、安定しているコードだけ子テーマのfunctions.phpにまとめていくやり方もおすすめです。

追加CSS・カスタマイザーとの使い分け

「追加CSSに書くべきか、子テーマのstyle.cssに書くべきか分からない」という相談もよく聞きます。この2つは役割が少し違うので、状況に応じて使い分けるのがポイントです。

• ちょっと試してみたいコード → 追加CSSに書く
• この先もずっと使い続ける調整 → 子テーマのstyle.cssにまとめる

もう少し整理すると、次のようなイメージです。

• CSSを書き始めたばかりの段階では、まずは追加CSSだけでも十分
• 調整内容が増えてきて「どこに何を書いたか分からない」と感じたらstyle.cssに移動
• チームで運営している場合は、子テーマのstyle.cssにコメントを残しながら管理

「とりあえず追加CSSで何でも書く」スタイルだと、あとから自分で見直したときに大変なので、ある程度のところで子テーマ側にまとめる意識を持っておくと楽になります。

SWELL子テーマ運用でよくある失敗と注意点

親テーマを直接いじらないこと

一番多いミスが、「子テーマのつもりで親テーマを編集してしまう」パターンです。

• テーマファイルエディターで、親テーマのstyle.cssを編集してしまう
• functions.phpも親テーマ側に追記してしまう

これをやってしまうと、次のような問題が起きます。

• テーマをアップデートしたときに、編集内容がまるごと上書きされる
• あとから復旧するとき、どこを直せばいいか分からなくなる

防ぐためには、編集前のちょっとした確認が効果的です。

• 「外観 > テーマ」で、有効になっているのが「SWELL CHILD」か確認
• テーマファイルエディター右上の「現在のテーマ」がSWELL CHILDになっているか確認

この2点を毎回チラッと見るクセをつけるだけでも、親テーマを誤って編集するリスクをかなり減らせます。

画面が真っ白になったときの対処

functions.phpを触っているときに、うっかりミスをして画面が真っ白……というのは、多くの人が一度は経験するトラブルです。そんなときの考え方を、症状別にまとめておきます。

症状	よくある原因	対処の考え方
サイト全体が真っ白になる	functions.phpの書き間違い、カンマやセミコロンの抜け	直前に追加したコードだけを削除、またはコメントアウトする
特定のページだけエラーになる	条件分岐の書き方ミスや、特定ページ向けの処理	条件をシンプルに戻し、どこからエラーになるか切り分ける
管理画面にも入れない	重い処理や致命的エラーをfunctions.phpに書いてしまった	FTPやサーバーのファイルマネージャーでfunctions.phpを一時的にリネームする

FTPと聞くと身構えてしまうかもしれませんが、多くのレンタルサーバーにはブラウザから触れるファイルマネージャー機能があります。まずはそこから子テーマのfunctions.phpを開き、直前に書いたコードを消すだけでも復旧できることが多いです。

一番やってはいけないのは、焦っていろいろな設定を同時にいじってしまうことです。「直前に自分が何をしたか」を思い出し、その一点だけを戻すイメージで落ち着いて対応しましょう。

SWELL子テーマを後から導入する使い方ガイド

親テーマでカスタマイズ済みの場合の移行イメージ

もし親テーマ側ですでにstyle.cssやfunctions.phpを編集してしまっている場合は、子テーマ導入の前に「どこをいじったか」をざっくり洗い出す必要があります。

本番環境でいきなり試すのが不安な場合は、サブドメインやローカル環境にサイトを複製して、そちらでテストしてから本番に反映すると安心感が違います。

安全に移行するためのチェックポイント

子テーマをあとから導入するときに、不安を減らすためのチェック項目を表にまとめておきます。

チェック項目	確認したい内容	OKの目安
バックアップ	サイト全体のバックアップが用意できているか	管理画面やサーバー側で、少なくとも1つはバックアップがある
親テーマ編集の有無	親テーマのどのファイルを触ったか	ざっくりでも、編集箇所がメモできている
導入順	親テーマと子テーマのインストール順序	親テーマを入れたあとに子テーマを入れ、最後に子テーマを有効化している
表示チェック	主要ページの見た目	トップページや記事ページに大きな崩れがない
戻し方	問題が起きたときに元に戻す手順	最低限、バックアップから復元するイメージが持てている

ここまで確認してから作業に入れば、「触るのが怖い」という気持ちはだいぶ軽くなると思います。

SWELL子テーマ・使い方の視点でよくある質問

Q1. SWELL子テーマを有効化したら、親テーマは無効にしてもいい？

A. 親テーマは必ずそのまま残しておいてください。

子テーマはあくまで親テーマにぶら下がって動く仕組みなので、親テーマを削除したり無効化したりすると、子テーマだけではサイトが表示できません。有効化しておくのは子テーマ（SWELL CHILD）ですが、親テーマのSWELL自体はインストール済みの状態を維持しておきましょう。

Q2. SWELL子テーマを入れると、サイトが重くなりませんか？

A. 子テーマを入れたことだけが原因で、目に見えてサイトが重くなるケースはあまりありません。

仕組み上、親テーマと子テーマの両方を読み込むことになりますが、表示速度に大きな影響を与えるのは、画像のサイズやプラグインの数・設定などのほうがずっと大きいです。必要なカスタマイズがあるなら、子テーマ導入を理由に表示速度を心配しすぎる必要はないと思います。

Q3. 一度子テーマに切り替えたあと、やっぱり親テーマだけに戻すことはできる？

A. 戻すこと自体はできますが、慎重にやる必要があります。

子テーマのstyle.cssやfunctions.phpに書いた内容は、子テーマを無効にするとすべて反映されなくなります。そのため、「子テーマで行っていたカスタマイズがなくなっても問題ないか」を確認したうえで、親テーマを有効化し、表示崩れがないかをチェックする流れになります。

途中で不安になったときにすぐ戻せるように、事前にバックアップを取っておくことを強くおすすめします。

SWELL子テーマの使い方まとめと今日からの一歩

最後にもう一度コンパクトに整理します

そして、今日からできる最初の一歩はとてもシンプルです。

• まだ子テーマを入れていないなら、この記事のチェックリストを見ながら「自分に必要かどうか」を一度整理してみる
• 必要だと感じたら、まずは子テーマを導入して有効化まで済ませる
• そのうえで、「追加CSSで試す → 問題なければ子テーマのstyle.cssにまとめる」という流れに少しずつ慣れていく

このステップで進めていけば、SWELLの子テーマの使い方へのハードルはかなり下がっていくはずです。焦らなくて大丈夫なので、自分のペースで一つずつ試してみてください。