・WordPress子テーマとは？
・子テーマの設定方法を知りたい
・子テーマの作成方法は？
このページではこういった疑問にお答えします。
WordPressにはテーマのカスタマイズ機能がデフォルトで備わっていますね。
ただ、ほとんどはフォントや背景、ボックスの色を変えられるくらいで、なんか物足りない。
もっとデザインに幅を持たせたい！
そう思ったときに、まず1番最初にしなければいけないのが「子テーマ」の設定です。
これは避けて通ることができません。。。
あなたも1度は耳にした事があるのではないでしょうか？
このページでは、初めて子テーマを設定する、でもプログラミングの知識はほとんどない、といった方のためにできる限り分かりやすく解説していきます。
・子テーマを使った編集方法を知る
・子テーマの作成方法を知る
（ほとんどの場合作成は不要です）
私は見て見ぬふりをしていたばかりに、サイトが初期デザインに戻るという失敗をしました。。。
復元に膨大な時間を割くことがないように、このページを参考にサクッと設定をしてしまいましょう。
設定は3ステップでできるので、15分もあれば完了します。
子テーマに関して既にご存じの方は、「2. WordPress子テーマ設定方法」からお読みください。
1. WordPress子テーマとは？
あなたもご存じの通り、WordPressでは”テーマ”をダウンロードして設定することで、誰でも簡単に整ったデザインを設定することができます。
既存テーマのカスタマイズ機能を使えば、直接テーマファイルを編集しなくても、簡単なデザインの変更はできます。
*カスタマイズ機能 = ダッシュボード > 外観 > カスタマイズ
しかし、色の変更ができるくらいで、だんだん物足りなくなって来ることも。。。
そこで、さらにもっと踏み込んでデザインを編集する場合、*テーマを直接編集することで、カスタマイズ機能では編集ができない部分にも変更を加えることができます。
例えば、ヘッダーの幅を変えたり、見出しのデザインを変更することができます。
*テーマ編集 = ダッシュボード > 外観 > テーマエディター
・なぜ子テーマを設定する必要があるのか？
WordPressテーマは「テーマエディター」からコードを直接編集することがで、デザインを自由に編集することができるとお伝えしました。
しかし、メインテーマを直接編集するとアップデートの際に、編集した部分まで更新されてしまいます。
つまり、せっかくデザイン変更した部分まで元のデザインに戻ってしまいます。
※「外観 > カスタマイズ」から編集したデザインは更新しても引き継がれます。
そこで登場するのが「子テーマ」です。
子テーマをWordPressにインストールして編集することで、デザインを編集しつつ、更新しても影響を受けることがなくなります。
この場合、アップデートされるのはメインの親テーマのみです。
機能は更新されつつ、子テーマで編集したデザインはそのまま残ります。
なんとなく感覚が掴めましたか？
では、もう少し踏み込んで解説していきます。
・WordPress子テーマの働き
子テーマを有効活用するために、WordPress上での子テーマの働きを簡単に抑えておきましょう。
今ここで覚える必要はありませんが、感覚として知っておくと後で役に立つかもしれません。
あなたが「もっとサイトを進化させたい」と思ったときに必要になる知識です。
通常使用しているメインのテーマのことを親テーマと言います。
子テーマを設定している場合、ウェブサイトは親テーマを読み込んだ後に子テーマの情報を読み込みます。
この時、基本的な情報やデザインを親テーマから読み取り、サイトが立ち上がります。
その後、子テーマ内の追加情報を読み取り、デザインや変更が反映されていきます。
こうして、別々に処理されるため、親テーマが更新された場合でも、子テーマで編集した情報はそのまま残り、デザインが初期の状態に戻ることが無くなります。
この段階ではザックリとイメージできていれば問題ありません。
・子テーマは基本的に提供される
少し前までWordPress子テーマは自分で作る必要がありました。
自作するにはちょっとしたプログラミングの知識が必要ですが、初心者でも解説記事を見ながらできるレベルです。
基本的には必要ないので、子テーマの作成方法は後ほど解説します。
最近では、テーマの販売者が子テーマも用意しているケースが増えてきました。
まず、子テーマが提供されている場合の設定方法をご紹介していきます。
2. WordPress子テーマ設定方法
子テーマ設定の大まかな流れはこのようになります。
- 子テーマのダウンロード
- 子テーマのアップロード
- 子テーマの有効化
１つずつ順に解説していきます。
実際に作業をしながら読み進めてみてください。
①WordPress子テーマのダウンロード
子テーマは、基本的にテーマを購入したサイトで無料提供されています。
あなたが購入したサイトで、サイト内検索「子テーマ」で探してみましょう。
ここでは代表的なテーマの子テーマが提供されているページを紹介しておきます。
・SANGO子テーマ
・Lightning / Lightning Pro 子テーマ
・JIN 子テーマ
・Cocoon 子テーマ
・オープンケージ（OPENCAGE）製のテーマ
↑ストーク19 / アルバトロス / ハミングバード / スワロー は上記リンクから
この中にあなたのサイトテーマが無い場合は、購入したサイトを確認してみてください。
WordPress子テーマはZipファイル形式でダウンロードされていることを確認してください。
②WordPressに子テーマをアップロード
子テーマをアップロードする方法は簡単です。
メインテーマを設定した時のように、WordPress側からファイルを読み込みます。
外観 → テーマ → 新規作成 → テーマのアップロード → ファイルを選択
そして、先ほどダウンロードした子テーマのZipファイルを、Zipファイルごと選択してアップロードします。
これで子テーマのアップロードは完了です。
③子テーマの有効化
最後に「テーマ設定」に戻り、子テーマを有効化すれば完了です。
※親テーマがないと子テーマだけではデザインは反映されないので注意
これで子テーマ設定のためのすべてのステップが完了しました！
WordPress子テーマ有効化後・・・
子テーマをWordPressに設定した後にまずすることは、外観の設定です。
子テーマ設定前に、WordPressのカスタマイズ機能（外観 → カスタマイズ）を使ってデザインをすでに編集していた場合、子テーマを有効化することで、一度デザインが初期化されることになります。
これはしょうがないことなので、面倒くさがらずに、もう一度カスタマイズ機能を使って外観を整えましょう。
3. 子テーマを使ってデザインを編集する方法
子テーマを設定してしまえば、あとはカスタマイズし放題です。
テーマ → テーマエディターから子テーマを選択して編集していくわけですが、ここからはプログラミングの知識が必要になります。。。
ただ、簡単な装飾程度だったら初心者の方でもGoogleで調べながら編集することができます。
デザインの変更は、基本的に子テーマ内のStyle.cssという場所にコードを追記していく形でデザインを変更していきます。
Googleで「WordPress CSS デザイン」と検索すると、さまざまなカスタマイズが出てくるので、挑戦してみてください。
補足：
プログラミング未経験の方でも2～3週間ほどの学習で、自分のサイトの見た目をカスタマイズするくらいの技術は簡単に身につけることができます。
このサイトも、アルバトロスのテーマをベースに、簡単なプログラミングでデザインを編集しています。
ここまでが、子テーマが提供されている場合の設定方法の解説です。
ちょっと待って、テーマを購入したサイトで子テーマが提供されていない。。。
安心してください。
そんなあなたのために、これから子テーマの作成方法をご紹介します。
そうです、子テーマは自作することができます。
コピペができれば誰でも作成できるように解説していきますので、参考にしてみてください。
また、ここまで読んで子テーマが上手く設定できていないという方も、この先の解説を読むことで、どこに問題があるのか見つけることができる可能性があります。
4. WordPress子テーマの作成方法
それでは子テーマの作成方法を解説していきます。
次の3ステップでわりと簡単に作成できます。
- 子テーマのフォルダーを作成
- style.cssファイルの作成
- function.phpの作成
順番に解説していきます。
が、その前に、子テーマはサーバー上にフォルダやファイルを作成する必要があります。
まずは、サーバー上のファイルへのアクセス方法を押さえておきましょう。
・サーバー上のフォルダへのアクセス方法
ここでは、私が使っているmixhostを例として解説していきますが、別会社のサーバーでも手順はほとんど同じです。
①mixhostの場合、まずmixhost Control Panel（通称ePanel）にログインします。
②「ファイル」から「ファイル マネージャー」を選択して、こちらの画面にアクセスします↓
ConoHa WING / Xserver では次の手順でファイルマネージャーにアクセスできます。
ConoHa WING：
①コントロールパネルにログイン → ②上部メニューの「WING」をクリック → ③左メニューの「サイト管理」をクリック → ④「ファイルマネージャー」をクリック
✅詳細はこちらのページを参照
Xserver ：
①Xserver accountへログイン → ②ページ下部の「ご契約一覧 > サーバー > ファイルの管理」へアクセス
✅詳細はこちらのページを参照
これで準備OKです！
それでは、ここに子テーマを作成していきましょう。
・WordPress子テーマ作成手順
ではもう一度、、、順番は次の3ステップです。
- 子テーマのフォルダーを作成
- style.cssファイルの作成
- function.phpの作成
それでは1つずつ見ていきましょう。
① 子テーマのフォルダ作成
まず、子テーマの情報を置いていくフォルダを作成します。
このフォルダが後でWordPress内のテーマ一覧に表示されるようになります。
それではフォルダーを作成していきましょう。
先ほど開いた、ファイルマネージャーの「wp-content > themes」の中で、フォルダを新規作成します。
子テーマのフォルダ名は「親テーマ名 + _child」とつけるのが一般的です。
このサイトの場合、アルバトロス（albatros）というテーマを使っており、子テーマ名は「albatros_custom」となっています。
これで第1ステップは完了です。
② style.cssの作成
次に、今作成したフォルダー内に、「style.css」というファイルを作ります。
このstyle.cssというファイルは、プログラミングではフォントの大きさや色、背景の色、パーツの形や配置といった、主にデザインを編集するためのファイルです。
こちらも作成手順は簡単です。
先ほど作成したフォルダ（テーマ名_child）を開き、このフォルダ内でファイルを新規作成します。
ファイルの名前は必ず小文字で「style.css」としてください。
次に、このstyle.cssファイルの中に以下の情報を記述します。
/*
Template: albatros
Theme Name: albatros_custom
Theme URL:http://open-cage.com/albatros/
*/必須1：Template
親テーマの名前を記述します。
必須2：Theme Name
今回作成した子テーマのフォルダ名を記述します。
AuthorやURLなど、その他の要素を記述する場合もありますが、最低限必要なのはこちらの２つだけです。
今回はアルバトロステーマを例にしていますので、あなたのWordPressテーマに合わせて親テーマ名と子テーマ名を必ず書き換えて記述してください。
これで第2ステップはOKです。
③ functions.phpの作成
最後に、functions.phpといファイルを、同じ子テーマフォルダ内に作成します。
このファイル名も全て小文字で「functions.php」とつけてください。
このファイルの中には次の内容を記述します。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('style')
);
}
上記の記述はそのままコピペで大丈夫です。
このコードを記述することで、子テーマのCSSを読み込むようになります。
これで子テーマの作成と設定は完了です。
WordPress内の、「外観 > テーマ」に作成した子テーマが表示されていれば成功です！
5. 子テーマ内のファイルの特性
今回ご紹介したfunctions.phpとstyle.cssは、親テーマと子テーマ内の両方のファイルが読み取られます。
子テーマのファイルは、親テーマの後に読み取られます。
そのため、子テーマのファイル内の記述には、追加したい要素や上書きしたいデザインの情報を追記する形で編集していきます。
上の図のように、親テーマの内容に上書きや変更を加えるように、子テーマに要素を追加していきます。
これは、functions.phpとstyle.css のファイルのみ適用されます。
反対に、他のファイルの場合は、子テーマに入っているファイルが優先して読み込まれます。
例えばheader.phpというヘッダー部分の要素を編集したい場合、同じように子テーマ内にheader.phpというファイルを作成します。
この時、親テーマ内のheader.phpの内容を全てコピーして、子テーマ内のheader.php内に張り付ける必要があります。
その後、子テーマ内のheader.phpを追記・編集するようにしてください。
functions.phpとstyle.css以外のファイルは、子テーマフォルダ内のファイルが優先して読み込まれます。
少しややこしいですが、簡単にまとめると、全て子テーマ内にコピペして作業を開始すると覚えておけば大丈夫です。
同じファイルが親テーマと子テーマ内の両方にある場合
＝子テーマフォルダ内のファイルだけ読み込まれる
（親テーマ内の同一ファイルは読み込まない）
ファイルが子テーマ内だけにある場合
＝子テーマフォルダ内のファイルが読み込まれる
ファイルが親テーマ内だけにある場合
＝親テーマ内のファイルが読み込まれる
このような性質があるため、編集が必要ないファイルは、子テーマフォルダ内に作成する必要はありません。
デザインだけの変更の場合は、基本的にstyle.css（デザインのためのファイル）とfunctions.php（親テーマと紐づけるためのファイル）だけを子テーマ内に入れておけば大丈夫です。
6. まとめ：子テーマ設定は登竜門
いかがでしょうか？
子テーマが提供されている場合は、設定はとても簡単です。
ただ、設定方法を知るまではなんとなく手が出しづらい部分でもあります。
本格的にWordPressでサイトを運営していく上で、絶対に避けては通れない最初の壁が子テーマ設定です。
このページを参考に設定を完了し、あなたも思う存分サイトをカスタマイズしてみてください！
✅ このページで使用している画像は、Canvaで作成したものです。
コメントを残す