WordPressテーマをカスタマイズするなら子テーマを作っておく
WordPressの子テーマとは
WordPressの子テーマとは、既存のテーマ(親テーマ)の機能やデザインを継承しつつ、独自のカスタマイズを加えるためのテーマのことです。
簡単に言うと、親テーマを「土台」として、その上に「子テーマ」で変更を加えていくイメージです。
なぜ子テーマを使うのか?
子テーマを使用する主な理由は以下の通りです。
- 親テーマのアップデートへの対応: 親テーマがアップデートされると、テーマファイルが上書きされます。もし親テーマのファイルを直接編集していた場合、アップデートによってそれらの変更は失われてしまいます。子テーマを使っていれば、親テーマのアップデートが行われても、子テーマでの変更はそのまま保持されます。これは子テーマを使う最も重要な理由の一つです。
- 安全なカスタマイズ: 子テーマでカスタマイズを行うため、もし誤ったコードを記述してしまっても、親テーマ自体には影響を与えません。問題が発生した場合でも、子テーマを無効化するだけで元の状態に戻すことができます。
- 効率的な開発: 親テーマの機能をそのまま利用できるため、ゼロからテーマを作成するよりも効率的に開発を進めることができます。必要な部分だけを上書きしたり、機能を追加したりすることが可能です。
- コードの管理が容易: 親テーマと子テーマでカスタマイズ内容が明確に分離されるため、コードの管理がしやすくなります。
子テーマの基本的な仕組み
子テーマは、通常、以下の2つのファイルで構成されます。
style.css
: これは子テーマのスタイルシートで、子テーマの情報をWordPressに伝える役割も持ちます。最低限、このファイルがあれば子テーマとして認識されます。親テーマのスタイルを読み込むための記述もここで行います。functions.php
: このファイルは、親テーマの機能を上書きしたり、新しい機能を追加したりするために使用されます。例えば、独自のJavaScriptファイルやCSSファイルを追加したり、ショートコードを定義したりすることができます。
子テーマの作成方法
子テーマの作成は比較的簡単です。
- 新しいディレクトリの作成:
wp-content/themes
ディレクトリ内に、子テーマ用の新しいディレクトリを作成します。例えば、親テーマがtwentyseventeen
なら、子テーマはtwentyseventeen-child
のように分かりやすい名前にします。 style.css
の作成: 作成した子テーマのディレクトリ内にstyle.css
ファイルを作成し、以下の情報を記述します。
/*
Theme Name: My Child Theme
Theme URI: http://example.com/my-child-theme/
Description: My custom child theme
Author: Your Name
Author URI: http://example.com/
Template: twentyseventeen <– ここに親テーマのディレクトリ名を記述
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-child-theme
*/
<?php
function my_child_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
?>
- WordPressの管理画面で有効化: WordPressの管理画面の「外観」→「テーマ」に、作成した子テーマが表示されますので、それを有効化します。
子テーマでのカスタマイズ例
- CSSの追加・上書き: 子テーマの
style.css
に記述したCSSは、親テーマのCSSよりも優先して適用されます。これにより、親テーマのデザインを簡単に変更できます。 - テンプレートファイルの変更: 親テーマにあるテンプレートファイル(例:
header.php
,footer.php
,single.php
など)を子テーマの同じパスにコピーし、そのファイルを編集することで、親テーマの機能を上書きできます。例えば、single.php
を子テーマにコピーして編集すれば、個別の投稿ページの表示をカスタマイズできます。 - 機能の追加: 子テーマの
functions.php
にコードを追加することで、カスタム投稿タイプ、ウィジェット、ショートコードなどの新しい機能を追加できます。
まとめ
子テーマは、WordPressでウェブサイトを構築・管理する上で非常に重要な概念です。これを使うことで、親テーマのアップデートを気にせず安全にカスタマイズを行い、将来的なメンテナンスを容易にすることができます。WordPressでウェブサイトを運用する際には、子テーマの利用を強くおすすめします。
WordPressの子テーマの注意点
WordPressの子テーマを使用する際の注意点は以下の通りです。
1. 親テーマの更新に対する影響
- 子テーマは親テーマのテンプレートファイルや機能を利用するため、親テーマが更新されると子テーマに予期せぬ影響を与える可能性があります。
- 特に、親テーマでフック(アクションフック、フィルターフック)が追加、削除、変更された場合、子テーマでそのフックを利用している箇所が動作しなくなることがあります。
- 親テーマのテンプレートファイルが大幅に変更された場合、子テーマでそのファイルを上書きしていると、新しい親テーマの機能が反映されなかったり、デザインが崩れたりする可能性があります。
- 対策:
- 親テーマの更新前には必ずバックアップを取る。
- 更新後、子テーマが正しく動作するか十分にテストする。
- 親テーマの変更ログや開発者のアナウンスを確認し、影響範囲を把握する。
2. テンプレートファイルの上書き
- 子テーマで親テーマのテンプレートファイルを上書きする場合、親テーマのファイル名と完全に一致させる必要があります。ファイル名が異なると、子テーマのファイルが読み込まれません。
- 上書きするファイルは、必要最小限に留めるのがベストです。親テーマのファイルを丸ごとコピーして修正するのではなく、変更したい部分だけを修正するように心がけましょう。
- 対策:
- 親テーマのファイル構造を理解する。
- 上書きするファイルは慎重に選び、必要最低限に留める。
- 変更箇所をコメントなどで明記しておくと、後で管理しやすい。
3. functions.phpの扱い
- 子テーマの
functions.php
は、親テーマのfunctions.php
の後に読み込まれます。 - 親テーマで定義されている関数と同じ名前の関数を子テーマの
functions.php
で定義すると、PHPのエラー(致命的なエラー)が発生します。 - 親テーマの関数をオーバーライドしたい場合は、
function_exists()
で関数の存在チェックをするか、remove_action()
やremove_filter()
を使って親テーマのフックを解除してから、子テーマで独自のフックを追加するなどの方法があります。 - 対策:
- 親テーマの
functions.php
の内容を把握する。 - 子テーマで追加する関数名は、親テーマの関数名と重複しないように注意する。
- 親テーマの関数を修正したい場合は、直接変更するのではなく、フックを利用するなどの方法を検討する。
- 親テーマの
4. スタイルの読み込み順序
- 通常、子テーマの
style.css
は、親テーマのスタイルシートの後に読み込まれます。これにより、子テーマで親テーマのスタイルを上書きすることができます。 - ただし、
@import
ルールを使って親テーマのスタイルを読み込む方法は、WordPress 5.X以降では非推奨とされています。functions.php
でwp_enqueue_style()
を使って親テーマと子テーマのスタイルシートを適切にキューイングするのが推奨されています。 - 対策:
@import
ではなく、functions.php
でwp_enqueue_style()
を使用してスタイルを読み込む。wp_enqueue_style()
の依存関係(dependencies
引数)を適切に設定し、読み込み順序を制御する。
5. スクリプトの扱い
- JavaScriptなどのスクリプトも、スタイルシートと同様に
wp_enqueue_script()
を使って適切にキューイングする必要があります。 - 親テーマで利用しているスクリプトのバージョンや依存関係を把握し、子テーマで追加するスクリプトとの競合を避けるように注意しましょう。
- 対策:
wp_enqueue_script()
を利用してスクリプトを読み込む。- 親テーマで使用しているスクリプトの情報を確認し、重複や競合を避ける。
6. 更新時の手間
- 子テーマを作成すると、親テーマの更新時に子テーマのコードを見直す手間が増える可能性があります。特に、親テーマが大幅にアップデートされた場合、その影響範囲を確認し、子テーマの修正が必要になることがあります。
- 対策:
- 子テーマのコードはシンプルに保ち、必要最小限の変更に留める。
- 変更箇所を分かりやすくコメントするなど、メンテナンス性を考慮したコードを書く。
7. テーマ作者のサポート範囲
- 親テーマの作者は、通常、親テーマ自体のサポートは行いますが、子テーマによるカスタマイズ部分のサポートは範囲外となることが多いです。子テーマで発生した問題は、基本的に自分で解決する必要があります。
これらの注意点を踏まえることで、WordPressの子テーマをより安全かつ効果的に活用することができます。
ココナラ
は、「知識・スキル・経験」といった個人の「得意」を気軽に売り買いできる、日本最大級のスキルマーケットです。WordPressを使ったホームページ制作、WordPressのインストール・初期設定代行、WordPressのトラブル解決、WordPressに関するコンサルティング・使い方サポートのサービスがあります。
ココナラでは、WordPressのカスタマイズに関する様々なサービスが提供されています。以下にその概要をまとめます。
サービス内容
ココナラで提供されているWordPressカスタマイズサービスは多岐にわたります。主なものとしては、以下のようなものがあります。
- デザイン・レイアウトの変更:
- テーマのカスタマイズ、色の変更
- フォントやレイアウトの調整
- モバイル対応(レスポンシブ化)
- 機能の追加・修正:
- 新着記事一覧、カテゴリー一覧、スライドショーなどの設置
- お問い合わせフォームの追加
- SNS連携機能の導入
- 予約システムやECサイト機能の追加
- 特定のページや機能の追加(例:物件一覧、収支グラフ機能など)
- 管理画面のカスタマイズ(専門知識がなくても更新できるようにする)
- トラブルシューティング・メンテナンス:
- エラー表示や画面が真っ白になるなどの不具合修正
- WordPress、テーマ、プラグインのバージョンアップ対応
- 表示速度の高速化
- サーバー移行
- その他:
- WordPressブログの初期設定
- テーマ(例:Cocoonなど)の導入・カスタマイズ
- WordPressの使い方や操作方法のレクチャー・相談
料金相場
サービス内容や出品者によって料金は大きく異なります。比較的安価なものから、本格的なサイト制作まで幅広いです。
- 簡単な部分修正・機能追加: 3,000円〜10,000円程度
- より複雑な機能追加やページ追加: 30,000円〜
- サイト全体のリニューアルや新規制作: 数万円〜数十万円
多くの出品者が個別の見積もり相談を受け付けているため、まずは自分の要望を具体的に伝えて相談してみるのが良いでしょう。
メリットとデメリット
ココナラでWordPressカスタマイズを依頼する際には、いくつかのメリットとデメリットがあります。
メリット
- 安価で依頼できる: 企業に依頼するよりも人件費を抑えられるため、比較的安価に依頼できることが多いです。
- 手軽に依頼できる: 細かい要望やピンポイントな修正でも気軽に依頼しやすい環境です。
- 迅速な対応が期待できる: フリーランスの出品者が多いため、スピーディーなやり取りや作業が期待できます。
- 多様な専門家から選べる: 多くの出品者がいるため、自分のニーズに合ったスキルや実績を持つ人を見つけやすいです。
デメリット
- ワーカーのスキルに差がある: 出品者によって技術力や対応の質にばらつきがあるため、見極めが重要です。プロフィールや評価・口コミをしっかりと確認する必要があります。
- 運用サポートがない場合がある: 制作後の長期的なサポートは有料オプションや個別相談となることが多く、長期的な運用を視野に入れている場合は注意が必要です。
- 連絡手段の制限: 基本的にプラットフォーム内でのやり取りとなるため、直接的なコミュニケーションが取りにくい場合があります。
依頼する際のポイント
依頼する際は、以下の点を意識するとスムーズに進められます。
- 具体的な要望を明確にする: 何をどう変えたいのか、どのような機能を追加したいのかを具体的に伝えることで、出品者との認識のずれを防げます。
- 出品者のプロフィールや実績、評価を確認する: 過去の実績や購入者のレビューを参考に、信頼できる出品者を選びましょう。
- 事前に見積もり相談を行う: 依頼内容が明確でない場合や、料金が気になる場合は、まずは見積もり相談から始めるのがおすすめです。
ココナラは、手軽にWordPressのカスタマイズを依頼したい個人や小規模事業者にとって、非常に便利なサービスと言えるでしょう。