WordPressの子テーマでphpファイルやstyle.cssを編集したいけど、子テーマに無くてやり方がわからない！
こういった場合、子テーマ直下にphpファイルを配置する方法をお伝えします。
子テーマとは？
WordPressのテーマには子テーマと親テーマがあります。
親テーマというのはそのテーマの一番の基本形みたいなもので、子テーマというのは自由に細部をいじれる親テーマの分身みたいなものです。
両者の決定的な違いは、テーマのアップデートの影響を受けるかどうかです。
テーマがアップデートされると、親テーマは記述がアップデートの通りに変わりますが、子テーマはいじった細部が変わらずそのまま保存されるのが特徴です。
例えば、WordPressで
- 文字色
- フォント
- 文字のサイズ
などを変更するとしましょう。
この際、テーマの編集をしてphpファイルを書き換えるのが普通です。
しかし、このとき親テーマを書き換えてしまうといざそのテーマがアップデートされたとき、カスタマイズのために書き加えた情報が全てパアになってしまいます！
こういった事態を避けるため、カスタマイズのときに使われるのが子テーマです。
子テーマにはphpファイルがないことがある→編集できない
しかし、いざ子テーマの編集をしようとしても子テーマの中に編集したいphpファイルがないことがあります。
例えば、Google AdSenseの審査用のコードをheader.phpに貼り付けたいと思ったときに、header.phpがないことがあります。
そんな時には子テーマ内に自分の編集したいphpファイルを設置しなければなりません。
その方法を解説します。
子テーマ直下にphpファイルを作成する手順
子テーマを導入する作業は、簡単に言うと子テーマのディレクトリに親テーマのコピーを貼り付けていく作業です。
手順は以下の通り。
- レンタルサーバーにログインし、親テーマのディレクトリ直下に子テーマのフォルダを作る
- 作成した子テーマ直下にphpファイルを作成する
です。
大きく分けて2つのステップに分かれます。細かく見ていきましょう。
レンタルサーバーにログインし、親テーマのディレクトリ直下に子テーマのフォルダを作る
まず、子テーマ直下に先ほどコピーしたコードを使ってファイル（ディレクトリ）を作成し、アップロードします。
※ファイル=ディレクトリだと思ってもらって大丈夫です。
まず、FTPにログインします。
「FTPって何？？」状態の場合、とりあえず自分の契約しているサーバーにログインし、とにかくWordpressのデータがアップロードされているデータベースっぽいやつを探してください。
サーバーにログインできるなら、絶対どっかにあるはずなので頑張って探してください。
僕はiOSアプリのFTPManagerというアプリを使っているのでそれをもとに説明していきます。
次に、子テーマのフォルダを作ります。
↑自分で契約しているサーバーにログインし
↑public_htmlをタップ
↑自分のブログのドメイン名が付いたフォルダに行き
↑wp-contentフォルダに行き
↑themesフォルダにいき、themes直下にはインストールしたテーマのデータが全て入っているところ…
こんな感じで、themesフォルダの直下に子テーマフォルダを作ります。主義フォルダを作成したら、保存したらOK。
※「ファイル」と「フォルダ」は区別してください。フォルダはファイルを入れる入れ物みたいなものです。似てるようで違うので注意。
名前は「親テーマ名+child」などにすると分かりやすいですね。
この子テーマフォルダの直下に、header.phpなどのファイルを保存していくのが次の作業です。
作成した子テーマ直下にphpファイルを作成する
次に、作成した子テーマの直下にheader.phpなどのphpファイルを作成していきます。
ここでも大きく分けて
- functions.phpやstyle.css以外のファイルの場合
- functions.phpやstyle.cssの場合
の2通りがあります。前者が原則、後者が例外的な位置付けなので、前者から見ていきましょう。
functions.phpやstyle.css以外のファイルの場合
ここでの手順は大まかに以下の3ステップを踏みます。
- WordPressにログインし、「テーマの編集」で変更したいphpファイルを選び、ソースコードをコピーする
- 子テーマディレクトリの直下にコピーしたコードを貼り付けたphpファイルを作り、保存する
- 子テーマを有効化する
以上です。多分これだけ見ても意味不明だと思うので詳しく解説します。
ちなみにここでは、子テーマ上にheader.phpを作るという想定で説明していきますが、（functions.phpとstyle.cssを除く）header.php以外のphpファイル（例えばsingle.phpとか）についてもheader.phpと同様のやり方でできるので安心してください。
1 WordPressにログインし、「テーマの編集」で変更したいphpファイルを選び、ソースコードをコピーする
まず最初に、子テーマ上で編集したい(ソースコードをいじりたい）phpファイルを選択し、コードをコピーします。
ここではheader.phpを選択します。
外観→テーマの編集→header.phpといき、「親テーマ」を選択してheader.phpのコードをコピーしてみてください。
↑「テーマヘッダー」をタップし
↑表示されたコードをコピー
これができたらOKです。簡単ですね。
2 子テーマディレクトリの直下にphpファイルを作り、保存する
次に子テーマのフォルダの直下にまた新規ファイル作成をします。
ファイルの名前はコピー元と同じにしましょう。この場合は親テーマのheader.phpをコピーしてきたのでheader.phpとします。
この新しく作ったファイルに先程WordPressの親テーマからコピーしてきたコード（この場合はheader.phpのソースコード）をそのまま貼り付け、保存します。
貼り付け後のurlは
（自分で決めたデータ保存先）/wp-content/themes/Child/header.php
といった感じです。
これができれば子テーマ上でheader.phpの作成が完了です。
3 子テーマを有効化する
最後にWordPressの管理画面に戻り
外観→テーマ
を開くと新しく子テーマ「親テーマ+child」が追加されているはず。これを有効化したら作業は一通り完了です。
WordPressのテーマは、同じ内容について書かれたコードがあれば基本的にあとから書かれたコードが優先され適用されるようになっています。
そのため、テーマの編集をしたいときには子テーマのテーマファイルの一番下にどんどん付け加えたい内容のコードを足していけばOKです。
【追記】2019/06/12
header.phpなどのphpファイルを子テーマに作成した場合、ちゃんとファイルの中に記述がないとコードが読み込まれなくなります。
僕も空のheader.phpを作って放置したところcssが反映されなくなりめちゃくちゃ焦りました。
気をつけてください。
functions.phpやstyle.cssの場合
しかし、親テーマのコードをそのままコピーするだけではうまくいかないファイルがあります。
style.cssとfunctions.phpです。
※style.cssについては上で紹介した方法でも可能ですが、ここから紹介する方法でも可能です。
特に後者のfunctions.phpについては手順を間違えるとページが真っ白になったりするので注意が必要です。
style.cssの作成方法
style.cssは上記の「親テーマのコードをコピーする方法」以外にもやり方があります。
具体的には、同じthemes直下にstyle.cssディレクトリを作るところまでは同じですが、その中に親テーマのコピーを貼り付けるのではなく
@import url(“../●●●/style.css”);
と入力します。●●●には親テーマの名前を（正確に！）入れればOKです。
とても簡単だしコードがゴチャゴチャすることなくわかり易くなるので、style.cssについてはこちらの方法を勧めます。
functions.phpの作成方法
こいつは曲者です。
とはいっても方法は簡単で、一番最初の方法と同じく子テーマ直下に「functions.php」ファイルを作成し、コードを何も書かずにそのまま保存します。
不思議ですが、これだけでfunctions.phpはちゃんと親テーマのコードを引き継いでくれます。
また、functionsのsは忘れないように注意です。
ここまでできたら作業は完了です！
あとはWordPressの管理画面から好きなように子テーマ直下に作成したphpファイルを編集することができるようになります！
まとめ
子テーマの作成は方法さえわかればとっても簡単でが、効果は抜群です。
やってみるとめっちゃ簡単なので、今まで面倒だと感じていた人も導入してみて下さい。楽勝です。
この記事が役に立てば幸いです。
カテゴリー