記事ページをカスタマイズしたい。え?記事下にこんな「いいね!ボタン」も設置したいし。
こんなオリジナルシェアボタンだって作りたい。
わかる!わかるぞ!私もしばらく見て見ぬふりをしていた一人。やってみたら作業は簡単。知識が先行すると億劫になるだけ。安心するために、ラクになるために。子テーマなんてサクッと作ってしまおう。
まずは「作り方」のみにフォーカス。ややこしい仕組みは後で説明。実作業は10分で終わらせよう。早く寝よう。明日も早い。
簡単2ステップの作業順
1. 三つのファイルをコピペでつくる(所要時間8分)
2. アップロードして有効化(所要時間2分)
これだけ。
上の画像がゴールの図。子テーマを有効化してる状態。早速おっぱじめますか。
スタートッ!!
1. 三つのファイルをコピペでつくる
いきなりですが最後にアップロードするフォルダーを作ります。好きな名前でOKですが使用テーマ名に「-child」とつければ分かりやすい。ここでは「MAG-child」で。
「functions.php」をつくる
テキストエディタに下の記述をコピー&ペースト。「functions.php」と名前を付けて「MAG-child」フォルダー内に保存します。書き換えの必要もなし。そのままでOK。
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); }
子テーマ作成もカスタマイズのひとつ。自己責任の上で行ってください。
「style.css」をつくる
テキストエディタに下の記述をコピー&ペースト。
/* Theme Name:MAG-child Template:mag_tcd036 Version:1.23 */
「さっき作ったフォルダー名に書き換え。
」の右側は「親テーマのフォルダー名に書き換え。
」の右側は「親テーマの現行バージョンに書き換え。
」の右側は調べ方も簡単。親テーマのフォルダー名はレンタルサーバー内を覗くとわかります。
「wp-content/themes/」直下にあるはず。
サーバーを覗いたついでに、親テーマフォルダー直下からこんなファイルをダウンロードしておきましょう。
ひとつだけある、「●●.png」や「●●.jpg」の画像ファイル。コレがあれば最後、テーマの一覧ページにこんな違いが出ます。
これだけのこと。でも気分違うでしょ。
そのまま「MAG-child」フォルダー内に保存しておきます。
親テーマの現行バージョンも、WordPress管理画面「外観」⇒「テーマの編集」に入ると「style.css」が表示され、そこの一番上に書いてあるのですぐに分かります。
で、この例での完成形はこうなるワケです。
/* Theme Name:MAG-child Template:mag_tcd036 Version:1.23 */
「style.css」と名前を付けて、同様に「MAG-child」フォルダー内に保存。
「screenshot.png」は上の【省略可】のプルダウンセクションで説明したファイルです。
無くても問題なし。
「single.php」をつくる
今回は記事ページをカスタマイズするので、「single.php」をつくります。「外観」⇒「テーマの編集」⇒右カラムから「個別投稿(single.php)」を選択。全選択してテキストエディタにコピペするだけ。
「single.php」と名前を付けて、同様に「MAG-child」フォルダー内に保存。
ハイ、準備が整いました。ここまでの実作業時間8分。
2. アップロードして有効化
かっ飛ばしていきましょう。まずは「MAG-child」フォルダーを圧縮!
「外観」⇒「テーマ」⇒「新規追加」⇒「テーマのアップロード」!
「ファイルを選択」から用意した圧縮ファイルを選択!⇒「今すぐインストール」!有効化!
ゴォォオールッ!!
子テーマ完成です。お疲れ様でした!実作業時間10分。(でも焦って作業しないでくださいね・・)
現状でサイトの状態は親テーマと全く変わらない状態。カスタマイズしていたとしても変わらない。念のためサイト表示を確認しておきますか。・・・大丈夫だった?じゃあ、子テーマ作成は完了。カスタマイズしてもいいし、いったん寝てもいい。自由です。
・
もう、いつでも自由にカスタマイズできる
「外観」⇒「テーマの編集」に入れば、デフォルトで子テーマの編集画面になっているので
記事ページをカスタマイズするなら、右カラム「個別投稿(single.php)」を選択して、自由にいじってOK。ご想像どおりここでは親テーマを直接編集するわけではないので、テーマをアップデートしてもカスタマイズが消えることはありません。オメデトゴザイマス。
これで、こんなカスタマイズも安心して試せますね。
オリジナルシェアボタンの作り方も、今後紹介する予定です。
絶対に目を通してほしいこと
さて、今回は「子テーマの作り方」にフォーカスして紹介してきました。作り方だけであれば、実作業はほんのちょっとだということが伝わったかと思います。
ただし!本当は知っておくべき知識は省いてきました。「子テーマの仕組みと注意点」。下のプルダウンに図解付きでまとめているので、落ち着いたら絶対に目を通してください。
子テーマの仕組み
今回「functions.php」と「style.css」に書いた記述は、あくまで子テーマを認識させるだけの記述です。
これまでの作業でなんとなく想像できるかもしれませんが、テーマファイルは基本的に、「親テーマ⇒子テーマ」の順に読み込まれます。例えば今回の場合、子テーマに追加した「single.php」は、親テーマの「single.php」の後に読み込まれるということ。
上の図のようにデータは上書きされ、実際のサイトには、子テーマの「single.php」の内容が表示される、というわけ。だから子テーマ側のカスタマイズが反映されるんですね。
基本的にはどのテンプレートファイル(「●●.php」)も、子テーマ側の同名ファイルに上書きされてサイト表示されます。つまり今回と同じ手順で子テーマに入れておくだけで、どのファイルにも同じように「安心カスタマイズ」ができる、ということ。
「style.css」は “上書き” ではなく “追加” される
テンプレートファイル(「●●.php」)とは違い、「style.css」はちょっと特殊。同じように「親テーマ⇒子テーマ」の順に読み込まれますが、上書きされることはありません。
親テーマの「style.css」の内容に、子テーマの「style.css」の内容が追加された形で出力されます。
思い出してみると・・そりゃそーですよね。子テーマを作ったとき、「style.css」の中身はこれだけでした。
/* Theme Name:MAG-child Template:mag_tcd036 Version:1.23 */
この記述の後に追記したCSSは、親テーマがアップデートされても消えないので安心です。その他のテンプレートファイルと一緒ですね。
/* Theme Name:MAG-child Template:mag_tcd036 Version:1.23 */ /***** line3 *****/ .line3 { position: relative; margin: 1.2em 0 1.2em; padding: .7em 0; border-radius: 4px; background-color: #6B6B6B; color: #ffffff; font-size: 1.1em; text-align: center; clear: both; }
TCDテーマであれば、テーマオプション内の「カスタムCSS」に追記してもOK。テーマをアップデートしてもそのまんま。子テーマ同様の安心。優しさ。初心者への愛。
テーマアップデート時の注意点
アップデート時の基本的な注意点はこちらが参考になります。
で、子テーマを利用している場合、親テーマをアップデートしても「もっと最新版がありますよー更新しなさいー」といつまでも通知され続けることがあります。
と気にするほどでもないことなんですが、
。これはちょっとキモチワルイ。「子テーマあるある」のひとつです。これも即解消できます。アップデートした親テーマのバージョンを見てみるともちろん
新しくなってます。じゃあ子テーマは?変わってるハズないですよね。これは面倒ですが手動で書き直してやりましょう。
無事、通知も消えました。子テーマの恩恵に比べれば、ラクな作業ですね。ちなみに、同じ「テーマの編集」画面内、右上プルダウンから、編集するテーマを切り替えられます。バージョンの書き換えのためだけに、わざわざ親テーマを有効化する必要はありません。