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

Sponsored Link


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

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

 

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

FuuuuuuuK!!!

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

 

僕にはあります笑

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

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

 

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

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

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

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

 

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

 

 

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

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

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

 

wordpress 子テーマ 作り方

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

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

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

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

 

 

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

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

wordpress 子テーマ 作り方

子テーマの作り方は次の2ステップを踏むといいでしょう。

 

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

最初にやるべきことは、

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

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

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

テーマ名 – child

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

 

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

stork-child

となるわけです。

wordpress 子テーマ 作り方

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

 

Step2. ファイル等を入れる

先ほど作成した子テーマのフォルダに編集したい WordPress のファイル等を入れて行きます。

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

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

それは、

  1. style.css
  2. functions.php

の2つ。

wordpress 子テーマ 作り方

こちらは子テーマを作る際に別に編集する予定がなくても入れる必要があるので、まずは空のファイルをテキストエディターなので作成して子テーマフォルダにぶち込んでおきましょう。

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

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

wordpress 子テーマ 作り方

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

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

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

wordpress 子テーマ 作り方

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

 

 

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

次のフェーズでは、先ほど作成した白紙のWordPress の子テーマのファイルたちをガンガン編集していきます。

wordpress 子テーマ 作り方

 

style.css

まず WordPress のサイトのデザイン何かを決める 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 のテーマの作成・編集は終了です。

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

wordpress 子テーマ 作り方

ぶち込み方は簡単で FTP ソフトというサーバー内のファイルを出したり入れたり消したりできるソフトを使って行きます。

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

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

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

wp-content>theme

の中ですね。

wordpress 子テーマ 作り方

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

 

 

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

さていよいよ最後のステップです。

ここまできましたらあとは子テーマを有効化にするだけです。

wordpress 子テーマ 作り方

WordPress の管理画面から、テーマと進んで見ると、先ほど追加した子テーマの 項目が出現していることでしょう。

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

 

するとどうでしょう??

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

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

 

 

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

以上が WordPress の子テーマの作り方でした。一見、複雑に見える子テーマの作成という作業も蓋を開けてみれば、

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

の4Stepでしたので細かくゆっくり作業を進めていけば初心者の方でも子テーマが作れますね。

wordpress 子テーマ 作り方

この子テーマの作り方を一旦マスターしておくと、テーマをバージョンアップをしてもノープレ部レム。

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

僕はこれは5年ぐらい WordPress を触ってきましたが、ずっと避けてきた子テーマの作成ようやくマスターできました。

もうこれ以上テーマのバージョンアップに怯えなくても大丈夫そうです笑

僕と同じように子テーマを作らずに親テーマで粘っている方はこれを機会に子テーマ作りに挑戦してみてくださいね。

 

それでは!

Lin

飯橋凛(Ihashi Lin)

インターネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いにはまっている。


Sponsored Link

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



もう1本読んでみる