WordPressテーマ「Stinger5」に子テーマを導入する方法

2015.02.06
WORDPRESS

親テーマのアップデート時などに非常に便利な子テーマを導入
- Stinger3からStinger5へ移行
- 最新版 Stinger5をダウンロード
Stinger5の子テーマを作成します
- stinger5_childと名付けた新規フォルダを作成
- 子テーマの中に新規でstyel.cssを作る
親テーマのフォルダに入っている、他のファイルはどうしたらよい？
- これだけは注意「functions.php」
WordPressのダッシュボードから子テーマを適用
- 最後に

親テーマのアップデート時などに非常に便利な子テーマを導入

子テーマって何？？と云う方は、去年の２月１７日に書かせて頂いたこちらの記事、

WordPressテーマ「Stinger3」に子テーマを導入する方法 | dmgadget(ディーエムガジェット)

を読んで頂けたら助かります。簡単に説明するとブログのデザインを決める「スタイルシート（style.css）」と云うファイルが各テーマの中にはあるのですが、アップデートなどでスタイルシートが変更されてしまったとき、それまで自分が変更していた設定（数値）も一緒に変更されてしまうため、別にファイル（子テーマ）を作って、そこに自分のカスタマイズしたい項目だけを記載して、データが消えないようにする為の便利な方法です。

「なぜデフォルトでそうなっていないのか？」　

とか思った人は私も知りたいのでググってみてください（笑）あと、前回の記事に自分の知識の無さで修正点など多々ありますが、ここに修正点も記載して行こうかと思います。こちらの記事はWordPressを始めたばかりの初心者さん向けの記事となっております。よろしくお願いいたします。

Stinger3からStinger5へ移行

ENJIさんが開発者のSEOに非常に有利だと言われているこの「Stinger」シリーズですが、先日、（と言っても結構前ですが、、、）レスポンシブル対応となるテーマ「Stinger5」を配布しはじめました。

レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。

Googleさんより

Stinger5になってスタイルシートの変更点も多かったので、そのまま親テーマだけ変更するということは出来ませんでした。その辺の記事も今後書いて行こうかなと模索しております。

Stinger5の子テーマを作成します

stinger5_childと名付けた新規フォルダを作成

お使いのFTPアプリケーションでテーマが入っているフォルダにアクセスします。URL/wp-content/themes/の中にStinger5が入っていますが、そこと同じ階層に新たに「stinger5_child」と名付けた新規フォルダを作成します。

WordPressテーマ「Stinger5」に子テーマを導入する方法

子テーマの中に新規でstyel.cssを作る

次に、新規でstyel.cssを作り(テキストか何かでsytleと書いたファイルを作って拡張しを.cssに変更）そして先程作った子テーマの中に入れる。

次に子テーマの中に親テーマに関する記述を記載します。下記をコピペしてお使いください。

/*
Theme Name: stinger5_child
Template: stinger5ver20141227
*/
 
@import url('../stinger5ver20141227/style.css');

注意点としては親テーマのバージョンによっては子テーマの日付も変更が必要となります。自分の場合、親テーマのバージョンは「20141227」となっているので下のTemplate: の所も「stinger5ver20141227」になっています。

WordPressテーマ「Stinger5」に子テーマを導入する方法

これでとりあえず子テーマの設置は完了です。

親テーマのフォルダに入っている、他のファイルはどうしたらよい？

このテーマの親子関係ですが、WordPressは子テーマに書いてあることを優先して読み込みその後足りない情報を親テーマから引っ張ってくる仕組みになっているらしいです。なので変更したいファイルがあれば親テーマからコピーして変更を加えるのが良いかもしれません。

これだけは注意「functions.php」

「functions.php」も他のファイルと同じように親テーマからコピーして使おうとするとブログが真っ白になって焦ります。自分も過去に何度かやってしまいました、、、Stinger3の時は親テーマの「functions.php」を変更して使っていましたが、先程、新規でスタイルシートを作った時と同じように「functions.php」と云うなのファイルを作って一行目に

＜?php

と記述して（＜は半角でお願いいたします。)その後二行目から追加の文章を記載すれば子テーマとして機能するようです。