WordPress 子テーマの作り方をいい加減に学ぼうと思った
どうも、Linです。熱帯魚、泳がせてます。
WordPress のテーマを更新したら編集箇所が消えてしまった！！
FuuuuuuuK!!!
という経験はありませんか？？
ぼくにはあります笑
先日、 WordPress の某サイトで503エラーが発生してしまい、やけくそでテーマを更新したら編集箇所が一気に消えてしまったのです。
これまでめんどくさくて子テーマを作るのを拒否していたので、100%自己責任。。
そういった事件もありまして、
「今後は WordPress のテーマを更新しても編集箇所が消えないようにしよう」
と決心し、子テーマの作り方を一から勉強してみました。
なお、勉強にあたりこちらの神記事様たちを参考にさせていただきました↓
今日は子テーマの作り方を自分なりにまとめてみたので、ワードプレス初心者の方に参考にしていただけると嬉しいです。
WordPress 子テーマの作り方の基本
数々の神記事を読み漁った結果、次の4つのフェーズにわかれていると悟りました。
- 作る
- 編集する
- 入れる
- 有効化する
これらのステップを忠実に再現し、子テーマを作ることに成功すると、
- 子テーマでエラーが起きても親テーマには影響がない
- 親テーマを更新しても自分の編集箇所を残すことができる
という2つのメリットを享受できることができます。
それぞれのステップごとに見ていきましょう。
[1] WordPress の子テーマを作る
まずWordPress の子テーマ作るという作業ですね。
子テーマの作り方は次の2ステップ。
Step1. 子テーマ用のフォルダを作成する
最初にやるべきことは、
子テーマのファイルたちを入れるフォルダを作成するということです。
ここで重要になってくるのがフォルダの命名方法。
フォルダ名はぶっちゃけ何でもいいのですが、どのテーマの子テーマなのかはっきりさせるために、
テーマ名 – child
というフォルダ名が望ましいでしょう。
例えば、WordPressテーマ「ストーク」
の子テーマでしたら、
stork-child
となるわけです。
こちらのフォルダをPC のローカルにでも保存しておけば良いですね。
Step2. ファイル等を入れる
子テーマのフォルダにWordPress ファイルを入れて行きます。
ここで重要になってくるのが、
最低限入れる2つのファイルです。
それは、
- style.css
- functions.php
子テーマを作る際に編集する予定がなくても入れる必要があります。
空のファイルをテキストエディタで作成して子テーマフォルダにぶち込んでおきましょう。
ぼくはSublime Textというエディタを使いました
もし、それ以外に編集したいファイルがありましたら、テキストエディタで作成してフォルダに入れときましょう。
ぼくの場合ですと、style.css、functions.phpに加えてsingle.php、 header.phpも編集したかったので、
- style.css
- functions.php
- single.php
- header.php
という4つのファイルを子テーマフォルダ（stork-child）にぶち込んでおきました。
これで子テーマを作るフェーズは終了ですね。
[2] WordPress のテーマのファイルを編集する
先ほど作成したファイルたちをガンガン編集していきます。
style.css
まずデザインを決める style.cssの編集からです。
style.cssは次のように編集すると良いでしょう。
|
1 2 3 4 5 6 7 |
@charset "UTF-8"; /* Theme Name: テーマ名 + Child Template: 親テーマのディレクトリ名 */ 追加したいCSSコード |
決まり文句を書いてから、追加の CSS のコードを書いていきます。
ぼくの場合ですと、
- テーマ名 Stork
- 親テーマのディレクトリ名 stork
で、「クラス名がgrayの要素の背景をグレーにする」というコードを入れたかったのでこんな感じになりましたね↓
|
1 2 3 4 5 6 7 8 9 10 |
@charset "UTF-8"; /* Theme Name: Stork Child Template: stork */ .gray{ padding: 16px; background-color: #f7f7f7; margin-top: 30px; margin-bottom: 30px; } |
functions.php
functions.phpの編集ですね。
次のように編集すると良いでしょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php // 子テーマのstyle.cssを後から読み込む 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') ); } ＋追加するコード |
子テーマのファイル（style.css）を読み込むために必要な呪文を上に書き、その下に追加したい functions.php のコードを書いていきます。
ぼくの場合、コメント欄のフォーム数を減らしたかったので、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php // 子テーマのstyle.cssを後から読み込む 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') ); } //コメントからEmailとウェブサイトを削除 function my_comment_form_remove($arg) { $arg['email'] = ''; $arg['url'] = ''; return $arg; } add_filter('comment_form_default_fields', 'my_comment_form_remove'); |
という感じで追加コードを記載し、子テーマのfunctions.phpを完成させました。
functions.phpの編集は要注意。一歩間違えると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の子テーマを指定箇所に入れる
あとは適切な場所に子テーマのフォルダをぶち込むだけです。
ぶち込み方は簡単で、「FTP ソフト」を使っていきます。
ぼくはMacのCyberduckというソフトを使ってみました。
子テーマのフォルダを入れる場所なのですが、場所が決まっておりまして、
wp-content＞theme
の中ですね。
つまり、親テーマと同じディレクトリに子テーマのフォルダを格納していくことになります。
[4] WordPress の子テーマを有効化する
あとは子テーマを有効化にするだけです。
WordPress の管理画面から、「テーマ」と進んでみると、追加した子テーマが出現していることでしょう。
今回はこちらの子テーマを有効化してみます。
するとどうでしょう？？
親テーマを引き継いだ子テーマが反映されているではありませんか！
CSSが反映されない場合、style.cssのファイルの「Template:」のところでしっかり親テーマのディレクトリ名が記載されているか確認してみてくださいね。ぼくも当初、CSSが反映されない事件に巻き込まれましたが、functions.phpの冒頭の記述ミスが原因でした。再度コードがあっているかチェックしてみましょう。
さあ、WordPressの子テーマを作成してテーマのバージョンアップに備えよう
以上が WordPress の子テーマの作り方でした。
複雑に見える「子テーマの作成」という作業も蓋を開けてみれば、
- 作成
- 編集
- 格納
- 有効化
の4ステップで簡単。
ゆっくり進めていけば初心者の方でも子テーマが作れますね。
この子テーマの作り方をマスターしておくと、テーマをバージョンアップをしてもNo problem。
自分が編集した箇所がリセットされずに残ることになります。
5年ぐらい WordPress を触ってきましたが、ずっと避けてきた子テーマの作成ようやく着手することができました。
やっと、テーマのバージョンアップに怯えなくても大丈夫そうです笑
ぼくと同じく、子テーマを作らずに粘っている方は子テーマ作りに挑戦してみてくださいね。
それでは！
Lin
新卒で入ったネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いしている
