Apuraテーマを使っているサイトで、独自CSSやテンプレートの調整を長く管理したい場合は、子テーマの利用が便利です。
この記事では、Apuraの子テーマでできること、導入時の考え方、そして特に間違いやすい functions.phpでのCSS読み込み設定 について解説します。Apuraではテーマ本体側で子テーマのCSS読み込みに対応しているため、一般的な子テーマ解説で紹介されるenqueue処理を改めて追加する必要はありません。
- 対象: Apuraテーマで子テーマを使いたい方
- 主な用途: CSSの上書き、テンプレートの調整、独自PHPコードの追加
- 重要ポイント: Apuraでは子テーマのstyle.cssをテーマ側で読み込むため、子テーマのfunctions.phpでenqueueを書く必要はありません
子テーマとは
子テーマとは、親テーマの機能やテンプレートを引き継ぎながら、一部のファイルだけを上書きできるWordPressの仕組みです。Apuraを親テーマとして使い、必要な変更だけを子テーマ側に置くことで、Apura本体をアップデートしても独自カスタマイズを残しやすくなります。
たとえば、少量のCSSを追加したい、特定テンプレートだけ表示を変えたい、サイト専用のフック処理を追加したいといった場合に向いています。
Apuraで子テーマを使う主なメリット
- テーマ更新に強い: Apura本体を更新しても、子テーマ側のCSSやテンプレート変更を維持しやすくなります。
- カスタマイズ箇所を分けられる: サイト固有の調整を子テーマにまとめられるため、後から見直しやすくなります。
- 追加CSSより管理しやすい: 変更量が増えてきた場合、管理画面の追加CSSよりファイルとして整理しやすくなります。
Apuraでは子テーマのCSS読み込み設定は不要
WordPressの子テーマ解説では、子テーマの functions.php に wp_enqueue_style() を書いて、親テーマと子テーマのCSSを読み込む方法がよく紹介されています。
ただし、Apuraではこの設定を子テーマ側で書く必要はありません。Apura本体が子テーマの利用を検知し、子テーマの style.css をApura本体のメインCSSの後に読み込むように設計されています。
そのため、Apuraの子テーマでは次のようなenqueueコードを追加する必要はありません。
<?php
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'apura-child-style', get_stylesheet_uri() );
} );このようなコードを追加すると、同じCSSが重複して読み込まれたり、読み込み順が意図せず変わったりする可能性があります。子テーマのCSSを調整したい場合は、基本的に style.css にCSSを書くだけで問題ありません。
子テーマのfunctions.phpは何に使うのか
Apuraの子テーマで functions.php が不要になるわけではありません。CSSの読み込み設定は不要ですが、サイト固有のPHPカスタマイズを追加する場所として使えます。
- 独自のショートコードを追加する
- WordPressやApuraのフックを使って表示を調整する
- サイト専用の管理画面向け処理を追加する
- 必要な場合に、子テーマ独自の別CSSやJavaScriptを追加で読み込む
ただし、子テーマの標準CSSである style.css についてはApura側で読み込まれるため、同じ読み込み処理を重ねて書かないようにしてください。
子テーマの導入方法
- Apura子テーマのZIPファイルをダウンロードします。
- WordPress管理画面で 外観 → テーマ を開きます。
- 新しいテーマを追加 を選択します。
- テーマのアップロード からZIPファイルを選択してインストールします。
- インストール後、Apura子テーマを有効化します。
子テーマはApura本体を親テーマとして利用します。先にApura本体がインストールされている状態で、子テーマを有効化してください。
style.cssにCSSを追加する場合
子テーマを有効化したら、子テーマ内の style.css にCSSを追加できます。たとえば、見出しやボタン、余白などをサイトに合わせて調整できます。
.entry-content h2 {
border-left: 4px solid var(--ap-color-primary);
padding-left: 0.75em;
}上記は例です。実際のデザインでは、Apuraのカスタマイザー設定やブロックエディターのスタイルと重複しない範囲で、必要なCSSだけを追加するのがおすすめです。
追加CSSと子テーマの使い分け
| 方法 | 向いている内容 | ポイント |
|---|---|---|
| カスタマイザーの追加CSS | 少量のCSS調整 | 管理画面からすぐ編集できるため、軽い調整に向いています。 |
| 子テーマのstyle.css | 継続的に管理したいCSS | 変更量が増える場合や、ファイルとして整理したい場合に向いています。 |
| 子テーマのfunctions.php | PHPによる機能追加 | フックやショートコードなど、CSS以外のカスタマイズに使います。 |
| プラグイン化 | テーマを変更しても残したい機能 | サイトの機能として長く使う処理は、子テーマよりプラグイン化が向いている場合があります。 |
子テーマ利用時の注意点
- Apura本体を削除すると、子テーマは正しく動作しません。
- Apura本体と子テーマの両方を管理画面に残した状態で運用してください。
- 子テーマの
functions.phpに、子テーマのstyle.cssを読み込むためのenqueue処理を追加しないでください。 - テンプレートファイルを子テーマで上書きする場合は、Apura本体のアップデート後に表示崩れがないか確認してください。
まとめ
Apuraで子テーマを使うと、テーマ本体のアップデートを続けながら、サイト固有のCSSやテンプレート調整を管理しやすくなります。
特に重要なのは、Apuraでは子テーマの style.css をテーマ本体側で読み込むようにしている点です。子テーマの functions.php にCSS読み込み用のenqueue処理を追加する必要はありません。子テーマでは、必要なCSSを style.css に書き、PHPの追加処理が必要な場合だけ functions.php を使う、という整理で運用してください。