【WordPress】子テーマを作成しよう!

Pocket

使用しているテーマをカスタマイズするにあたって作成しておきたいのが「子テーマ」です。

私は以前「Twenty Twelve」のテーマを使用していたのですが、テーマをスタイルシート等で直接カスタマイズしてしまうと、バージョンアップ等を行った際テーマが上書きされてしまいます。

せっかくカスタマイズしたのに上書きで消えてしまうんですね(|||゚Д゚)

そこで「子テーマ」の出番です。今回は「Twenty Twelve」というテーマを例にして子テーマを作ってみます。

子テーマを作成するメリットは、子テーマをカスタマイズして、その設定をブログに反映できることですね。
親テーマをいじることなく、カスタマイズすることができます。これで親テーマがアップデートされても、子テーマでカスタマイズした設定は残り続けるんですね(*’ω’*)

さらにブログの固定ページなどで、特定のページだけ違うデザインで投稿したいという時にも子テーマは役に立ちます。

例えば親テーマのフォントサイズが16pxで統一されているとしましょう。でもある固定ページでは文字のサイズを14pxで表示したいなって思った時に、文字サイズ14pxの子テーマをそのページだけに反映させることで、そのページにのみ文字サイズを14pxで表示することができます。

テーマをカスタマイズするにあたって、「子テーマ」の作成は必須とも呼べるものなので、是非とも作り方を知っておきましょう。φ(・_・”)メモメモ

「子テーマフォルダ」の作成

「子テーマ」とは元となる「親テーマ」の全機能を継承します。その中で必要な箇所だけカスタマイズしていくんですね。
まずは元となる「親テーマ」が格納されている「themes」フォルダ内に「子テーマフォルダ」を作成します。

私はロリポップレンタルサーバーを使用しているので、ロリポップ!FTPを使用してフォルダにアクセス及び、スタイルシートの記述をしていきます。
お使いの環境によっては、先にスタイルシートを作成してからアップロードという形になるかもしれません。
ロリポップFTP

ロリポップログイン→WEBツール→ロリポップ!FTP

 

WordPressフォルダ内にある「themes」フォルダに移動します。
子テーマを作成する

「themes」フォルダ内には、使用しているテーマや、ダウンロードしたテーマが格納されているはずです。
親となるテーマと同じフォルダ内に「子テーマ」フォルダを作成します。

上部の「新規フォルダ作成」から子テーマフォルダを新規作成。

子テーマフォルダ

諸注意として、子テーマのフォルダには「〇〇〇〇-of-child」という名前をつけます。「〇〇〇〇-child」でも大丈夫のようですね。
〇〇〇〇の中には親となるフォルダ名を入れます。この「child」を使用したフォルダ命名は子テーマを作成する上での決まり事です。この「child」をWordPressは子テーマだと認識するんですね。
またフォルダ名は大文字、小文字を識別しますので、親テーマの名称を間違えず入力してください。

 

子テーマのスタイルシートを作成する

子テーマを作成する

子テーマフォルダ内に新規ファイル作成ボタンをクリックし、CSSファイルを作成します。

 

子テーマを作成する

ファイル名は「style.css」とします。そしてテキストには

  • 「Template」 : 親テーマのディレクトリ名
  • 「Theme Name」 : 子テーマの名前

のソースを追加します。今回の場合は

と入力します。この二つのソースは子テーマのスタイルシートを作成する上で記入は必須です。
「Template」は親のテーマからデータを引っ張ってくるためのもので、「Theme Name」は子テーマの名前になります。「Theme URI(子テーマのURI)」や「Description:(子テーマの説明)」なども設定することができますが、今回はしていません。
上の二つだけは必ず入力することだけは覚えましょう。

今回の場合は子テーマの名前は「ttchild」と命名し、親テーマは「twentytwelve」です。ここでもスペルの大文字、小文字は注意してください。

 

さてこれで、スタイルシートを作成は完了です。
この状態で、「外観」から子テーマが確認できるはずなので覗いてみましょう。

子テーマを作成する

まだ画像もなければ、有効化もできない状態ですね。
この状態でライブプレビューで確認してみると、ブログのデザインが崩れると思います。
まだ親テーマからデータを引っ張ってくるテキストが完成してないのが原因ですね。

では親テーマからデータを継承する設定を行っていきましょう

「functions.php」の作成

「functions.php」というファイルを「子テーマ」フォルダ内に作成します。
子テーマを作成する

そしてテキストに下のソースタグを記載します。

 

このソースを入力して保存すれば、「functions.php」の設定は完了です。

 

一応子テーマのスタイルシートの一番下に

@import url(“../●●●/style.css”);

というソースを加える方法もあるみたいなのですが、WordPressのパフォーマンスが低下するらしいので今回は使用していません。

さて、これで先程うまく機能しなかった子テーマが機能をするはずです。

先程のように「外観」から子テーマをプレビュー、または有効化してみましょう。親テーマと同じレイアウトができているはずです。

ここから子テーマのみ、お好みでカスタマイズしていくわけですね。

さて最後に「子テーマ」のスクリーンショット画像を挿入して一段落にしましょう。

テーマのスクリーンショットを設定する

設定したい画像を用意し、名前を「screenshot.png」にします。
これを子テーマフォルダに入れるだけです。

子テーマを作成する

子テーマを作成する

子テーマに、スクリーンショットが映し出されていれば成功です。

まとめ

  • 子テーマは親テーマのデザインを継承するものである。カスタマイズする時は、子テーマの変更したい部分だけでよい
  • 子テーマを作成し、カスタマイズしていかないと、親テーマがアップデートされた場合に、カスタマイズした箇所が全て上書きされてしまう。
  • 子テーマスタイルシートを作成する。「Theme Name:〇〇〇」、「 Template: △△△」は記入必須である。
  • 「functions.php」を作成する。@import url(“../●●●/style.css”);を使えるが、WordPressのぱパフォーマンスが低下してしまう。
  • 子テーマのスクリーンショットを映したければ、子テーマフォルダ内に好きな画像を「screenshot.png」に名前に変更してアップロードする。

はい、今回は子テーマの作成方法メモでしたφ(・_・”)メモメモ

お疲れ様でした!

エッグ

シェアする

コメントを残す

メールアドレスが公開されることはありません。

コメントする