既存のテーマを色々とカスタマイズをしたのだけど、テーマを最新バージョンにアップグレードしたら、カスタマイズした内容が消えてしまったという苦い経験はありませんか？
・既存テーマに直接コードを記述した。
・既存テーマのコードを変更した。
このように既存テーマのファイルを直接編集している場合、親テーマをバージョンアップすると、記述したコードや改変したコードは全てリセット（初期化）されてしまいます。
私自身、WordPressを使い始めた頃は、テーマをアップグレードでガッツリと行っていたカスタマイズが全て消え去ってしまったという辛い経験をしています。
もしも、既存テーマを直接カスタマイズしているのなら、今すぐにでもカスタマイズを止めてください。そのままカスタマイズしても、テーマのアップグレードで全てが水泡に帰してしまいます。
WordPressのテーマをカスタマイズする場合、子テーマを作成してカスタマイズを行いましょう。
今回は、子テーマの解説と子テーマの作り方をご紹介します。
子テーマとは？
「子テーマ」とは、「親テーマ」の機能やスタイルを継承した上でカスタマイズしていくためのテーマです。
先ほども触れましたが、親テーマを直接カスタマイズすると、親テーマをバージョンアップしたとき、カスタマイズした内容が初期化されてしまいます。
これは、基本的にどのテーマでも同じです。
カスタマイズの初期化を防ぐためには、子テーマを用意してカスタマイズは子テーマに行います。
親テーマのバージョンアップは子テーマに影響を及ぼしません。
つまり、子テーマに施したカスタマイズは、親テーマをバージョンアップしても初期化されないのです。
テーマをカスタマイズする場合は、必ず子テーマを用意して、子テーマにカスタマイズを施すようにしましょう。
WordPressの子テーマを10分で作る手順
ここでは、子テーマの作り方を解説していきます。
子テーマは、親となるテーマを元に作成する必要があります。
親テーマAには、親テーマAの子テーマを作らなければなりません。
子テーマを使いまわすことはできませんので注意が必要です。
以下で作成する各種ファイルは、一括でダウンロードできるようにしておきました。
⇒ 子テーマのテンプレートをダウンロードする
作成が面倒な方は、上記から子テーマのテンプレートをダウンロードして使ってください。
ダウンロードしたファイルは、親テーマに合わせて編集しなければなりません。
詳しくは、以下の解説をご覧ください。
手順１：子テーマのフォルダを作る
まずは、PCのデスクトップに空のフォルダを作成しましょう。
フォルダ名は何でもかまいません。
【親テーマ名-child】あたりにしておくと、後々の管理が楽です。
フォルダを作るのが面倒な方は、子テーマのテンプレートをダウンロードしてお使いください。
⇒ 子テーマのテンプレートをダウンロードする
ダウンロードした子テーマのフォルダ名は変更してください。
手順２：「functions.php」を作る
先ほど作成したフォルダの中に【functions.php】を作成します。
【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')
);
}
?>【PHPファイル】の作り方がわからない場合、子テーマのテンプレートをダウンロードしてお使いください。
手順３：「style.css」を作る
先ほど作成したフォルダの中に【style.css】を作成します。
【style.css】を作成したら、以下のコードを記述してください。
/*
Theme Name: ここに子テーマの名前
Template: ここに親テーマの名前
Version: ここに親テーマの現バージョン
*/記述したら、上記の赤文字部分を親テーマに合わせて編集します。
【ここに子テーマの名前】部分は、先ほど作成したフォルダーの名前に書き換えてください。
【ここに親テーマの名前】部分は、親テーマのフォルダー名に書き換えてください。
親テーマのフォルダ名は、FTPでサーバーに接続して確認できます。
Wordpressを設置している階層から、以下のように進んでください。
【wp-content】⇒【themes】
すると、インストールされているテーマのフォルダが一覧で表示されます。
ここで現在使っているテーマのフォルダー名を確認することができます。
【ここに親テーマの現バージョン】部分は、親テーマのバージョンに書き換えてください。
親テーマのバージョンは、親テーマの【style.css】で確認することができます。
【style.css】の上部に【Version:】と書かれた部分があります。
その右側に記述されている数値がバージョンです（例：1.02）。
この数値を【ここに親テーマの現バージョン】部分に書き換えます。
最後に【style.css】を保存して完了です。
【style.css】の作り方がわからない場合、子テーマのテンプレートをダウンロードしてお使いください。
手順４：screenshotのコピー
管理画面【外観】⇒【テーマ】と進んでください。
ここでは、インストールされているテーマの一覧が表示されます。
上記はテーマ一覧の中にあるひとつのテーマを表しています。
赤枠部分を見てください。
そのテーマのスクリーンショットが表示されています。
子テーマの場合、デフォルトのままではスクリーンショットが表示されません。
見栄えが気になる方は、親テーマのスクリーンショットが表示されるようにしておきましょう。
親テーマのTOP階層をご覧ください（FTPなどでアクセス）。
いろいろなファイルがある中に、名前が【screenshot】の画像ファイルがあるかと思います。
テーマによって異なるのですが、一般的には【screenshot】がありあます。
この【screenshot】を子テーマのフォルダの中にコピーします。
これで、テーマ一覧の子テーマには、親テーマのスクリーンショットが表示されるようになりす。
手順５：子テーマをサーバーにアップロードする
手順3までで、子テーマの作成は完了です。
作成した子テーマをサーバーにアップロードしましょう。
アップロードする方法は2つあります。
FTP経由でサーバーにアップロードする
一つ目は、FTP経由でサーバーにアップロードする方法です。
FTPでサーバーにアクセスし、以下のように進んでください。
【wp-content】⇒【themes】
【wp-content】は、Wordpressを設置している階層にあります。
【themes】の中に作成した子テーマをアップロードして作業は完了です。
管理画面からアップロードする
二つ目は、WPの管理画面からアップロードする方法です。
まず、作成した子テーマのフォルダをZIP形式で圧縮します。
ZIP形式の圧縮方法に関しましては、以下のコンテンツを参考にしてください。
⇒ ファイルを zip 圧縮および解凍する
【ファイルまたはフォルダーを zip 圧縮 (圧縮) するには】の部分が参考になります。
ZIP形式に圧縮できたら、管理画面の以下のページにアクセスします。
【外観】⇒【テーマ】
上記赤枠部分の【新規追加】をクリックします。
上記赤枠部分の【テーマのアップロード】をクリックします。
こちらから、先ほどZIP形式で圧縮した子テーマをアップロードしてください。
手順６：子テーマを有効化する
子テーマのアップロードが完了したら、最後に子テーマを有効化します。
管理画面の以下のページにアクセスします。
【外観】⇒【テーマ】
子テーマのアップロードが正常に完了していれば、テーマ一覧の中に子テーマが表示されています。こちらの子テーマを有効化してやりましょう。
手順６：子テーマが正常に反映されたか確認する
最後に子テーマが正常に繫栄されているか確認します。
管理画面【外観】⇒【テーマ】と進んでください。
一番左上のテーマが現在選択されているテーマです。
子テーマが選択されているか確認してください。
もう一箇所確認しておきます。
管理画面【外観】⇒【テーマエディター】と進んでください。
ページの右上をご覧ください。
上記赤枠部分に子テーマの【ここに子テーマの名前】部分で設定した子テーマの名前が表示されているか確認してください。
表示されていればOKです。
最後にサイトを表示してみましょう。
サイトに崩れやエラーなどの不具合が生じていないか確認しましょう。
特に不具合が生じていないようであれば、子テーマは問題なく反映されています。
お疲れ様でした。
子テーマがうまく反映されないときの解決策
ここでは、子テーマがうまく反映されないときの解決策をお伝えいたします。
子テーマが反映されない要因はいろいろとあります。
今回は最も遭遇する可能性が高いものをご紹介。
子テーマをアップロードしたのに、【外観】⇒【テーマ】から子テーマを選択できない場合があります。
上記の画像を見てください。
子テーマが選択できない場合、【テーマ】ページの下部に何かしら表記があります。
上記画像は、子テーマの【style.css】に記述した親テーマの名前が間違っているパターンです。
親テーマの名前が間違っていると、子テーマをどのテーマと結び付けて良いのか、WordPressは判断することができません。
上記の画像のようなエラーが表示される場合、子テーマの【style.css】に記述した親テーマの名前が間違っていないか、確認をしてみてください。
親テーマの名前を正しく修正すれば、子テーマが選択できるようになります。
前述しましたが、親テーマの名前は、テーマフォルダーのフォルダー名を記述してください。
この他、子テーマが正常に反映されない場合は、お問い合わせからご相談ください。
まとめ
WordPressの子テーマを7分で作成する方法をご紹介しました。
子テーマを作るのは大変な作業のように思えるかもしれません。
実際には、以下の手順だけで簡単に行えます。
- 子テーマのテンプレートをダウンロードする
- フォルダ名を変更する
- style.cssの中身を3箇所修正する
- 子テーマをアップロードする
- 子テーマを有効化する
上記のテンプレートの編集方法は、今回のコンテンツで解説しています。
【WordPress】カテゴリーページのURLから【category】を消す３つの方法
【WordPress】特定のプラグインが動作するようにREST APIを無効化する方法
コメントを残す