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

Tweet

Pocket

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

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

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

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

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

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

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

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

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

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

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

ロリポップログイン→ＷＥＢツール→ロリポップ！ＦＴＰ

WordPressフォルダ内にある「themes」フォルダに移動します。

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

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

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

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

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

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

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

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

と入力します。この二つのソースは子テーマのスタイルシートを作成する上で記入は必須です。
「Template」は親のテーマからデータを引っ張ってくるためのもので、「Theme Name」は子テーマの名前になります。「Theme 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」に名前に変更してアップロードする。

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

お疲れ様でした！