WordPressで利用中のテーマに子テーマがなくて困っていませんか?
WordPressでデザインなどのカスタマイズをしようと思ったら、親テーマではなく子テーマを使うのが一般的。
なぜなら、親テーマを有効化して使用していると、テーマのバージョンアップ時にファイルが上書きされてしまい、せっかくカスタマイズしたCSSやHTMLがリセットされてしまうからです。
また、子テーマを利用していれば、万が一カスタマイズ中に重要なコードを削除してしまったときも、編集されていない親テーマが残っているので保険になります。
逆に言えば、親テーマを使用してカスタマイズした場合、テーマをアップデートできなくなったり、失敗して元に戻せなくなってしまうリスクがあるので注意してください。
そんなWordPressのカスタマイズには重要な子テーマですが、最初から用意されているテーマもあれば、自分で作成しなければならないテーマもあります。
ここでは、現在使用しているテーマを複製(コピー)して子テーマを作成する方法を御紹介。子テーマがなくて困っている方は参考してください。
親テーマからコピーして子テーマを作成する方法は2つ!
親テーマからコピーして子テーマを作成するには、
- プラグインを利用してコピーする
- 自分でコピーして子テーマを作成する
といった2つの方法があります。
プラグインを利用するほうが圧倒的に簡単なので、初心者の方にはプラグインがおすすめです。
プラグインのインストールさえ終われば、あとはボタンを数回クリックするだけで子テーマが作成できてしまうでしょう。
どうしてもプラグインを使用したくないという場合は子テーマを自作してください。
プラグインを使って子テーマを複製(コピー)する手順
まずは、簡単なプラグインを使用する方法から御紹介します。使用するプラグインは「Child Theme Configurator」というプラグインです。
WordPressのプラグイン追加ページから「Child Theme Configurator」を検索し、イントールした後そのまま有効化してください。
プラグインを有効化すると、「ツール」という項目の中に「Child Themes」が追加されているので開きます。
英語なので少し分かりにくいですが、上の画像にある①にチェックを入れ、②で子テーマを作成したいテーマを選択したら③の「Analyze」をクリックしてください。
すると、④~⑨までの項目が現れますが、子テーマを初めて作成する場合はデフォルトのままでOKです。
ただし、既に親テーマをいろいろとカスタマイズしている場合は⑧にチェックをいれましょう。(無料版では全てを引き継げない場合もあるようです。)
赤枠の部分にチェックが入っているか確認し、一番下の「Create New Child Theme」を押してください。
子テーマの作成に成功するとこのような表示がでるはずです。
子テーマが作成できたらテーマ一覧に子テーマがあるか確認します。
子テーマが確認出来たら有効化しましょう。ライブプレビューを使うと、テーマを有効化した後の表示を事前に確認できます。
もし、既にカスタマイズした箇所が反映されていなかったり、style.cssとfunction.php以外にコピーしたい箇所がある場合は、子テーマ作成後、プラグインの設定画面から個別にコピーできます。
設定画面の「Files」というタブを開き、コピーしたい箇所を選択し、「Copy Selected to Child Theme」をクリックすると子テーマに反映されるはずです。
親テーマからのコピーもボタン1つでできてしまうので、本当に便利なプラグインですね!
自分でコピーして子テーマを作成する手順
プラグインを使用したくない場合は、自分で子テーマを作成することもできます。
プラグインを使う方法と比較すればかなり難易度は上がるので、よくわからなければプラグインを使ったほうが確実です。
また、子テーマを自作する場合はテキストエディタが必要になりますが、Windowsにデフォルトで入っている「メモ帳」は文字コードや改行コードの変更ができないのでおすすめできません。
他にも無料で利用できるテキストエディタはいろいろあるので、事前にインストールしておきましょう。
有名なのは「サクラエディタ」や「TeraPad」など。私は「TeraPad」を使用しています。
まずは子テーマ用のフォルダーを作成して下さい。フォルダー名は「親テーマの名前-child」が分かりやすいと思います。
次に、以下の内容をコピーしてテキストエディタに貼り付けてください。
<?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')
);
}
?>
「functions.php」は特殊なテーマでなければ基本的には同じで問題ないため、貼り付けたら特に修正は必要ありません。
「functions.php」という名前をつけて保存し、作成した子テーマのフォルダー内に入れてください。
次に以下の内容をコピーしてテキストエディタに貼り付けてください。
/*
Theme Name:Twenty Nineteen-child
Template:twentynineteen
Version:2.1
*/
「functions.php」とは違い、使用しているテーマに合わせて以下のように変更が必要です。
- Theme Name…子テーマの名前(作成したフォルダー名)
- Template…親テーマの名前(サーバー上のフォルダー名)
- Version…親テーマのバージョン
「Template」の部分は実際にサーバー上にあるテーマフォルダーの名前になります。
テーマのフォルダーがどこにあるかはサーバーにもよって若干違いますが、「wp-content」→「themes」というところにあるはずです。
FTPツールやサーバーのファイルマネージャーを利用し、親テーマのフォルダー名を確認してください。
余裕があれば親テーマの中にある「screenshot」という画像ファイル(jpgやpng)をダウンロードして子テーマのフォルダーにいれておきましょう。子テーマにイメージ画像が反映されます。
バージョンについては、WordPressの管理画面から「外観」→「テーマエディター」へと進み、親テーマの「style.css」を確認してください。
テキストエディタで作成出来たら、「style.css」も同じように作成した子テーマのフォルダーに入れましょう。
作成した子テーマのフォルダーを圧縮してzipファイルにします。
テーマのアップロード画面から作成した子テーマを選択し、「今すぐインストール」をクリック。
作成した子テーマが正常に機能している場合、親テーマの子テーマとして認識されるはずです。
テーマ一覧画面に子テーマが表示されていれば完了です。有効化する前にライブプレビューなどで確認しましょう。
もし、アップロード方法が良くわからなければ、下記の記事も参考にしてください。
まとめ
WordPressテーマをコピーして子テーマを作るには、
- プラグインを使用して作成する
- 自作でフォルダーを作成する
という2つの方法があります。
プラグインで作成する方法は選択してボタンをクリックするだけで子テーマができるので、初心者の方にもおすすめの方法です。
一方、自作でフォルダーを作成する方法は、PHPやCSSの記述を間違えると子テーマが機能しなかったりするので、ある程度知識のある方以外はおすすめできません。
テーマによっては複数のCSSを読み込んでいるものもあり、そのようなテーマは「style.css」や「functions.php」をさらに編集する必要がある点にも注意しましょう。
ちなみに、人気の無料テーマでは自分で子テーマを作成しなくても、最初から用意されている場合が殆どです。
無料でも有料テーマ並みに多機能なテーマもあるので、興味があれば下記の記事も参考にしてください。