WordPressテーマをカスタマイズするときに子テーマが重要な理由と、その作り方

この記事は約9分で読めます。

WordPressは、多くのウェブサイトの構築に利用される人気のあるプラットフォームです。人気の理由の一つとして、WordPressテーマを使うことで、ウェブサイトのデザインやレイアウトを容易にカスタマイズすることができることです。

しかし、テーマを直接変更すると、将来のアップデートや修正作業が困難になる可能性があります。

この問題を回避するために、WordPressでは「子テーマ」を使用することが推奨されています。本記事では、WordPressのテーマカスタマイズにおいて子テーマの重要性とメリットについて詳しく解説します。

この記事では次のような内容を解説しています
  • WordPressの「子テーマ」とは
  • WordPressのテーマをカスタマイズする時に「子テーマ」を使った方がいい理由
  • WordPressの「子テーマ」の作り方
・本コンテンツは一般的な情報の提供を目的としているため、弊社が関与していない取組みを含みます。
・記事内に使用されている写真・画像はイメージです。実際のプロダクトやサービスで提供される内容とは異なる場合があります。
・本記事の内容については、記事掲載時点での情報に基づく記載となります。そのため現行のものと異なる場合がございます。

なぜ子テーマを使った方がいいのか

様々なサイトに「WordPressのテーマをカスタマイズする時には子テーマを使いましょう」という注意書きがあります。

私は最初にこの注意書きを見て、「失敗しなければ子テーマなんかいらないのでは」と考えていました。

なぜ子テーマが必要なのか身をもって理解できたのは、既存のテーマでは必要な機能なく、カスタマイズにて機能追加せざるおえない状況になり、ネットからカスタマイズ方法を探し出し、時間を溶かした時間が自身のスキルへと昇華させたあたりでテーマのバージョンアップがあり、せっかくの苦労が水の泡をいう苦い経験をした時でした。

私と同じ間違いをしないで欲しいという思いから、その経験を記事にして、皆さんにお知らせします。

テーマ(親テーマ)を直接カスタマイズした場合

親テーマを直接カスタマイズすると、変更内容が親テーマのファイルに直接反映されます。しかし、テーマのアップデートがあると、カスタマイズした部分が上書きされてしまい、修正作業が失われます。

WordPress管理画面よりインストールされたテーマは/wp-content/themes/テーマ名となります。
このフォルダーのなかにはPHPファイルやCSSファイルなどテーマを構成しているファイルが格納されています。

WordPressテーマのアップデートがあると、ユーザーは管理画面より手動(または自動)でワンクリックでアップデートを行うことができます。このときWordPress上では前述のテーマを構成しているファイル群の上書きが行われます。
つまり、直接テーマを編集し書き換えている場合、アップデートで上書きされ元に戻ってしまいます。

従って、テーマをカスタマイズする際にはアップデートがあっても上書きされないようにしなければなりません。

では、アップデートしなければいいのでは?と考えるかと思いますが、テーマがアップデートされるときにはテーマの機能追加であったり不具合の訂正やセキュリティー対策など理由があってアップデートが配信されるわけですから、必ず実施すべきです。

そこで、アップデート毎にカスタマイズがリセットされないようにする仕組みが「子テーマ」です。

子テーマをカスタマイズした場合

子テーマを使ってカスタマイズを行うと、親テーマのファイルを変更することなく、子テーマ内で変更を行うことができます。

子テーマは親テーマの機能やデザインを引き継ぐように作られており、ユーザーがカスタマイズした部分だけが子テーマに適用され、カスタマイズされていない部分は親テーマが適用されます。

これにより、アップデートにより親テーマの構成ファイルが全て置き換わったとしてもサイト上では影響を受けることがありません。

このように、子テーマを使用すると、親テーマのアップデートや修正作業が容易になり、カスタマイズ内容が保持されます。

子テーマが重要な理由のまとめ

子テーマを使用することで、WordPressのテーマカスタマイズにおけるさまざまなメリットがあります。子テーマを利用することで、親テーマのアップデート時にカスタマイズ内容が保持され、修正作業が容易になります。
また、複数のサイトで同じ親テーマを使用している場合でも、各サイトの個別性を保ちながらカスタマイズを行うことができます。

子テーマは、柔軟性と拡張性を提供し、ウェブサイトのデザインや機能のカスタマイズを効果的に行うための重要なツールです。

子テーマの作成手順(テーマ開発元が子テーマを提供していない場合)

子テーマは、最低style.cssとfunctions.phpの2つのファイルからなります。 他にカスタマイズしたい場合は都度親テーマより必要ながいるを追加するとよいでしょう。

WordPressの子テーマを作るときの流れ
  • 【STEP1】
    子テーマのフォルダを作成

    WordPressのテーマディレクトリ内に新しいフォルダを作成し、子テーマの名前を付けます。

    例えば、「my-child-theme」という名前のフォルダを作成します。

  • 【STEP2】
    スタイルシートの作成

    先ほど作成したフォルダのなかに、style.cssというファイルを新たに作ってください。

  • 【STEP3】
    functions.phpの作成

    子テーマのフォルダ内に、functions.phpファイルを作成します

  • 【STEP4】
    子テーマをアップロード

子テーマのフォルダを作成

まず最初に、子テーマのためのフォルダを作成します。

WordPressのテーマディレクトリ内に新しいフォルダを作成し、子テーマの名前を付けます。

例えば、「my-child-theme」であったり「XXXXX-child」(XXXXXXは親テーマ名)という名前のフォルダを作成します。

スタイルシートの作成

子テーマのフォルダ内に、スタイルシートファイル(style.css)を作成します。このファイルは、子テーマの基本的な情報を含みます。

以下は、スタイルシートファイルの例です:

/*
 Theme Name: My Child Theme
 Theme URI: http://example.com/my-child-theme(テーマの公式サイトのURL。空欄可)
 Description: My custom child theme(テーマの説明。空欄可)
 Author: Your Name(テーマ作成者名。空欄可)
 Author URI: http://example.com(テーマ作成者のURL名。空欄可)
 Template: parent-theme-folder-name
 Version: 1.0
*/

/* カスタムスタイルの追加はここから */

必須の情報は、Theme Name(テーマ名)とTemplate(親テーマのフォルダ名)です。これにより、WordPressが子テーマと親テーマの関連性を認識します。他の項目の記載はなくてもかまいません
必須情報のみの場合のスタイルシートファイルの例は

/*
Theme Name: My Child Theme
Template: parent-theme-folder-name
*/

/* カスタムスタイルの追加はここから */

となります。

Functions.phpの作成

子テーマのフォルダ内に、functions.phpファイルを作成します。
このファイルは、追加のカスタム機能やフックを定義するために使用されます。

以下は、functions.phpファイルの例です

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

この例では、親テーマのスタイルシートと子テーマのスタイルシートを正しく読み込むために、親テーマと子テーマの関連付けを行っています。

子テーマのアクティベーション

作成した子テーマのフォルダをWordPressのテーマディレクトリにアップロードします。

WordPressの管理画面で、子テーマを有効化するために「外観」→「テーマ」を選択します。そこで、新しく作成しアップロードした子テーマを見つけて有効化します。

子テーマの作成手順(テーマ開発元が子テーマを提供している場合)

有名なテーマの場合テーマの開発元が子テーマを提供していることがあります。

以前お勧めテーマにてコーポレートサイトに最適と紹介した「Lightning」の場合は開発元Vektor,Inc.が提供するベクトレ内のLightning カスタマイズ  カスタマイズの準備 1 : Lightningの子テーマの準備にサンプルデータがあります。

WordPressの子テーマをアップロードするときの流れ
  • 【STEP1】
    サンプルファイルのダウンロード

  • 【STEP2】
    ダウンロードしたファイルのアップロード
  • 【STEP3】
    テーマの有効化

子テーマのサンプルファイルのダウンロード

子テーマは親テーマと異なり、WordPressの管理画面からダウンロード出来ません。

前述のサイトからからLightningの子テーマをダウンロード出来ます。

ダウンロードしたファイルのアップロード

続いてダウンロードした子テーマをWordPressにアップロードします。

外観」→「テーマ」→「新規追加」→「テーマをアップロード」でアップロードします。

先ほどダウンロードしたzipファイルを選択し、「今すぐインストール」を押下してください。

テーマの有効化

インストール済みテーマの一覧にアップロードした子テーマが表示されますので「有効化」を押下。

これで、サイトのテーマに子テーマが適用されました。

以上で子テーマの導入は完了です。

子テーマでカスタマイズするには

前述にてアップロードしました子テーマのスタイルシートやfunctions.phpファイルを編集することで、カスタマイズを行うことができます。

子テーマ内のファイルの変更は、親テーマに影響を与えず、将来の親テーマのアップデートによって上書きされることはありません。

親テーマのファイルを誤って修正しないよう。必ず子テーマフォルダー配下のファイルであることを確認してください。

子テーマでcssを修正する方法

外観」→「テーマファイルエディター」→「(編集するテーマを選択)を子テーマに変更」→「スタイルシート」からサイトを修正することが出来ます。

まとめ

子テーマを作成することで、WordPressのテーマカスタマイズを安全かつ柔軟に行うことができます。フォルダの作成からスタイルシートとfunctions.phpファイルの作成、そして子テーマのアクティベーションまで、ステップバイステップで子テーマの作成手順を解説しました。これにより、親テーマの保護とカスタマイズの自由を両立させることができます。子テーマを活用して、あなたのWordPressサイトをオリジナリティ溢れるデザインにカスタマイズしましょう。

この記事について詳しく知りたい場合は
【無料相談】受付中
会社の課題を発見したい方、いませんか? 北海道東部地区を中心に活動しています。 これまでの経験から、ビジネス課題について一緒になって考え、課題解決に向けて併走させていただきます。 些細なご相談でも構いません。知りたいこと、やって欲しいこと相談内容についてお聞かせください。
WordPress
スポンサーリンク
TAKASYをフォローする
WADA JIMUKI, Y.K. Online Magazine
タイトルとURLをコピーしました