昔からWordPressの無料テーマを配布されている方はいましたが、ここまで無料テーマが盛り上がっている時はなかったんではないでしょうか？火付け役となったのが、言わずと知れた「Stinger3」です。
Stinger3を追従するかの如く、HTML5レスポンシブ対応のGushやPrinciple、SimplicityといったSEOに特化し、アフィリエイトにも最適な無料テーマがリリースされていきました。
「Stinger3のHTML5レスポンシブ対応は？」と心待ちにしていた方も多いんじゃないでしょうか。もちろん、ボク自身もその一人です。そしたらね・・・
Stinger5リリースされてた！(´・ω・`)
Stinger5をカスタマイズするのに子テーマ作ってみようじゃないか！
[aside type=”boader”]
- 「stinger5_child」新規フォルダを作成する(任意のフォルダ名)
- 「style.css」を作成してstinger5_childに投げ入れる
- 「functions.php」を作成してstinger5_childに投げ入れる
- 「images」フォルダを作成してstinger5_childに投げ入れる
- FFFTPなどを使用して「/wp-content/themes」ディレクトリに、これまた投げ入れる
- WPダッシュボード「外観⇒テーマ」でstinger_childを有効化する
[/aside]
これが子テーマ作成のレシピとなっています。全てを間違わずにやっていくと、必ず子テーマが出来ます！ただしポイントもあるので順番に追っていきましょう。
style.cssに親テーマと紐付ける記述をする！
/*---------------------------------------------
Theme Name: stinger5_child
Template: stinger5ver20140820
Description: Customize css for stinger5
Author: 作者の名前
Author URI:作者のURI
Version:20140820
License:ライセンス
License URI:ライセンスのURL
---------------------------------------------*/
@import url('../stinger5ver20140820/style.css');以上の内容を記入しますが、最低限「Theme Name」と「Template」があれば動きます。
後はスタイルシートのエンコーディング「@charset “UTF-8″」と外部スタイルシートを読み込ませる「@import url…」を記入します。注意点としては、Stinger5はまだリリースされたばかりなのでバグ修正などが加わると予想されます。
日付でバージョン表記しているので「Template:stinger5ver20140820」は必要に応じて変更する必要がありますね。
functions.phpとその他のphpファイルの注意点！
ブログ真っ白！あたま真っ白！
ってコトになりますので注意です！追加したい関数がある場合、1行目に「<?php」記述して、2行目から追加するモノのみを子テーマのfunctions.phpに記述していきます。
その他のheader・single・pageなどのphpに変更を加える場合は、親テーマからそっくりそのままコピーしてきて、変更したい箇所を書き込んでthemeディレクトリにアップロードしましょう。
子テーマのimagesフォルダ内の画像を読み込ませるには？
子テーマにimagesフォルダを作成しますが、何もしないと親テーマのimagesフォルダ内の画像が読み込まれます。
Stinger3カスタマイズ時にオリジナルで作ったファビコンなどを、子テーマのimagesフォルダにアップロードしても反映されなかった方とかいませんか？
これは過去に紹介した「Stinger3カスタマイズでスマホ用smart.cssを読み込ませる方法」と同じです。
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />この中の「get_template_directory_uri」で「template」を「stylesheet」に変更してあげます。
すると、子テーマimagesフォルダから画像が読み込まれるようになります。まあ・・・親テーマ内に入れちゃってもいいんですけどね。後は子テーマを有効化してあげれば問題なく動くはず！
WP Theme Stinger8 ※最新は「Stinger8」となっています。
あくろのまとめ！
現在、このブログ使用しているStinger3は自分でカスタマイズしました。デフォルトで使用すると、多くの方がStingerを使用しているので「他サイトとの差別化が測りにくい点」です。
Stingerを使用するなら、カスタマイズをされるコトをおすすめします。カスタマイズにはCSSの知識が必要となってくるので、それなりのお勉強は必要かと思います。
しかし、Stinger5は高度なCSS知識を必要としないので、WordPressを始めたばかりの人でもチャレンジするコトは十分に出来ます！
愛用者としては、HTML5レスポンシブ対応は非常に嬉しいですね。Stinger5の構造を見るコトで自分の勉強にもなりますから！それにしても、Stinger5のURLが変わったとわ・・・自分でもよく見つけたなと関心しますわ笑。
コメント