初心者でも3分でわかる!WordPressの子テーマの作り方


WordPress 子テーマの作り方をいい加減に学ぼうと思った

どうも、Linです。熱帯魚、泳がせてます。

 

WordPress のテーマを更新したら編集箇所が消えてしまった!!

FuuuuuuuK!!!

という経験はありませんか??

 

ぼくにはあります笑

先日、 WordPress の某サイトで503エラーが発生してしまい、やけくそでテーマを更新したら編集箇所が一気に消えてしまったのです。

これまでめんどくさくて子テーマを作るのを拒否していたので、100%自己責任。。

 

そういった事件もありまして、

「今後は WordPress のテーマを更新しても編集箇所が消えないようにしよう」

と決心し、子テーマの作り方を一から勉強してみました。

なお、勉強にあたりこちらの神記事様たちを参考にさせていただきました↓

 

今日は子テーマの作り方を自分なりにまとめてみたので、ワードプレス初心者の方に参考にしていただけると嬉しいです。

 

 

WordPress 子テーマの作り方の基本

数々の神記事を読み漁った結果、次の4つのフェーズにわかれていると悟りました。

  1. 作る
  2. 編集する
  3. 入れる
  4. 有効化する

 

wordpress 子テーマ 作り方

 

これらのステップを忠実に再現し、子テーマを作ることに成功すると、

  • 子テーマでエラーが起きても親テーマには影響がない
  • 親テーマを更新しても自分の編集箇所を残すことができる

という2つのメリットを享受できることができます。

それぞれのステップごとに見ていきましょう。

 

 

[1] WordPress の子テーマを作る

まずWordPress の子テーマ作るという作業ですね。

wordpress 子テーマ 作り方

子テーマの作り方は次の2ステップ。

 

Step1. 子テーマ用のフォルダを作成する

最初にやるべきことは、

子テーマのファイルたちを入れるフォルダを作成するということです。

ここで重要になってくるのがフォルダの命名方法。

フォルダ名はぶっちゃけ何でもいいのですが、どのテーマの子テーマなのかはっきりさせるために、

テーマ名 – child

というフォルダ名が望ましいでしょう。

 

例えば、WordPressテーマ「ストーク」の子テーマでしたら、

stork-child

となるわけです。

wordpress 子テーマ 作り方

こちらのフォルダをPC のローカルにでも保存しておけば良いですね。

 

Step2. ファイル等を入れる

子テーマのフォルダにWordPress ファイルを入れて行きます。

ここで重要になってくるのが、

最低限入れる2つのファイルです

それは、

  1. style.css
  2. functions.php

 

wordpress 子テーマ 作り方

 

子テーマを作る際に編集する予定がなくても入れる必要があります。

空のファイルをテキストエディタで作成して子テーマフォルダにぶち込んでおきましょう。

 
ぼくはSublime Textというエディタを使いました

もし、それ以外に編集したいファイルがありましたら、テキストエディタで作成してフォルダに入れときましょう。

 

wordpress 子テーマ 作り方

 

ぼくの場合ですと、style.css、functions.phpに加えてsingle.php、  header.phpも編集したかったので、

  • style.css
  • functions.php
  • single.php
  • header.php

という4つのファイルを子テーマフォルダ(stork-child)にぶち込んでおきました。

 

wordpress 子テーマ 作り方

 

これで子テーマを作るフェーズは終了ですね。

 

 

[2] WordPress のテーマのファイルを編集する

先ほど作成したファイルたちをガンガン編集していきます。

 

wordpress 子テーマ 作り方

 

style.css

まずデザインを決める style.cssの編集からです。

 

wordpress 子テーマ 作り方

 

style.cssは次のように編集すると良いでしょう。

決まり文句を書いてから、追加の CSS のコードを書いていきます。

ぼくの場合ですと、

  • テーマ名 Stork
  • 親テーマのディレクトリ名 stork

で、「クラス名がgrayの要素の背景をグレーにする」というコードを入れたかったのでこんな感じになりましたね↓

 

functions.php

functions.phpの編集ですね。

 

wordpress 子テーマ 作り方

 

次のように編集すると良いでしょう。

子テーマのファイル(style.css)を読み込むために必要な呪文を上に書き、その下に追加したい functions.php のコードを書いていきます。

 

ぼくの場合、コメント欄のフォーム数を減らしたかったので、

という感じで追加コードを記載し、子テーマのfunctions.phpを完成させました。

 
functions.phpの編集は要注意。一歩間違えるとWordPressのサイトが逝ってしまう可能性があるのでバックアップを取りつつ慎重に進めてくださいね

 

その他のファイル

最後にその他のファイル。

 

wordpress 子テーマ 作り方

 

その他のファイルとはstyle.cssとfunctions.php以外の WordPress のファイルをさしてます。

例えば、

  • header.php(主にヘッダー部分のコード)
  • single.php(投稿した記事を表示するコード)

などですね。

これらのファイルにつきましてはstyle.cssとfunctions.phpとは異なり、

親テーマのファイルをコピーして、それに編集箇所を追記して保存します。

 

例えばぼくの場合、storkテーマのsingle.phpにアドセンスの広告コードを挿入したかったのでこんな感じになりました。

 

 

なぜこのようにstyle.cssとfunctions.phpと扱いが違うのでしょうか??

じつは、これはWordPressの仕様上、style.cssとfunctions.php に関しては親と子のテーマの両方を読み込むようになっているからです。

そのため、この2つのファイルに関しては、親テーマの記述を子テーマで繰り返す必要はないのですね。

 

一方、それ以外の他ファイルに関しては事情が異なり、子テーマのファイルのみ読み込むようになってます。

だから「親テーマ内容+編集したい箇所」というファイルを子テーマのフォルダに加えるべきなんですね。

 

 

[3] WordPressの子テーマを指定箇所に入れる

あとは適切な場所に子テーマのフォルダをぶち込むだけです。

 

wordpress 子テーマ 作り方

 

ぶち込み方は簡単で、「FTP ソフト」を使っていきます。

ぼくはMacのCyberduckというソフトを使ってみました。

Cyberduck
カテゴリ: 仕事効率化
現在の価格: ¥2,900

子テーマのフォルダを入れる場所なのですが、場所が決まっておりまして、

wp-content>theme

の中ですね。

 

wordpress 子テーマ 作り方

 

つまり、親テーマと同じディレクトリに子テーマのフォルダを格納していくことになります。

 

 

[4] WordPress の子テーマを有効化する

あとは子テーマを有効化にするだけです。

 

wordpress 子テーマ 作り方

 

WordPress の管理画面から、「テーマ」と進んでみると、追加した子テーマが出現していることでしょう。

 

 

今回はこちらの子テーマを有効化してみます。

 

するとどうでしょう??

親テーマを引き継いだ子テーマが反映されているではありませんか!

 
CSSが反映されない場合、style.cssのファイルの「Template:」のところでしっかり親テーマのディレクトリ名が記載されているか確認してみてくださいね。ぼくも当初、CSSが反映されない事件に巻き込まれましたが、functions.phpの冒頭の記述ミスが原因でした。再度コードがあっているかチェックしてみましょう。

 

 

さあ、WordPressの子テーマを作成してテーマのバージョンアップに備えよう

以上が WordPress の子テーマの作り方でした。

複雑に見える「子テーマの作成」という作業も蓋を開けてみれば、

  1. 作成
  2. 編集
  3. 格納
  4. 有効化

の4ステップで簡単。

ゆっくり進めていけば初心者の方でも子テーマが作れますね。

 

wordpress 子テーマ 作り方

 

この子テーマの作り方をマスターしておくと、テーマをバージョンアップをしてもNo problem。

自分が編集した箇所がリセットされずに残ることになります。

 

5年ぐらい WordPress を触ってきましたが、ずっと避けてきた子テーマの作成ようやく着手することができました。

やっと、テーマのバージョンアップに怯えなくても大丈夫そうです笑

ぼくと同じく、子テーマを作らずに粘っている方は子テーマ作りに挑戦してみてくださいね。

 

それでは!

Lin


コメントはこちらからお願いします!



もう1本読んでみる