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

目次
親テーマのアップデート時などに非常に便利な子テーマを導入
子テーマって何??と云う方は、去年の2月17日に書かせて頂いたこちらの記事、
を読んで頂けたら助かります。簡単に説明するとブログのデザインを決める「スタイルシート(style.css)」と云うファイルが各テーマの中にはあるのですが、アップデートなどでスタイルシートが変更されてしまったとき、それまで自分が変更していた設定(数値)も一緒に変更されてしまうため、別にファイル(子テーマ)を作って、そこに自分のカスタマイズしたい項目だけを記載して、データが消えないようにする為の便利な方法です。
「なぜデフォルトでそうなっていないのか?」
とか思った人は私も知りたいのでググってみてください(笑)あと、前回の記事に自分の知識の無さで修正点など多々ありますが、ここに修正点も記載して行こうかと思います。こちらの記事はWordPressを始めたばかりの初心者さん向けの記事となっております。よろしくお願いいたします。
Stinger3からStinger5へ移行
ENJIさんが開発者のSEOに非常に有利だと言われているこの「Stinger」シリーズですが、先日、(と言っても結構前ですが、、、)レスポンシブル対応となるテーマ「Stinger5」を配布しはじめました。
レスポンシブWebデザイン(Responsive Web Design)は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。 ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。
Googleさんより
Stinger5になってスタイルシートの変更点も多かったので、そのまま親テーマだけ変更するということは出来ませんでした。その辺の記事も今後書いて行こうかなと模索しております。
最新版 Stinger5をダウンロード
まだ最新版のStinger5をダウンロードしていない方は下記のページからどうぞ!
Stinger5の子テーマを作成します
stinger5_childと名付けた新規フォルダを作成
お使いのFTPアプリケーションでテーマが入っているフォルダにアクセスします。URL/wp-content/themes/の中にStinger5が入っていますが、そこと同じ階層に新たに「stinger5_child」と名付けた新規フォルダを作成します。
子テーマの中に新規でstyel.cssを作る
次に、新規でstyel.cssを作り(テキストか何かでsytleと書いたファイルを作って拡張しを.cssに変更)そして先程作った子テーマの中に入れる。
次に子テーマの中に親テーマに関する記述を記載します。下記をコピペしてお使いください。
/* Theme Name: stinger5_child Template: stinger5ver20141227 */ @import url('../stinger5ver20141227/style.css');
注意点としては親テーマのバージョンによっては子テーマの日付も変更が必要となります。自分の場合、親テーマのバージョンは「20141227」となっているので下のTemplate: の所も「stinger5ver20141227」になっています。
これでとりあえず子テーマの設置は完了です。
親テーマのフォルダに入っている、他のファイルはどうしたらよい?
このテーマの親子関係ですが、WordPressは子テーマに書いてあることを優先して読み込みその後足りない情報を親テーマから引っ張ってくる仕組みになっているらしいです。なので変更したいファイルがあれば親テーマからコピーして変更を加えるのが良いかもしれません。
これだけは注意「functions.php」
「functions.php」も他のファイルと同じように親テーマからコピーして使おうとするとブログが真っ白になって焦ります。自分も過去に何度かやってしまいました、、、Stinger3の時は親テーマの「functions.php」を変更して使っていましたが、先程、新規でスタイルシートを作った時と同じように「functions.php」と云うなのファイルを作って一行目に
<?php
と記述して(<は半角でお願いいたします。)その後二行目から追加の文章を記載すれば子テーマとして機能するようです。
WordPressのダッシュボードから子テーマを適用
WordPressのダッシュボードから子テーマを適用します。ダッシュボード → 外観 → テーマ → 「stinger5_child」を選択してブログを確認します。問題なく設定が出来ていれば無事Stinge5が表示されます。
最後に
いかがでしたでしょうか?今後はStinger5のカスタマイズ情報なども少しずつアップして行けたらと考えています。読んで頂いてありがとうございました。
-
前の記事
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示 2014.04.27
-
次の記事
Softbankから通話機能付き格安SIMのIIJmioふぉんにMNP転入してみた 2015.02.07