ほぼコピペでOK!WordPress子テーマの作り方 その手順をわかりやすく解説

WordPressの見出しデザインやフォントなど、見た目をカスタマイズするのにCSS(スタイルシート)を利用しますが、テーマのCSSファイルに直接記述する方法はちょっとマズイんですね。

テーマを最新版にアップデートしたときCSSの記述内容が消滅し、カスタマイズが解除されてしまうからです。アップデートの際に、新しいCSSファイルで上書きされてしまうのが原因です。

「CSSの記述が消えるのを防ぎたい」「自分でカスタマイズしたCSSをずっと維持したい」という願いを叶えてくれるのが、子テーマです。

子テーマを使えばアップデートによる上書きの影響を受けずに済み、デザインがそのまま残ります。

専用の子テーマが存在するならそれを使うだけ

WordPressのテーマの中には、専用の子テーマを用意してくれている制作者さんもいます。テーマの公式サイトなどで配布しているので、チェックしてみてください。

もしそのようなテーマを使っているなら、自分で子テーマを作る必要はありません。専用の子テーマをダウンロードして、CSSをカスタマイズするだけで解決します。

専用の子テーマが用意されていないテーマを使っている場合に、以下の作成手順で子テーマを作ってみましょう。難しい作業無し、ほぼコピー&ペーストで終わります。知識がない人でも簡単に作れますよ!

スポンサーリンク

WordPress子テーマ作成の手順

WordPress公式テーマの「Twenty Nineteen」を例に作ってみます。

元からある「Twenty Nineteen」を親テーマとします。これから作るものは「親テーマTwenty Nineteenの子テーマ」という風に考えてください。

WordPressのテーマが格納されているフォルダを確認

レンタルサーバーのファイルマネージャなどで、使用中のWordPressフォルダを探します。フォルダ内から「wp-content」→「themes」に移動し、開いてください。

子テーマを作りたいフォルダを見つけましょう。今回はTwenty Nineteenを親テーマにしますので、themesフォルダ内にある「twentynineteen」フォルダが該当します。

WordPress テーマフォルダ

この「親テーマとなるフォルダ名」を覚えておいてください。

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

ここから子テーマを作成しますが、レンタルサーバーの本番環境で作業するとちょっとしたミスで不具合が起こる可能性があるため、おすすめしません。

ローカル環境(パソコン)で子テーマの作成作業を行い、完成したらフォルダごと本番環境にアップロードする手順が安全です。

子テーマのフォルダを新しく作ります。パソコンのフォルダやファイルを作りやすい、適当な場所で作業してみましょう。

レンタルサーバーのファイルマネージャで見つけた親テーマのフォルダ名を参考に、「-child」を付け足したものをフォルダ名にします。

今回の例だと、「twentynineteen-child」という名の子テーマフォルダを新しく作る感じですね。

  • 親テーマのフォルダ名:「twentynineteen」
  • 子テーマのフォルダ名:「twentynineteen-child」

作業の際に、レンタルサーバー側の親テーマのフォルダ名を書き換えてはダメです!うっかり名前を変えてしまわないよう、十分注意してください。

子テーマフォルダの「-child」の部分はこの名称でなくても構いませんが、WordPress公式が推奨する書き方なので、深く考えずそのとおりに作成するのが良さそうです。

「style.css」と「functions.php」の2ファイルを新規作成

メモ帳などのテキストエディタを使い、「style.css」と「functions.php」という2つのファイルを新しく作ってください。現時点では空の内容で構いません。

文字化け防止用に、ファイルの文字コード(エンコード)は「UTF-8」にしておくのが無難だと思います。

Windows10付属のメモ帳を使う場合だと、普通に保存するだけでは「ANSI」という文字コードが適用されます。UTF-8にするなら、「名前をつけて保存」の画面で文字コードを変更してから保存しましょう。

Windows10 メモ帳 文字コード

文字コード(エンコード)を変えられない、UTF-8にできないテキストエディタしか持っていないのなら、別のソフトを使いましょう。自分はフリーソフトの「Mery」を使っています。

作成した2つのファイルは、twentynineteen-childフォルダに入れてください。

WordPress 子テーマフォルダ

【準備】子テーマのstyle.cssに記述する内容

twentynineteen-childのフォルダ内に先程作ったstyle.cssを開き、冒頭部分に以下の文字を入力します。

/*
Theme Name: Twenty Nineteen Child
Description: 「Twenty Nineteen」の子テーマとして作成しました。
Template: twentynineteen
Author: 自分
Version: 1.0.0
*/

先頭と末尾の「/*」と「*/」の記号も、忘れずに記述しましょう。

項目についてはもう少し細かくあるんですが、個人で使うものなら上の基本項目だけで十分かと思います。最低でも「Theme Name」と「Template」の2つは、必ず記述してください

各項目の説明は以下の通り。

Theme Name:
子テーマの名前。WordPress管理画面に表示される。
Description:
子テーマの説明文。WordPress管理画面に表示される。
Template:
元になる親テーマの「フォルダ名」を記述。
Author:
子テーマを作成した人の名前。
Version:
子テーマのバージョン。

「Theme Name」と「Description」は、親テーマとの関連性や他のテーマと区別するため、わかりやすい内容にしましょう。

「Template」には、themesフォルダ内にある親テーマのフォルダ名をそっくりそのまま入力してください。アレンジしてはダメです。

「Author」は、ぱっと見で理解できれば本名でなくても構いません。「(ブログ名)管理人」みたいのでも大丈夫。

「Version」は、子テーマの更新状況を把握するための数字です。わかりやすければ何でも構いません。

ここまでやったら、style.cssの準備は完了です。

【準備】子テーマのfunctions.phpに記述する内容

子テーマ「twentynineteen-child」のフォルダ内に作った、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' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

これで完成です。

WordPressに子テーマをアップロード

作成した子テーマフォルダを圧縮します。

Windowsならtwentynineteen-childフォルダにカーソルを合わせて右クリックし、「送る」→「圧縮(zip形式)フォルダー」を選べば自動保存されます。

本番環境のWordPress管理画面を開きます。

外観にあるテーマの「新規追加」から「テーマのアップロード」に進み、圧縮した子テーマフォルダを選択したら「今すぐインストール」のボタンを押します。

WordPress テーマをアップロード

これでテーマ一覧に子テーマ「Twenty Nineteen Child」が追加されます。

WordPress テーマ一覧

子テーマの詳細を見てみましょう。style.cssに入力した内容が反映されているはずです。

WordPress テーマの詳細

一覧にある子テーマを有効化すれば、子テーマのCSSファイル内のカスタマイズが適用されます。今の段階だと何もカスタマイズしていないので、親テーマの内容がそのまま反映されます。

WordPressの管理画面からでなく、「FTPソフト」もしくは「レンタルサーバーのファイルマネージャ」経由で、子テーマをアップロードする方法もあります。

アップロードの際には親テーマフォルダがある場所と同じ階層(themesフォルダ内)に、子テーマフォルダをアップロードしてください。このやり方の場合、子テーマフォルダの圧縮作業は不要です。

子テーマの利用方法と注意点

CSSをカスタマイズするには、子テーマのstyle.cssに内容を追加するだけです。

WordPress 子テーマのstyle.css

注意点として、子テーマの作成作業で入力した内容を絶対に消さないでください!冒頭の内容の下に追加する形で、カスタマイズ用のCSSを記述しましょう。

WordPressの仕組みについてあまり詳しくない人の場合、CSSだけでカスタマイズするのが良いと思います。functions.phpには手を加えず、放置しておくのが安全です。理解している人のみ、カスタマイズしてください。

子テーマがあれば安全にカスタマイズ可能

style.cssの場合、まず親テーマのものが反映され、次に子テーマでカスタマイズしたCSSが反映される仕組みとなっています。

CSSは後のものほど優先されるので、親テーマのCSSで青色にした部分を子テーマのCSSで赤色の見た目に変える、なんてことができるんですね。

子テーマのCSSでカスタマイズしても、親テーマのCSSは元のまま維持されます。子テーマのCSSの書き方を失敗したり気に入らなかったりして消しても、元の親テーマのデザインに戻るだけです。

この仕組みのおかげで、WordPressのCSSを安全にカスタマイズできます。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座