インターネット
 Computer >> コンピューター >  >> ネットワーキング >> インターネット

WordPressの子テーマとは?作るべき理由と初心者向けの簡単な作り方

WordPressの子テーマとは?作るべき理由と初心者向けの簡単な作り方

WordPressは全世界のウェブサイトの約23%で利用されているCMSであり、多くのユーザーが利用中のテーマを何らかの形でカスタマイズしたいと考えています。テーマファイルを直接編集する方法もありますが、これには大きな落とし穴があります。テーマを更新すると、それまでの修正内容がすべて失われてしまうのです。そこで活躍するのが「子テーマ(チャイルドテーマ)」です。

子テーマとは?

子テーマとは、親テーマの機能やデザイン(スタイル)を受け継ぐカスタムテーマのことです。子テーマを作成しておけば、親テーマ本体に手を加えることなく自由にカスタマイズでき、しかも親テーマを更新しても変更内容は消えません。

子テーマの基本がわかったところで、実際の作成方法と押さえておきたいベストプラクティスを見ていきましょう。

子テーマの作り方:手動で作成する手順

このチュートリアルでは標準テーマ「Twenty Fifteen」を使用しますが、手順はどのテーマでも共通です。

1. 子テーマ用フォルダを作成する

まず、FTPソフトやサーバーのファイルマネージャーで「wp-content/themes」ディレクトリに移動し、子テーマ用の新規フォルダを作成します。ここでは分かりやすいように「twentyfifteen-child」という名前を付けます。

2. style.css を作成する

次に、作成したフォルダの中に「style.css」ファイルを作り、以下のヘッダー情報を記述します。

/*
Theme Name:     Twenty Fifteen Child
Theme URI:      https://www.maketecheasier.com
Description:    Twenty Fifteen Child
Author:         Ayo Isaiah
URI:            https://www.maketecheasier.com/author/ayoisaiah
Template:       twentyfifteen
Version:        1.0.0
*/

WordPressの子テーマとは?作るべき理由と初心者向けの簡単な作り方

テーマ名、URI、説明、作者名は自分の環境に合わせて自由に書き換えて構いません。ただし「Template」の部分だけは、必ず親テーマのディレクトリ名を指定してください。

今回の例では親テーマのディレクトリ名が「twentyfifteen」なので、Templateも「twentyfifteen」とします。別のテーマを使う場合はこの値を必ず変更してください。誤っていると子テーマが正常に動作しません。

3. functions.php で親テーマのスタイルを読み込む

続いて、親テーマのスタイルシートを正しく読み込めるように設定します。一部の解説サイトでは「@import」を使う方法が紹介されていますが、ページ表示速度に悪影響があるため、現在は非推奨の手法です。避けましょう。

推奨されるのは、子テーマフォルダに「functions.php」ファイルを作成し、以下のコードを記述する方法です。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

WordPressの子テーマとは?作るべき理由と初心者向けの簡単な作り方

ポイントは、ハンドル名「parent-style」の部分を「親テーマのディレクトリ名+-css」に置き換えることです。この例では「twentyfifteen-css」となります。

以上で子テーマの準備は完了です。

4. 子テーマを有効化する

有効化の手順は通常のテーマとまったく同じです。WordPressの管理画面から「外観 → テーマ」に移動し、子テーマをクリックして有効化するだけでOKです。

プラグインで子テーマを自動作成する方法

手作業の手順を省略したい方には、無料プラグインの利用が便利です。「One-Click Child Theme」というプラグインを使えば、ボタンをクリックするだけで子テーマを自動生成できます。

使い方は簡単です。プラグインをインストールして有効化したら、管理画面の「外観 → Child Theme」に移動し、フォームに子テーマの情報を入力します。あとは「Create Child」ボタンを押すだけで、子テーマの作成と有効化が同時に完了します。

WordPressの子テーマとは?作るべき理由と初心者向けの簡単な作り方

子テーマでカスタマイズを行う

子テーマを有効化したら、サイトを表示して見た目を確認してみましょう。正しく設定できていれば、親テーマとまったく同じデザインで表示されるはずです。

ここからが本番です。子テーマの「style.css」に独自のCSSを追記することで、親テーマのスタイルを上書きできます。子テーマで宣言したスタイルは親テーマのスタイルよりも優先されます。これで、せっかくのカスタマイズを失う心配なく、安心して親テーマを更新できるようになります。

また、サイトに新しい機能を追加したい場合は、子テーマの「functions.php」に関数を記述します。子テーマのfunctions.phpは、親テーマのfunctions.phpと一緒に読み込まれる仕組みになっています。

WordPressの子テーマとは?作るべき理由と初心者向けの簡単な作り方

その他のテンプレートファイルの扱い

functions.php以外のPHPテンプレートファイル(header.phpやsingle.phpなど)を編集したい場合は、そのファイルを子テーマのフォルダにコピーしてから編集します。

これは重要なポイントです。functions.phpとは異なり、その他のテンプレートファイルは子テーマ側にあるものが優先され、親テーマの同名ファイルは無視されます。そのため、元のファイルを親テーマと同じ階層構造になるように子テーマ内へ配置しないと、正しく動作しないことがあります。

まとめ

子テーマが必要な理由と具体的な作成方法を理解すれば、もう親テーマのファイルを直接編集する必要はありません。「テーマ更新したらデザインが崩れた」「カスタマイズが全部消えた」という悲劇を防ぐためにも、今後のカスタマイズは必ず子テーマで行いましょう。

さらに詳しく知りたい方は、下のコメント欄からお気軽にご質問ください。また、公式ドキュメント「WordPress Developer Resources:Child Themes」にも詳しい情報が掲載されています。

  1. Firefoxを使うべき理由 ― 選択の自由とブラウザ競争の未来

    私はおよそ15年間、Firefoxを使い続けてきました。その間、Firefoxは美しいプロジェクトへと成長し、素晴らしい拡張機能の宝庫となりました。しかし、その後は競合他社と同じ道を辿ったことで、かつて持っていた核心的な優位性を失いながら、徐々に存在感を薄めていきました。それでもなお、Firefoxは私のメインブラウザであり続けています。そして私に尋ねるなら――あなたもFirefoxをメインブラウザにすべきです。 この記事では、その理由をお話しします。メモリ消費量や起動時間のわずかな差、スマートフォンでの見た目の美しさといった日常的な話ではありません。重要なのは「選択」、選択の自由、そして競争

  2. Windows 11の隠れた便利機能15選!今すぐ使えるヒントと設定を徹底解説

    Windows 11は対応デバイス向けに無料アップグレードとして提供されており、数多くの新機能と改善が含まれています。再デザインされたスタートメニューとタスクバー、Androidアプリに対応した強化されたMicrosoft Store、統合されたMicrosoft Teams、スナップレイアウト、ウィジェットなど、目立つ新機能は多いものの、Redmond(マイクロソフト本社)が公式に発表した大きなニュース以外にも、一見すると気づきにくい小さな変更点がたくさん隠れています。この記事では、知っておくべきWindows 11の隠れた機能を厳選してご紹介します。 スタートメニューを左側に戻す方法 W