【WordPress初心者】知らなきゃ損!子テーマの作り方を解説します!

 こんにちは!今日あたりが1年間で一番日が長いと思うとテニスプレイヤーとしては寂しい限りです。というか半年経つの速い…。
 
今回はWordPressで必須の知識「子テーマ」について解説します!
 
WordPressでページをカスタマイズする際に、文字のサイズだとか先の色だとかテーマの細々とした部分を変えていきたいとき、テーマを書き換えることで対応する場合は多いです。
 
しかしテーマをいじるときに、今使っているテーマそのもの(親テーマといいます)を書き換えると、いざそのテーマがアップデートされたときにすべて自分の今までの設定がパアになってしまいます!
 
そんな事態を避けるために使われるのが、「子テーマ」というものです!
 
子テーマとは文字通り「子」のテーマであり、子テーマには必ず「親テーマ」があります。かんたんに説明すると、子テーマは基本的に親テーマのコピーです。
 
親テーマを直接書き換えずに子テーマを作ってからそれを書き換えることで、親テーマがアップデートされても細かな変更点がそのまま子テーマに残ってくれるというわけです。
 
そんな便利な子テーマですが、WordPressの入門書などを見るとだいたい最初の方に書かれています。
 
僕も実は結構前から知っていました。本来こんな重要なやり方を導入しない手はないはずなのですが、実は僕、使っていませんでした。
 
なぜかというとまったく使い方がわからなかったからです。
 
しかし先日、WordPressでサイドバーのカスタマイズをしたいと思って色々とテーマをいじくっていたところ、子テーマの導入方法についてわかりやすく解説しているサイトを見つけ、その情報を参考にし、ついに子テーマを導入しました!
 
もしまだ子テーマを導入していない!という僕のようなWordPress初心者の方がいれば参考になれば嬉しいです!
 

 

子テーマ導入にあたって

 

子テーマを導入する作業は、簡単に言うと子テーマのディレクトリに親テーマのコピーを貼り付けていく作業になるのですが、親テーマのコピーというのは基本的に「親テーマの変更したい部分」について作ります。

 

例えば、親テーマのheaderを編集したいときに子テーマとしてコピーするテーマはheader.phpだけです。子テーマを作っていない部分は親テーマのコードを自動的に引き継ぐ仕組みになっているので大丈夫です。

 

スポンサーリンク

子テーマ導入の大まかな流れ

 

子テーマを導入する大まかな流れは

  1. WordPressにログインしテーマの編集画面で変更したいテーマファイルを選びソースコードをコピー。
  2. レンタルサーバーにログインして、親テーマのディレクトリ直下に子テーマのディレクトリを作る
  3. 子テーマディレクトリの直下にコピーしたコードを貼り付け保存
  4. 子テーマを有効化する。

です。これだけだと意味不明ですよね。詳しく解説していきます。順に見ていきましょう。

 
※上記の手順通りにやっても上手くいかないファイルも幾つかあります。(functions.phpなど)それらについては別に解説します。
 

子テーマ作成

 

ここではheader.phpを変更するものとして子テーマを作る説明をしていきます。

①WordPress管理画面にログイン

 

まずはWordPressの管理画面にログインし、子テーマを作りたい(ソースコードをいじりたい)テーマを選択して、コードをコピーします。

 

外観→テーマの編集→header.php

 

といき、header.phpのコードをコピーします。

 

②親テーマのディレクトリ直下に子テーマのディレクトリを作成

 

ディレクトリ=ファイルだと思ってもらって構いません。

 

まず、レンタルサーバー(xサーバー、ロリポップ!など。ここではロリポップわ例に説明します)にログインし、PC用のページを表示します。

とにかくWordpressのデータがアップロードされているデータベースに入ることができればOKです。

 

ロリポップ!の場合は、左側サイドバーにある、Webツールからロリポップ!FTPを開きます。

するとファイルの名前が大量に並べられたページが出てきます。

 

(自分で決めたWordpressのデータ保存先)/wp-content/themes/Child/

 

といき、このChildに当たる新規ファイルフォルダを作成します。名前はわかりやすいように「親テーマ名+child」などにするとわかりやすいです。

 

③コードの貼り付け

 

次に子テーマの新しいファイルができたら、その直下にまた新規ファイル作成をします。

ファイルの名前はコピー元と同じにしましょう。この場合は親テーマのheader.phpをコピーしてきたのでheader.phpとします。

この新しく作ったファイルに先程WordPressの親テーマからコピーしてきたコード(この場合はheader.phpのソースコード)をそのまま貼り付け、保存します。

貼り付け後のurlは

 

(自分で決めたデータ保存先)/wp-content/themes/Child/header.php

 

といった感じです。これができれば子テーマの作成は完了です。

 

④子テーマを有効化する

 

WordPressの管理画面に戻り、外観→テーマを開くと新しく子テーマ「親テーマ+child」が追加されているはずなので、有効化したら完了です。

WordPressのテーマは、同じ内容について書かれたコードがあれば基本的にあとから書かれたコードが優先され適用されます。
 
ですからテーマの編集をしたいときには、子テーマのテーマファイルの一番下にどんどん付け加えたい内容のコードを足していけばOKです。
 

※上記手順の例外

 
しかし、親テーマのコードをそのままコピーするだけでは上手くいかない曲者たちがいます。
 
style.cssとfunctions.phpです。
 
特に後者のfunctions.phpについては手順を間違えるとページが真っ白になったりするので注意が必要です。
 

①style.css

style.cssは上記の親テーマのコードをコピーする方法以外にもやり方があります。
 
具体的には、通常のように子テーマディレクトリ(ファイル)直下(urlにskcnat/wp-content/themes/Child/とでている状態)に親テーマのstyle.cssをコピペするのではありません。
 
もう一つの方法では、同じthemes直下にstyle.cssディレクトリを作るところまでは同じですが、その中に親テーマのコピーを貼り付けるのではなく
 
 
@import url(“../●●●/style.css”);
 
 
と入力します。●●●には親テーマの名前(正確に!)を入れればOKです。
 

②functions.php

 
こいつは曲者です。
 
このファイルは親テーマコードをそのままコピー&ペーストしてもうまく認識されないので、コードを何も書かずにファイルだけ作って保存します。
 
ファイル名は他のディレクトリと同様、親テーマと同じ名前(この場合はfunctions.php)にします
 
不思議ですがこれでfunctions.phpはちゃんと親テーマのコードを引き継いでくれます。それと、functionsのsは忘れないようにしてくださいね。
 
スポンサーリンク

まとめ

 
子テーマの作成は方法さえわかればとっても簡単でが、効果は抜群です。
 
今までめんどくさく感じていた人も導入を試してみてはいかがでしょうか。僕が導入にあたって参考にしたページも載せておきます。よかったら参考にしてください。
 
それではまた明日!
 
 

運営ノウハウ
スポンサーリンク
のーるをフォローする
この記事を書いた人
のーる
大学生。好きなことはテニス、文章書くこと、ダンスミュージック、嫌いなものは忘れ物、銀杏、絡まりやすいもの。 大学一年の夏休み、ひたすら自分の時間を提供して怒鳴られこき使われるバイトと暇を持て余す自分に嫌気が差しこのブログを始めました。 コメントとかもらえると嬉しいです。
のーるをフォローする
やりたいことだらけ

コメント