WordPressのテーマ「AFFINGER（アフィンガー）」を使い始めたとき、多くの人が最初に戸惑うのが「子テーマ」という概念です。
「親テーマがあるのに、なぜわざわざ子テーマを入れる必要があるの？」と思う気持ち、よくわかります。
実はこの子テーマ、ちゃんと理解して使うかどうかで、後々のサイト運営のしやすさが大きく変わってくるんです。
この記事では、AFFINGERの子テーマについて、基本的な仕組みから具体的な導入手順、カスタマイズの方法まで、できるだけわかりやすくまとめました。
この記事でわかること
- AFFINGERの子テーマとは何か、なぜ必要なのかという基本的な考え方
- 子テーマの具体的なインストール手順と有効化の流れ
- style.cssやPHPファイルを使ったカスタマイズの方法
- AFFINGER6専用の子テーマ「JET2」の特徴と活用ポイント
AFFINGERの子テーマとは？まず「親と子」の関係を理解しよう
子テーマの話をする前に、まず「親テーマと子テーマの関係」をざっくり理解しておきましょう。
ここをしっかり押さえておくと、なぜ子テーマが必要なのかが自然とわかってきます。
親テーマとは何か？
WordPressのテーマは、サイトのデザインや機能を決める「骨格」のようなものです。
AFFINGERでいえば、購入してダウンロードした「affinger.zip」が親テーマにあたります。
この親テーマには、サイトのレイアウト・フォント・色づかい・記事の表示形式など、あらゆる設定や機能が詰まっています。
親テーマのファイルを直接いじれば、見た目を自由に変えることはできます。
ただ、ここに大きな落とし穴があります。
それは、テーマのアップデートが来たときです。
AFFINGERは定期的にバージョンアップされます。
そのとき親テーマが更新されると、自分でカスタマイズしたコードや設定が上書きされてしまう可能性があるのです。
子テーマとはカスタマイズ専用の「作業スペース」
子テーマというのは、親テーマの機能を引き継ぎながら、自分のカスタマイズだけを別ファイルとして保持できる仕組みです。
たとえるなら、親テーマが「原本」で、子テーマが「自分専用のメモ帳」のようなイメージです。
原本はそのまま大切に保管しておいて、自分のカスタマイズはメモ帳のほうに書いておく。
アップデートが来ても原本が更新されるだけで、自分のメモ帳は無傷のまま残ります。
AFFINGERの公式でも子テーマを使うことを強く推奨しています。
公式の姿勢として「子テーマを使わないカスタマイズはおすすめしない」というスタンスが明確に示されているほどです。
子テーマを使わないと何が起こるか
実際のところ、子テーマなしで親テーマを直接編集してしまうケースもあります。
最初はそれで問題なく動くことも多いのですが、ある日突然テーマのアップデートを適用した瞬間、カスタマイズしていた内容がすべてリセットされてしまう……というトラブルが起きやすいのです。
ゲームでいえば、セーブポイントなしで長時間プレイしているようなものです。
途中でミスしたり予期しないトラブルが起きたりしたとき、最初からやり直さなければならなくなる。
それだけ大きなリスクを背負っているわけです。
ブログのカスタマイズに時間をかけていたのに、一度のアップデートでゼロに戻るのは本当につらい体験です。
そのリスクを回避するために子テーマは存在しています。
子テーマはどんなファイルで構成されているか
AFFINGERの子テーマ（affinger-child.zip）を解凍すると、中には主に以下のファイルが含まれています。
| ファイル名 | 役割 |
|---|---|
| style.css | デザインのカスタマイズを記述するスタイルシート |
| functions.php | WordPressの機能を追加・変更するPHPファイル |
| screenshot.png | WordPressのテーマ一覧に表示されるサムネイル画像 |
この中で最もよく使うのがstyle.cssです。
フォントの大きさ・余白の調整・色の変更など、見た目に関するカスタマイズはここに書いていきます。
functions.phpはWordPressの挙動を変えたいときに使うもので、初心者の方はあまり触れる機会がないかもしれませんが、知っておくと便利です。
ちなみに、子テーマの「style.css」の先頭には、以下のような「このテーマは〇〇の子テーマです」という宣言が書かれています。
この宣言があることで、WordPressが「このテーマは親テーマと連携して動かすものだ」と認識してくれる仕組みになっています。
AFFINGERの子テーマのインストール手順を一から丁寧に解説
子テーマの仕組みが理解できたら、次は実際にインストールしてみましょう。
手順自体はそれほど複雑ではないのですが、順番を間違えると正しく動作しないので注意が必要です。
インストール前に確認しておくこと
まず、AFFINGERのテーマファイルを手元に用意しておく必要があります。
公式サイト（STINGER STORE）からダウンロードすると、通常は以下の2つのzipファイルが手に入ります。
- affinger.zip（親テーマ）
- affinger-child.zip（子テーマ）
この2つを使ってインストールを進めていきます。
なお、ダウンロードファイルの構成や名称は公式サイトの仕様変更によって変わることがあります。
最新の情報は公式サイトでご確認ください。
Step1：親テーマ（affinger.zip）をインストールして有効化する
WordPressの管理画面にログインしたら、左メニューの「外観」→「テーマ」→「新規追加」と進みます。
画面上部の「テーマのアップロード」ボタンをクリックして、「affinger.zip」を選択してアップロードします。
アップロードが完了したら「有効化」をクリックします。
ここで一度、親テーマを有効化するのがポイントです。
後で子テーマを有効化するので、最終的に有効になるのは子テーマですが、まず親テーマをインストールして認識させておく必要があります。
Step2：子テーマ（affinger-child.zip）をインストールして有効化する
親テーマのインストールが終わったら、同じ手順で今度は「affinger-child.zip」をアップロードします。
「外観」→「テーマ」→「新規追加」→「テーマのアップロード」の流れです。
アップロード後、「有効化」をクリックします。
これで子テーマが有効になりました。
テーマ一覧ページを見ると、子テーマが「有効」の状態になっているはずです。
親テーマはインストール済みだが有効化されていない状態、子テーマが有効という形が正しい状態です。
Step3：正しく動いているか確認する
有効化後にサイトを表示して、見た目が正常に表示されていれば導入成功です。
管理画面の「外観」→「テーマ」でも、子テーマが選択されていることを確認しておきましょう。
もしサイトの表示が崩れたり真っ白になったりした場合は、インストールの順番が逆になっていた・zipファイルの中身が正しくない・別のテーマが干渉しているなどの原因が考えられます。
焦らず一つひとつ確認することが大切です。
アップデート時も子テーマがあれば安心
AFFINGERがアップデートされたとき、更新するのは親テーマ（affinger.zip）だけです。
子テーマは更新の対象外なので、子テーマに書いたカスタマイズはそのまま残ります。
これが子テーマを使う最大のメリットです。
逆に言えば、子テーマを使わずに親テーマを直接編集していた場合、アップデートのたびに「また設定が消えた……」というストレスを感じ続けることになります。
最初に少し手間をかけて子テーマを導入しておくだけで、後の運営がずっと楽になるのです。
style.cssとfunctions.phpを使った子テーマのカスタマイズ方法
子テーマが有効になったら、いよいよカスタマイズです。
AFFINGERは管理画面から多くの設定ができますが、より細かい調整をしたいときはstyle.cssやfunctions.phpを直接編集する方法が便利です。
style.cssはどこで編集するか
子テーマのstyle.cssを編集する方法は主に2つあります。
- WordPressの管理画面から「外観」→「テーマファイルエディター」で直接編集する方法
- FTPソフトを使ってサーバー上のファイルをダウンロード・編集・アップロードする方法
管理画面のエディターはブラウザ上で操作できるので手軽ですが、誤ったコードを入力するとサイトが正常に表示されなくなるリスクがあります。
作業前には必ずバックアップをとる習慣をつけておきましょう。
ちなみに、AFFINGERにはカスタマイザーや管理画面の中にCSSを追記できる専用のテキストエリアが用意されています。
軽微なデザイン変更であれば、そちらを使うほうが安全で手軽です。
style.cssに直書きするのは、もう少し本格的なカスタマイズをしたいときに活用するイメージです。
style.cssに書く基本的なCSSの例
たとえば、記事本文のフォントサイズを変更したい場合、子テーマのstyle.cssに以下のようなコードを追記します。
具体的なコードの内容はここでは省きますが、基本的な書き方は「どの要素を」「どう変えるか」をセレクタとプロパティで指定していくものです。
AFFINGERの場合、どのクラス名がどの部分に対応しているかを調べながら進めるのが一般的です。
ブラウザの「検証ツール（デベロッパーツール）」を使うと、サイト上の要素のクラス名を確認できるので非常に便利です。
functions.phpでできること
functions.phpはWordPressの機能そのものに変更を加えたいときに使います。
たとえば「ウィジェットを追加したい」「特定のページに独自のクラスを付けたい」「ショートコードを自作したい」といった場面です。
functions.phpはコードの書き方を一つ間違えるだけでサイト全体が動かなくなることがあります。
初めて触る方は、まずは小さな変更から試して、必ずバックアップを取った上で作業することを強くおすすめします。
親テーマのファイルを子テーマにコピーして使う方法
AFFINGERの子テーマには最初からすべてのファイルが含まれているわけではありません。
デフォルト状態ではstyle.cssとfunctions.phpなど最低限のファイルだけが入っています。
より高度なカスタマイズをしたい場合には、親テーマの中にある特定のPHPファイルを子テーマにコピーして編集するという方法が使えます。
WordPressの仕様として、子テーマに同名のファイルが存在する場合、親テーマのファイルよりも子テーマのファイルが優先されます。
この仕組みを利用することで、親テーマ本体には一切手を加えずに、特定のテンプレートだけを上書きすることができます。
投稿ページをカスタマイズする場合
AFFINGERには投稿ページの表示をカスタマイズするための専用ファイル（single-type2.phpなど）が用意されています。
これらのファイルを子テーマにコピーして編集することで、記事ページのレイアウトやヘッダー部分の見せ方を自由に変えることができます。
ただしPHPファイルの編集はCSSの編集よりも難易度が上がります。
HTMLやPHPの基礎知識がある程度ないと思わぬところでエラーが出やすいので、最初は公式マニュアルやコミュニティの情報をよく参照しながら進めることをおすすめします。
AFFINGER6専用の子テーマ「JET2」とは？通常の子テーマとの違い
AFFINGERには通常の子テーマ（affinger-child）とは別に、「JET2（ジェット2）」という専用の子テーマが存在します。
これは単なるカスタマイズ用の子テーマではなく、独自の機能拡張が加わった上位版のような位置づけです。
JET2とはどんなものか
JET2はAFFINGER6（AFFINGER WP）専用に設計された子テーマで、STINGER STOREで別途購入する形式になっています。
通常の子テーマ（affinger-child）はAFFINGERを購入した際に無料でついてくるものですが、JET2は追加の有料コンテンツという位置づけです。
最新の価格・販売状況については公式サイトでご確認ください。
JET2を使うには、まず親テーマ（AFFINGER6本体）を有効化した状態で、JET2をインストールして有効化します。
通常の子テーマと同じ流れです。
JET2ならではの機能とは？
JET2の大きな特徴は、TOPページやカテゴリーページの記事一覧をカード型デザインで表示できる点です。
通常のAFFINGERではシンプルなリスト形式が基本ですが、JET2を導入することでおしゃれなカード型レイアウトに切り替えられます。
また、Google広告（アドセンス）を記事の中に自然になじませる形で配置しやすい機能も搭載されています。
広告が浮いて見えず、コンテンツの流れの中に溶け込むような表示ができるため、読者の読書体験を損ないにくいというメリットがあります。
JET2を使う際の注意点
JET2はAFFINGERの一部のテーマ管理機能やカスタマイザーの設定を強制的に上書きする仕様になっています。
そのため、通常のカスタマイザーでは変更できない箇所が出てくることがあります。
JET2は便利な反面、導入前に「どの機能が制限されるか」を確認することが大切です。
特に、すでに親テーマのカスタマイザーで細かく設定を作り込んでいる場合、JET2を入れることでその設定が変わってしまうケースも考えられます。
公式ドキュメントやサポート情報をしっかり読んでから導入を検討しましょう。
通常の子テーマとJET2、どちらを選ぶべきか
初めてAFFINGERを使う方や、まずは基本的なカスタマイズだけしたいという方には、標準の子テーマ（affinger-child）で十分です。
JET2はある程度AFFINGERを使い慣れて、「もっとサイトの見た目にこだわりたい」「TOPページをもっとおしゃれにしたい」と思ったときに検討するのがよいでしょう。
| 比較項目 | 通常の子テーマ | JET2 |
|---|---|---|
| 費用 | AFFINGER購入時に含まれる | 別途購入が必要（公式で要確認） |
| カード型レイアウト | 非対応 | 対応 |
| カスタマイザーへの影響 | ほぼなし | 一部設定が上書きされる |
| おすすめの対象 | 初心者・基本カスタマイズ派 | デザインにこだわりたい方 |
いずれにしても、JET2も通常の子テーマも「子テーマである」という点は変わりません。
親テーマを直接いじらずにカスタマイズを積み上げていくという基本的な考え方は同じです。
子テーマを使うときに知っておきたい実践的なポイントと注意点
子テーマの基本と導入手順を理解した上で、実際に使う際に「知っておくとよかった」と感じるポイントをまとめました。
初心者の方はもちろん、ある程度使い慣れてきた方にも役立つ内容です。
カスタマイズ前には必ずバックアップをとる
これはAFFINGERに限らず、WordPressサイト全般に言えることですが、ファイルを編集する前のバックアップは絶対に欠かせません。
特にfunctions.phpやPHPファイルを触るときは、一つのミスでサイトが真っ白になるリスクがあります。
バックアップには「BackWPup」「UpdraftPlus」などのプラグインが便利です。
また、サーバーの管理画面でも自動バックアップ機能を提供しているサービスが多いので、そちらも確認しておくとより安心です。
AFFINGERのマーカー機能と子テーマの関係
AFFINGERには記事内のテキストにマーカーを引く機能が搭載されています。
青・赤・黄色など複数の色のマーカーが使えて、強調したい部分を視覚的に目立たせることができます。
この機能はAFFINGER本体に組み込まれているものですが、子テーマのstyle.cssでマーカーの色やスタイルをカスタマイズすることも可能です。
たとえば「マーカーの色がサイトのデザインに合わない」と感じたときは、子テーマのstyle.cssで該当するクラスのスタイルを上書きすれば、安全に変更できます。
これも子テーマを使う利点の一つです。
phpファイルを子テーマに追加する際の手順
前述のとおり、親テーマの特定のPHPファイルを子テーマにコピーして編集するという手法があります。
実際に作業するときの大まかな流れは次のとおりです。
- FTPソフト（FileZillaなど）でサーバーにアクセスし、親テーマフォルダ内の目的のファイルを確認する
- そのファイルをローカル（自分のPC）にダウンロードしてコピーを作成する
- コピーしたファイルを子テーマフォルダにアップロードする
- 子テーマにアップロードしたファイルを編集する
WordPressは子テーマに同名ファイルがある場合、自動的にそちらを優先して読み込みます。
これによって親テーマのファイルを汚さずにカスタマイズを加えられるわけです。
テーマのアップデートをするタイミングの注意点
AFFINGERがアップデートされると、管理画面の「更新」項目にアップデートの案内が表示されます。
子テーマを使っていれば、親テーマを更新してもカスタマイズが消える心配はほぼありません。
ただし、大きなバージョンアップの際は事前に公式のリリースノートを確認しておくことをおすすめします。
バージョンによっては、CSSのクラス名が変わったり、テンプレートの構造が変更されたりすることがあります。
そうした変更が起きると、子テーマに書いていたカスタマイズが意図通りに機能しなくなるケースも出てきます。
更新後は必ずサイトの表示を確認し、崩れがないかチェックする習慣をつけましょう。
子テーマを使いながらAFFINGERを最大限に活用するコツ
AFFINGERは管理画面の「AFFINGER管理」からかなり細かい設定ができます。
子テーマでのカスタマイズと管理画面の設定は相互に影響することがあるので、まずは管理画面の設定を使い倒してみることをおすすめします。
それでも対応できない部分だけ子テーマのstyle.cssで補う、という使い方が一番スムーズです。
CSSを書くのが苦手な方は、管理画面の「カスタマイズ」→「追加CSS」の欄にコードを入れる方法も使えます。
こちらはWordPressの標準機能なので、AFFINGERに限らず使えますが、子テーマのstyle.cssとは別に管理される形になります。
どちらを使うかは好みや習慣次第ですが、一か所にまとめておくほうが後から見直しやすいのは確かです。
まとめ：AFFINGERの子テーマは「安全なカスタマイズの基盤」として絶対に活用しよう
この記事のポイントをまとめます。
- AFFINGERの子テーマとは、親テーマを保護しながらカスタマイズを行うための仕組みである
- 子テーマを使わないとアップデート時にカスタマイズが消えるリスクがある
- インストール時は必ず親テーマ→子テーマの順にアップロード・有効化する
- カスタマイズはstyle.cssやfunctions.phpで行い、必ず事前バックアップをとる
- AFFINGER6専用の子テーマ「JET2」は追加機能付きの上位版で、別途購入が必要
- 親テーマのPHPファイルを子テーマにコピーして編集することで、高度なカスタマイズも可能
AFFINGERの子テーマは、最初は「なんで必要なの？」と思うかもしれませんが、使い始めると「これがあってよかった」と感じる場面が必ず来ます。
サイトを育てていく中でカスタマイズの量は少しずつ増えていくものです。
そのときに子テーマという「安全地帯」があれば、思い切って色々と試してみることができます。
失敗しても子テーマの中だけで完結しますし、親テーマはいつでも無傷のままです。
ブログ運営をより快適に、より長く続けるためにも、子テーマの正しい使い方をしっかりマスターしておきましょう。
AFFINGERの最新情報や子テーマのダウンロード方法については、公式サイトや公式マニュアルで最新情報をご確認ください。
