WordPressの子テーマの作り方を写真付きで解説!【ファイル一式付き】

・WordPressの子テーマの作り方を知りたいな!
・子テーマを使って、ブログやホームページをカスタマイズする際の注意点を知りたいな!
・子テーマ作成に必要なファイル一式がほしいな!


こんな悩みを解決できる記事を書きました!


【この記事の信頼性】
当ブログ(RENBLOG)の編集長である僕は、これまでホームページ制作に約40サイト以上、携わらせて頂いております。

また、当ブログ(RENBLOG)は、記事数は少ないものの、数ページ10以内を獲得している為、割と信頼できるのではと思います。

WordPressの子テーマの作り方を5つのステップで解説

子テーマ用のフォルダを作成する『親テーマフォルダ名+child』

まずはじめに、『親テーマフォルダ名+child』で、新規フォルダを作成します。

今回は、バズ部さんの、『XeoryBase』の無料テーマをもとに、子テーマ作成を進めていきいます。


親テーマのフォルダ名』xeory_baseですので、子テーマのフォルダ名は、『xeory_base-child』にしております。

 



ポイント2点

1.子テーマのフォルダ名は、自由に決められますので、『親テーマのフォルダ名+child』にこだわる必要は無いです。
2.WordPress Codexでは、子テーマのフォルダ名の最後に、 『-child』 を付けることが推奨されます。


管理のしやすさの観点から、子テーマのフォルダ名は、『親テーマのフォルダ名+child』が良いかと。


親テーマのフォルダー名は、レンタルサーバー内を覗いて、確認ください。
(『/wp-content/themes/ 』の中にあると思います。)

style.cssを作成する

子テーマ用のフォルダ内に、style.cssを作成し、まずは下記のコードをコピペしてください。

WordPress Codexでは、『Version: 』や『Author: 』などの記載もありますが、最低限、下記の2つで問題なしです。

@charset "UTF-8";

/*
Theme Name:
Template:
*/

『Theme Name:』には、子テーマのフォルダ名を記載

『Template:』には、親テーマのフォルダ名を記載


親テーマのフォルダ名は、レンタルサーバー内を覗いて、確認ください。
(『/wp-content/themes/ 』の中にあると思います。)


今回の、『XeoryBase』の子テーマですと、下記のようになります。

@charset "UTF-8";

/*
Theme Name: xeory_base-child
Template: xeory_base
*/

functions.phpを作成する

子テーマ用のフォルダ内に、functions.phpを作成し、下記のコードをコピペしてください。

コードの書き換えは必要なしです。

<?php

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


現状では、このように、なっているかと思います。

WordPressにアップロードする

WordPressへのアップロード方法を2通り説明します。

WordPressから簡単にアップする方法

1.まずは、子テーマのフォルダをWordPressにアップロードするためにZip化(圧縮)します。


2.WordPressの管理画面より、『外観』→『テーマ』をクリック

3.画面上部の『新規追加』をクリック

4.画面上部の『テーマのアップロード』をクリック

5.Zip化した子テーマを選択→開くをクリック

6.『今すぐインストールをクリック』

7.『有効化』をクリック

次のステップで、『子テーマを有効化する』を説明しますが、ここで、有効化しても問題なしです。

FTPソフトを使用する方法

FTPソフト(File Zillaなど)を使い、ドラッグ&ドロップでアップロードします

(『/wp-content/themes/ 』の中に入れます。)

子テーマを有効化する

『外観』→『テーマ』より、子テーマを有効化すれば、完了です。

子テーマを使って、カスタマイズする際の注意点は1つだけ

カスタマイズするテンプレートファイルだけ、子テーマにコピーして、アップロードすること

なぜなら、何をカスタマイズしたのか分からなくなるからです。



例えば、ヘッダーのレイアウトを変更したい場合は、親テーマのファイルから、『header.php』を子テーマに複製したあとに、コードをゴニョゴニョといじると思いますので、



親テーマのファイル内の、『header.php』だけ複製すればよいだけで、『footer.php』や『page.php』などの、テンプレートファイルは不要ですよね。



カスタマイズするための、必要なテンプレートファイルだけを子テーマ内に複製すれば、何をカスタマイズしたのかが、簡単に分かり、管理が楽になります。


実際に、RENBLOG(当ブログ)の子テーマを、写真で説明しますと、以下のようになります。


カスタマイズするための、テンプレートファイルしか、入れていません。

子テーマ作成に必要な、ファイル一式を無料配布

WordPressの子テーマの作成方法を解説しましたが、

フォルダを作って、style.cssを作って、コード書いてと….。


と面倒な方が、大半だと思いますので、

子テーマのファイル・style.css・functions.phpをまとめたファイル一式を無料でダウンロードできるようにしております。


子テーマのファイルの名前は、任意の名前に、
style.cssは、雛形コードと補足説明を、
functions.phpはそのまま使える雛形コードを、それぞれ組んでおります


以下の、ダウンロードボタンからダウンロードしてください。


また、WordPressでのカスタマイズ・オリジナルテーマ作成に必要な、WordPressのチートシートがありますので、合わせてお使いください。


コピペOK!実務で使うワードプレスのチートシート

SNSでもご購読できます。

コメントを残す

前の記事

次の記事