WordPressのテーマの編集やカスタマイズをする前に絶対に準備しておいて欲しい子テーマの作成方法について説明します。
テーマをカスタマイズする際に、元の親テーマを編集するのもいいですがそのテーマのアップデートなどで毎回消えてしまうので、子テーマでのカスタマイズがオススメです。なので、今回は私自身が最初に苦戦した部分も含めて、「子テーマの作り方」と「有効化」に関してご紹介します。
子テーマを作成しておけば、購入したテーマや無料のテーマが更新された時でも、自分がカスタマイズしたCSSなどは、しっかり保存されているので、安心なのですが、子テーマを最初に作った時、解決できないことが１つあって、ハマったのでその部分を抑えながら、子テーマの作り方・有効化の方法をご紹介していきます。
みっぴー（@bennriya_mi）です～。
アイキャッチを変えただけで、広告表示回数が5倍になりました。（こっそり独り言）
今回、そのアイキャッチを誰でも使えるようにテンプレにしました。
詳しくは、下記にて
目次
子テーマとは？
まず、子テーマとは簡単にいえば今使っているテーマの分身とか子供みたいなイメージです。
wordPressで利用するテーマは主に、phpファイルやCSSファイルの集まりで構成されています。その１つ１つのファイルが１つのテーマの中に沢山入っています。
子テーマを作ると親テーマの情報を引き継ぎながら、子テーマの設定が優先されますのでカスタマイズがブログで表示される形になります。
子テーマ有効化までの流れ
- 子テーマのフォルダをFTPで作成する
- 子テーマのファイルをFTPで作成する
- 子テーマを有効化する
このような流れになります。
１．子テーマのフォルダをFTPで作成する
まず、FTPにログインしてください。
私は、ロリポップ！
のレンタルサーバーを使っているので、ロリポップの画像での説明になります。
ロリポップ以外をお使いの方は恐らく、各レンタルサーバーの機能としてFTPが備わっているはずですので、レンタルサーバーのサイトに接続して探してみてください。
FTPにログインしたら「wp-content」⇒「themes」まで進んでください。
↓
「themes」まで進んだら、フォルダを作成するボタンを押してください。
押すとフォルダ名を編集する画面になるので、子テーマだということが分かるように名前を付けてください。 私は見本としてTwenty Twelveの子テーマを作るので「tt-child」とつけました。
みなさんも、分かりやすい名前を付けて下のほうにある「保存ボタン」を押してください。
そうすると新しいフォルダが出来ているのでそこをクリックし中に入ってください。今は、そのフォルダの中に何もないと思いますのでこれから１つ、ファイルを作ります。
２．子テーマのファイルをFTPで作成
では、次にファイルを追加していきます。 ファイル追加を押してください。
この時、私はフォルダとファイルを間違えました(*´ω｀*)
「ファイル」の作成をしてくださいね。
ファイル新規追加を押すと、ファイル名を編集する画面になりますので下記のように入力してください。
style.css
そして、本文に下記をコピーして保存してください。※お使いのテーマによって、記載内容が異なるので詳しくは下記で説明します。
/*
Theme Name: tt-child
Template: twentytwelve
*/
@import url('../twentytwelve/style.css');実際の画面は下記のようになります。
※これは、親テーマの情報をこの子テーマで引き継いで使います。みたいな命令で親テーマの情報を呼び出してくれます。
記載した内容の説明
まず、Theme Name: tt-child
この部分のTheme Name:の後ろはその子テーマの名前です。さっき自分で付けたフォルダ名のことですね。それをここに記入してください。
そして次に、Template: twentytwelve
この部分は、元の親テーマの名前です。あなたが使っているテーマの名前をここに入れてください。
親テーマのスタイルシート (style.css)の上部に書かれていることがほとんどです。
WordPressの管理画面の「外観」⇒「テーマの編集」⇒「style.css」と進むとあります。
Twenty Twelveは、このように書かれてました↓
Theme Name: Twenty Twelve Theme URI: https://wordpress.org/themes/twentytwelve/
この名前部分とURIのthemes/よりも後ろをそのまま当てはめればＯＫです。
そして、最後に、@import url('../twentytwelve/style.css');
この部分はどのテーマからデータを引き継ぐのか命令をしている部分です。
/twentytwelve/
この「twentytwelve」の部分は、あなたがお使いのテーマ名に変えてください。
まとめると下記のような感じです。
/*
Theme Name: tt-child(あなたが付けたフォルダ名を入れる)
Template: twentytwelve(お使いのテーマ名を入れる)
*/
@import url('../twentytwelve(お使いのテーマ名を入れる)/style.css');３．子テーマを有効化する
上記が終わりましたら次に今回作った子テーマを有効化していきます。
WordPressの管理画面の「外観」⇒「テーマ」と進んでください。右側にテーマが色々出てくると思いますが、その中にさっき作った「tt-child」があるはずです。それを選択して有効化してください。
※もし、ない場合は１番下まで進んでください。
「tt-child」はエラーです。といったメッセージが出ていたら、恐らく今までの過程で何かしらミスがあったんだと思います。
上記の手順を最初からよく確認しながら行ってみてください。私もそうでしたが、最初は子テーマCSSの本文の部分
/*
Theme Name: tt-child(あなたが付けたフォルダ名を入れる)
Template: twentytwelve(お使いのテーマ名を入れる)
*/
@import url('../twentytwelve(お使いのテーマ名を入れる)/style.css');上記のこの部分で何かしらミスがあり、エラーになってました。
もし、エラー表示が出てる方は、親テーマの名前などに間違いがないかどうか確認してください。
子テーマにあると便利なファイル
子テーマが無事、有効化出来たら同じ要領で今後、カスタマイズで使うであろうメインのファイルをコピーしておくと後々、便利です。
主にカスタマイズで使うのは
content.phpheader.phpsingle.phpこのあたりですかね。
ここで、１つ注意ですが、「functions.php」これ
functions.phpのファイルだけは特殊で、この操作を誤るとブログが表示されなくなります。管理画面にも入れなくなるので、最初はパニックになります。
なので、今はこのファイルはいじらないようにしたほうが無難です。
他のファイルも子テーマに追加する方法
CSS以外のファイルを子テーマにて作る場合の手順は先ほどとほぼ、同じなのですが説明しておきます。
ここでは例として、content.phpを追加していきます。ロリポップのFTPにログインし wp-content⇒themes⇒tt-child(あなたが作った子テーマのフォルダ)まで進んでください。
そして、そこでファイル新規追加を押して、追加したいphpファイルの名前
content.php
をファイル名に入れてください。
本文のところは、元の親テーマのcontent.phpファイルを全部コピーしちゃいます。方法は、別タブでWordpressの管理画面を出し外観⇒テーマの編集と進んでください。
そして右上の編集するテーマを選択:からあなたが使いたい親テーマを探し、選択を押してください。
右側にphpのファイルが出てくると思いますのでその中からcontent.phpを探してクリックしてください。
content.phpのファイルの中身が表示されますので全てコピーしてください。
そしたら、FTPの画面に戻り下の本文部分に貼り付けてください。貼り付けたら保存して完了。
これで、子テーマ(tt-child)の中に親テーマの情報を引き継いだcontent.phpのファイルが出来ました。
content.phpをカスタマイズする時は、子テーマ内のcontent.phpのファイルを編集していく形になります。
以上で、子テーマの作成と有効化は完了です。
canvaで使えるアイキャッチテンプレート150種類を作りました！
