【WordPress】子テーマを作成しよう！
使用しているテーマをカスタマイズするにあたって作成しておきたいのが「子テーマ」です。
私は以前「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」 ： 子テーマの名前
のソースを追加します。今回の場合は
|
1 2 |
Theme Name:ttchild Template: twentytwelve |
と入力します。この二つのソースは子テーマのスタイルシートを作成する上で記入は必須です。
「Template」は親のテーマからデータを引っ張ってくるためのもので、「Theme Name」は子テーマの名前になります。「Theme URI（子テーマのＵＲＩ）」や「Description:（子テーマの説明）」なども設定することができますが、今回はしていません。
上の二つだけは必ず入力することだけは覚えましょう。
今回の場合は子テーマの名前は「ttchild」と命名し、親テーマは「twentytwelve」です。ここでもスペルの大文字、小文字は注意してください。
さてこれで、スタイルシートを作成は完了です。
この状態で、「外観」から子テーマが確認できるはずなので覗いてみましょう。
まだ画像もなければ、有効化もできない状態ですね。
この状態でライブプレビューで確認してみると、ブログのデザインが崩れると思います。
まだ親テーマからデータを引っ張ってくるテキストが完成してないのが原因ですね。
では親テーマからデータを継承する設定を行っていきましょう
「functions.php」の作成
「functions.php」というファイルを「子テーマ」フォルダ内に作成します。
そしてテキストに下のソースタグを記載します。
|
1 2 3 4 5 6 |
<?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' ); } ?> |
このソースを入力して保存すれば、「functions.php」の設定は完了です。
一応子テーマのスタイルシートの一番下に
@import url(“../●●●/style.css”);
というソースを加える方法もあるみたいなのですが、WordPressのパフォーマンスが低下するらしいので今回は使用していません。
さて、これで先程うまく機能しなかった子テーマが機能をするはずです。
先程のように「外観」から子テーマをプレビュー、または有効化してみましょう。親テーマと同じレイアウトができているはずです。
ここから子テーマのみ、お好みでカスタマイズしていくわけですね。
さて最後に「子テーマ」のスクリーンショット画像を挿入して一段落にしましょう。
テーマのスクリーンショットを設定する
設定したい画像を用意し、名前を「screenshot.png」にします。
これを子テーマフォルダに入れるだけです。
子テーマに、スクリーンショットが映し出されていれば成功です。
まとめ
- 子テーマは親テーマのデザインを継承するものである。カスタマイズする時は、子テーマの変更したい部分だけでよい
- 子テーマを作成し、カスタマイズしていかないと、親テーマがアップデートされた場合に、カスタマイズした箇所が全て上書きされてしまう。
- 子テーマスタイルシートを作成する。「Theme Name:〇〇〇」、「 Template: △△△」は記入必須である。
- 「functions.php」を作成する。@import url(“../●●●/style.css”);を使えるが、WordPressのぱパフォーマンスが低下してしまう。
- 子テーマのスクリーンショットを映したければ、子テーマフォルダ内に好きな画像を「screenshot.png」に名前に変更してアップロードする。
はい、今回は子テーマの作成方法メモでしたφ(・＿・”)ﾒﾓﾒﾓ
お疲れ様でした！
