昔からWordPressの無料テーマを配布されている方はいましたが、ここまで無料テーマが盛り上がっている時はなかったんではないでしょうか?火付け役となったのが、言わずと知れた「Stinger3」です。

Stinger3を追従するかの如く、HTML5レスポンシブ対応のGushPrincipleSimplicityといったSEOに特化し、アフィリエイトにも最適な無料テーマがリリースされていきました。

「Stinger3のHTML5レスポンシブ対応は?」と心待ちにしていた方も多いんじゃないでしょうか。もちろん、ボク自身もその一人です。そしたらね・・・

Stinger5リリースされてた!(´・ω・`)

Stinger5をカスタマイズするのに子テーマ作ってみようじゃないか!

Stinger3で子テーマを作成してカスタマイズしていた方は多いと思いますが、方法は変わりません。
  • 「stinger5_child」新規フォルダを作成する(任意のフォルダ名)
  • 「style.css」を作成してstinger5_childに投げ入れる
  • 「functions.php」を作成してstinger5_childに投げ入れる
  • 「images」フォルダを作成してstinger5_childに投げ入れる
  • FFFTPなどを使用して「/wp-content/themes」ディレクトリに、これまた投げ入れる
  • WPダッシュボード「外観⇒テーマ」でstinger_childを有効化する

これが子テーマ作成のレシピとなっています。全てを間違わずにやっていくと、必ず子テーマが出来ます!ただしポイントもあるので順番に追っていきましょう。

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ファイルの注意点!

Stinger5の子テーマを作る際には空のファイルを入れましょう。「親テーマからコピーすればいいんだ!」と思って、関数が記述されているfunctions.phpを子テーマに入れると・・・

ブログ真っ白!あたま真っ白!

ってコトになりますので注意です!

追加したい関数がある場合、1行目に「<?php」記述して、2行目から追加するモノのみを子テーマのfunctions.phpに記述していきます。

その他のheader・single・pageなどのphpに変更を加える場合は、親テーマからそっくりそのままコピーしてきて、変更したい箇所を書き込んでthemeディレクトリにアップロードしましょう。

子テーマのimagesフォルダ内の画像を読み込ませるには?

子テーマにimagesフォルダを作成しますが、何もしないと親テーマのimagesフォルダ内の画像が読み込まれます。

Stinger3カスタマイズ時にオリジナルで作ったファビコンなどを、子テーマのimagesフォルダにアップロードしても反映されなかった方とかいませんか?

これは過去に紹介した「Stinger3カスタマイズでスマホ用smart.cssを読み込ませる方法」と同じです。

例えば・・・ファビコンを子テーマ内のimagesフォルダから読み込ませるためにはheader.phpの一部を変更してあげます。
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />

この中の「get_template_directory_uri」で「template」を「stylesheet」に変更してあげます。

すると、子テーマimagesフォルダから画像が読み込まれるようになります。まあ・・・親テーマ内に入れちゃってもいいんですけどね。後は子テーマを有効化してあげれば問題なく動くはず!

WP Theme Stinger Plus ※最新は「Stinger Plus」となっています。

あくろのまとめ!

現在、このブログ使用しているStinger3は自分でカスタマイズしました。デフォルトで使用すると、多くの方がStingerを使用しているので「他サイトとの差別化が測りにくい点」です。

Stingerを使用するなら、カスタマイズをされるコトをおすすめします。カスタマイズにはCSSの知識が必要となってくるので、それなりのお勉強は必要かと思います。

しかし、Stinger5は高度なCSS知識を必要としないので、WordPressを始めたばかりの人でもチャレンジするコトは十分に出来ます!

愛用者としては、HTML5レスポンシブ対応は非常に嬉しいですね。Stinger5の構造を見るコトで自分の勉強にもなりますから!それにしても、Stinger5のURLが変わったとわ・・・自分でもよく見つけたなと関心しますわ笑。

この記事が役に立ったらいいね!しよう

最新情報をお届けします

Twitterでアクロマニアをフォローしよう!