WordPressテーマをカスタマイズするなら子テーマを作っておく

WordPressの子テーマとは

WordPressの子テーマとは、既存のテーマ(親テーマ)の機能やデザインを継承しつつ、独自のカスタマイズを加えるためのテーマのことです。

簡単に言うと、親テーマを「土台」として、その上に「子テーマ」で変更を加えていくイメージです。

なぜ子テーマを使うのか?

子テーマを使用する主な理由は以下の通りです。

  1. 親テーマのアップデートへの対応: 親テーマがアップデートされると、テーマファイルが上書きされます。もし親テーマのファイルを直接編集していた場合、アップデートによってそれらの変更は失われてしまいます。子テーマを使っていれば、親テーマのアップデートが行われても、子テーマでの変更はそのまま保持されます。これは子テーマを使う最も重要な理由の一つです。
  2. 安全なカスタマイズ: 子テーマでカスタマイズを行うため、もし誤ったコードを記述してしまっても、親テーマ自体には影響を与えません。問題が発生した場合でも、子テーマを無効化するだけで元の状態に戻すことができます。
  3. 効率的な開発: 親テーマの機能をそのまま利用できるため、ゼロからテーマを作成するよりも効率的に開発を進めることができます。必要な部分だけを上書きしたり、機能を追加したりすることが可能です。
  4. コードの管理が容易: 親テーマと子テーマでカスタマイズ内容が明確に分離されるため、コードの管理がしやすくなります。

子テーマの基本的な仕組み

子テーマは、通常、以下の2つのファイルで構成されます。

  • style.css: これは子テーマのスタイルシートで、子テーマの情報をWordPressに伝える役割も持ちます。最低限、このファイルがあれば子テーマとして認識されます。親テーマのスタイルを読み込むための記述もここで行います。
  • functions.php: このファイルは、親テーマの機能を上書きしたり、新しい機能を追加したりするために使用されます。例えば、独自のJavaScriptファイルやCSSファイルを追加したり、ショートコードを定義したりすることができます。

子テーマの作成方法

子テーマの作成は比較的簡単です。

  1. 新しいディレクトリの作成: wp-content/themes ディレクトリ内に、子テーマ用の新しいディレクトリを作成します。例えば、親テーマが twentyseventeen なら、子テーマは twentyseventeen-child のように分かりやすい名前にします。
  2. 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' );
?>
  1. 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.phpwp_enqueue_style() を使って親テーマと子テーマのスタイルシートを適切にキューイングするのが推奨されています。
  • 対策:
    • @import ではなく、functions.phpwp_enqueue_style() を使用してスタイルを読み込む。
    • wp_enqueue_style() の依存関係(dependencies 引数)を適切に設定し、読み込み順序を制御する。

5. スクリプトの扱い

  • JavaScriptなどのスクリプトも、スタイルシートと同様に wp_enqueue_script() を使って適切にキューイングする必要があります。
  • 親テーマで利用しているスクリプトのバージョンや依存関係を把握し、子テーマで追加するスクリプトとの競合を避けるように注意しましょう。
  • 対策:
    • wp_enqueue_script() を利用してスクリプトを読み込む。
    • 親テーマで使用しているスクリプトの情報を確認し、重複や競合を避ける。

6. 更新時の手間

  • 子テーマを作成すると、親テーマの更新時に子テーマのコードを見直す手間が増える可能性があります。特に、親テーマが大幅にアップデートされた場合、その影響範囲を確認し、子テーマの修正が必要になることがあります。
  • 対策:
    • 子テーマのコードはシンプルに保ち、必要最小限の変更に留める。
    • 変更箇所を分かりやすくコメントするなど、メンテナンス性を考慮したコードを書く。

7. テーマ作者のサポート範囲

  • 親テーマの作者は、通常、親テーマ自体のサポートは行いますが、子テーマによるカスタマイズ部分のサポートは範囲外となることが多いです。子テーマで発生した問題は、基本的に自分で解決する必要があります。

これらの注意点を踏まえることで、WordPressの子テーマをより安全かつ効果的に活用することができます。

Information

ココナラにはWordPressに関連するさまざまなサービスがあります。以下のようなサービスを依頼することができます。

  • ホームページ作成(WordPress): プロのクリエイターに、集客に強い、デザイン重視など、ニーズに合わせたWordPressのホームページ作成を依頼できます。
  • ブログサイト制作・カスタマイズ: 初心者向けのブログ作成から、テーマやプラグインの設定・カスタマイズまで依頼できます。
  • Webサイト修正・カスタム・コンサル: WordPressサイトの修正や機能追加、レイアウト変更、コンサルティングなどを依頼できます。
  • LP制作(WordPress): WordPressを使ったランディングページ(LP)の制作や、修正・更新を依頼できます。
  • ECサイト制作(WordPress): WordPressを使ってECサイトやネットショップを構築、またはカスタマイズを依頼できます。
  • HTML・CSSコーディング: WordPress対応のコーディング代行を依頼できます。

これらのサービスは、予算やスケジュールに合わせて豊富な出品者の中から選ぶことができ、オンライン上で取引が完結します。

ココナラにおけるWordPress関連サービスの特徴は、多様なニーズに対応できる幅広さと、比較的安価な価格帯にあります。

Information

ザ・トール (THE THOR) は、集客と収益化に特化した、WordPressの有料テーマです。

デザイン性が高く サイトの印象を左右するデザイン設定が、色やレイアウトを細かくカスタマイズでき、初心者でもプロのような美しいサイトが作れます。

主な特徴と評判:

  • SEOに強い: 「究極のSEO最適化テーマ」と謳われており、HTML5+CSS3による最新のコーディング、構造化マークアップへの対応、高速表示技術、最先端のSEO機能など、検索エンジンからの評価を意識した設計がされています。SEO対策用のプラグインが不要になるほど、テーマ自体に多くのSEO対策が施されていると評判です。
  • デザイン性: プロ仕様のデザイナーズサイトが簡単に作れるほど、洗練された美しいデザインが特徴です。デモサイトからデザインスタイルをダウンロードして適用できる「デザイン着せ替え機能」も備わっており、初心者でもおしゃれなサイトを短時間で作成できます。
  • 機能性: サイトの集客・収益を強力に後押しする「集客・収益化支援システム」を搭載しており、CTA(行動喚起)エリアや記事内広告などの機能も充実しています。また、見出しデザイン53種類、アイコン498種類、ショートコード12種類など、記事を装飾する機能が豊富に用意されており、HTMLやCSSの知識がなくても簡単にカスタマイズできます。
  • 高速表示: 革新的な高速表示技術を多数装備しており、国内屈指の高速テーマとしても知られています。AMPやPWAにも対応しています。
  • 多機能性: 必要とされる多くの機能がテーマ内に搭載されているため、多数のプラグインを導入する必要がありません。これにより、サイトの動作を軽くし、表示速度の向上にも貢献します。
  • サポート: 購入後には操作マニュアルや質問サポートが提供されており、初心者でも安心して利用できる体制が整っています。
  • 複数サイト利用可能: 1度購入すれば、複数のサイトで利用できるライセンス形態を採用しているため、複数のサイトを運営する方にはメリットが大きいです。

WordPressテーマ「THE THOR(ザ・トール)」は、SEO対策、デザイン、機能性の3つを高いレベルで備えた高機能テーマです。多機能でプロのようなサイトを簡単に作れる反面、初心者には少し設定が複雑で、慣れるまでに時間がかかるという評価もあります。