今回はこういった疑問を持つ方に向けて
- WordPressの子テーマを使うメリット
- WordPressの子テーマの作り方
- WordPressの子テーマの使い方
を初心者の方にも分かりやすいように解説していきます。
目次
WordPressの子テーマを使うメリット
WordPressは自分の好きなテーマなどをカスタマイズして簡単にサイトのデザインや機能を変えることができるというメリットがあります。
ですがテーマのファイルを直接編集してしまうと、テーマをアップデートした際に自分が編集した箇所が全て消えてしまい、せっかく作ったデザインや機能が無くなってしまいます。
そこで役に立つのが子テーマです。
(元のテーマを親テーマ、親テーマをカスタマイズしたものが子テーマと呼ばれます。)
この子テーマの中でファイルを編集することで、親テーマがアップデートされても自分が編集した箇所が消えないという特徴があります。
これがWordPressで子テーマを使うことを推奨されている理由です。
特にGoogleアドセンスなどの広告をサイトに貼る際は、テーマのファイルを編集することになるので必ず子テーマを使用しましょう。
WordPressの子テーマの作り方
今回は例として僕が使用しているテーマであるOpenCage社の「Swallow」というテーマの子テーマを作るという前提で解説します。
Swallowの場合は自分で子テーマを作らずとも公式ページからダウンロードできます。
上記のようにテーマの製作者が子テーマのファイルを配布している場合があるので、自分で作る前に探してみましょう。
もし配布されているものがダウンロード出来た場合は、自分で作る必要は無いので本記事内の「作った子テーマを圧縮してアップロードする」という項目から見ていただければ大丈夫です。
子テーマ用の空のファイルを作る
それではここから実際に子テーマを作っていきます。
まずはデスクトップ上で右クリックをして、「新規作成」から「フォルダ」を選んで子テーマ用の空のファイルを作ります。
ファイル名の指定はありませんが分かりやすいものがいいでしょう。(親テーマ名+Childなど)
今回は「Swallow_custom」という名前にします。
次に作成したファイルの中に「functions.php」と「style.css」というファイルを作ってその中にコードを書き込むのですが、メモ帳などを使うとコードが乱れて上手く動かない場合があるので専用のエディタをダウンロードしましょう。
エディタとはプログラミングのコードを編集するのに特化したソフトのことです。
よく分からない方はメモ帳の高機能版とでも思って下さい。
エディタにも色々種類があるのですが、今回は僕が愛用しているSublime Textというソフトを使います。
(※どのエディタでも基本的な操作は大体同じです。)
詳しいインストール方法は下記のサイトを御覧ください。
functions.phpファイルを作る
インストールが出来たらエディタを起動します。
起動すると下記のような画面になるので左上の「File」から「New File」を選んでコードを書き込むためのファイルを作ります。
ファイルが出来たら以下のコードをコピペして下さい。(コードをイジる必要はありません)
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
コピペが出来たら先程と同じ様に左上の「File」をクリックしてその中の「Save As...」という項目をクリックします。
すると以下のように名前を付けて保存というウィンドウが出るので、先程作った子テーマ用の空のファイルを保存先に指定して、ファイル名を「functions.php」として保存します。
先程作った空のファイルの中に今作ったfunctions.phpができていれば成功です。
style.cssファイルを作る
次に上記の「functions.php」ファイルと同じ要領で「style.css」ファイルを作っていきます。
先程と同じ様に左上の「File」から「New File」を選択し、ファイルが出来たら以下のコードをコピペして一部を書き換えた後にファイル名を「style.css」として子テーマファイルの中(「functions.php」を保存した所)に保存します。
/*
Theme Name:先程作った子テーマ用のフォルダの名前
Template:親テーマの名前
Version:親テーマのバージョン
*/コードの「：」以降を自分の環境に合わせて変更します。
(※親テーマのバージョンはWordPress管理画面の「外観」→「テーマエディター」から親テーマの「style.css」を開けば確認出来ます。)
ちなみに僕の場合なら下記のようなコードになります。
/*
Theme Name:Swallow_custom
Template:Swallow
Version:1.2.2
*/無事に保存できたら子テーマファイルの中身を見てみましょう。
上記の画像のように「functions.php」と「style.css」があればOK。
これで子テーマの完成です。お疲れ様でした。
作った子テーマを圧縮してアップロードする
最後に作った子テーマをzipファイルに圧縮してWordPress上にアップロードしましょう。
圧縮する際は7zipなどのフリーソフトを使うと良いと思います。
使い方は下記のサイトに詳しく書かれています。
圧縮が出来たら、WordPressの管理画面から「外観」→「テーマ」→「新規追加」を選択します。
「新規追加」を押すと下記の画面になるので「テーマのアップロード」→「ファイルを選択」から先程圧縮した子テーマを選択して「今すぐインストール」をクリックすれば子テーマのインストールが出来ます。
インストールした子テーマを「有効化」すれば完了です。
WordPressの子テーマの使い方
せっかく子テーマを有効化しても使い方を知らなくては意味がありません。
ここからはWordPressの子テーマの使い方について解説していきます。
とは言え、使い方と言っても難しいものではありません。
親テーマのファイルを編集したい場合は、そのファイルを子テーマの中にコピーしてその中で編集する
基本的な使い方はこれだけです。
例えば「footer.php」ファイルを編集したい！という場合は親テーマの「footer.php」を子テーマの中にコピーして、コピーしたものを編集します。
こうすることで親テーマがアップデートされても「footer.php」の編集箇所は消えません。
ただし例外として「functions.php」を親テーマから子テーマにコピーしてしまうとエラーが起きて、サイトが表示されなくなります。
(親テーマと子テーマに同名、同内容の「functions.php」があるとエラーが起きる。)
そのため「functions.php」にコードを追記したい場合は子テーマの「functions.php」にそのまま書き込めばOKです。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
//ここから追記したいコードを書き込む(※「style.css」も同様に子テーマの方にコードを書き込めば反映されます。)
/*
Theme Name:先程作った子テーマ用のフォルダの名前
Template:親テーマの名前
Version:親テーマのバージョン
*/
/*ここから追記したいコードを書き込む*/
・子テーマをダウンロードしたは良いけど、使い方が分からない...