ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

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

      2015/02/16

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

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

子テーマって何??と云う方は、去年の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」と名付けた新規フォルダを作成します。

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

<?php

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

WordPressのダッシュボードから子テーマを適用

WordPressのダッシュボードから子テーマを適用します。ダッシュボード → 外観 → テーマ → 「stinger5_child」を選択してブログを確認します。問題なく設定が出来ていれば無事Stinge5が表示されます。

最後に

いかがでしたでしょうか?今後はStinger5のカスタマイズ情報なども少しずつアップして行けたらと考えています。読んで頂いてありがとうございました。

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress[Stinger3用 子テーマ]favicon(ファビコン)を変更する方法
WordPress[Stinger3用 子テーマ]favicon(ファビコン)を変更する方法
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress サイドバーにTwitter(ツイッター)のタイムラインを表示する方法
WordPress サイドバーにTwitter(ツイッター)のタイムラインを表示する方法
WordPress[Stinger3] Twitterメンション設定
WordPress[Stinger3] Twitterメンション設定
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPressテーマ「Stinger3」のサイドバーの幅を変更する方法
WordPressテーマ「Stinger3」のサイドバーの幅を変更する方法
OSXローカル環境にwordpressをインストールする方法
OSXローカル環境にwordpressをインストールする方法
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示