WPlogs

WordPressを中心にWeb関連の情報発信。PHP、CakePHP、HTML5、SEOなど。 ※旧名称「SEO人」、旧URL「http://seo.net-luck.com/」

*

WordPressテーマ「STINGER5」で学ぶ子テーマの作成方法

   

STINGER5

出典:http://wp-fun.com/

WordPressのテーマをカスタマイズする場合は、「子テーマ」を使用する方が良い。

なぜなら、テーマそのものを直接カスタマイズしていた場合、テーマを更新するとせっかく頑張ってカスタマイズしたファイルが上書きされて消えてしまうかもしれないからです。

だからと言って、テーマの更新をしないのも新しい修正が反映されないので、あまりよろしくありません。

そんな時に、WordPressの便利な仕組みで「子テーマ」というものがあります。

これは、他のテーマを「親」とする「子」のテーマを作れる仕組みで、「親」のテーマの内容を「子」のテーマで再定義し、オーバーライド(上書き)することができます

この仕組みを利用することで、親テーマを直接修正することなくカスタマイズが行え、親テーマを更新してバージョンアップする際にもカスタマイズしたファイルを上書きして消してしまうという心配もありません。

ということで、早速やってみました。

スポンサード リンク

親テーマの準備

今回使用するテーマは、WordPressテーマの中でも人気の高い「STINGER5」です。
レスポンシブデザインでかっこいいですよ。

こちらの最新バージョン(ver20150505b:テーマカスタマイザー機能あり)をダウンロードしてきて、解凍し、テーマフォルダに配置します。

このフォルダ名が、「stinger5ver20150505b」がテーマ名となります。
配置パスは、「\wp-content\themes\stinger5ver20150505b」となります。

配置したら、親テーマを少し見てみましょう。
テーマ直下にあるテーマスタイルシートの「style.css」というファイルは、WordPressテーマに必ず必要なファイルです。

そして、このファイルにコメント形式で、テーマ詳細を記述する必要があります。
「STINGER5」は、以下のように記述されていますね。

上記の記述で、WordPress管理画面のテーマ設定で認識されるようになり、またその際表示させる画像は「screenshot.png」というファイルを準備するようです。

子テーマの作成

では、この「STINGER5」の子テーマを作成します。

子テーマディレクトリの作成

まず、子テーマディレクトリの作成を作成します。

テーマフォルダに子テーマの名前「stinger5-child」というフォルダを作成します。
配置パスは、「\wp-content\themes\stinger5-child」となります。

「style.css」ファイル

続いて、子テーマのスタイルシートを作成します。

子テーマディレクトリに「style.css」ファイルを作成し、前項のようにテーマの詳細を記述します。
今回は、最低限以下の2項目だけです。

  • 「Theme Name」…テーマ名
  • 「Template」…親テーマ名(親テーマフォルダ名)

そして、最後の一文「@import ~」で、親テーマのスタイルシートを読み込んでいます。

そこより下に子テーマのスタイルを記述していけば、CSSは後に定義したものが優先されるので、子テーマのスタイルが優先されるというわけです。

子テーマに最低限必要なファイルは「style.css」のみです。
なので、スタイルしか変更しない場合であれば、これで子テーマの完成ということですね。

「STINGER5」の「style.css」ファイル

「STINGER5」のスタイルシートは、レスポンシブデザインで、デバイスの画面サイズによって適用させるスタイルを変更しています。

具体的には、以下のような記述です。

「STINGER5」では、スマートフォン、タブレット、パソコンの境界地を、それぞれ380px、780pxとしているようです。

なので、この部分を子テーマにコピーしておき、以下のようにスタイルを適用させたいデバイスによって記述する場所を変えればいいですね。

  • 解像度「780px」以下…スマートフォン、タブレット
  • 解像度「380px」以上…パソコン、タブレット
  • 解像度「780px」以上…パソコン

全デバイス共通のスタイルは、これらの外で上部に記述すればOK。

スタイルシートの別の読み込み方法

前項では「@import ~」で親テーマのスタイルシートを読み込みましたが、現在は子テーマの「functions.php」ファイルで「wp_enqueue_style()」関数を使用して読み込むことが推奨されています。

なぜなら、「@import ~」で読み込むよりも、HTMLのheadタグにlinkタグを複数出力した方がブラウザの読み込む速度が速いからです。

その方法のソースコードは、以下のようになります。

ですが、「STINGER5」の場合はHTMLのheadタグに直接linkタグでスタイルシートが指定されているところがあり、またカスタマイザー機能でheadタグに直接CSSを出力しています。

これを変えようと思うと、親テーマを変更することになり結構面倒なので、「STINGER5」の場合は前項のように「@import ~」を使えばOKです。

「functions.php」ファイル

テーマのための関数と呼ばれる「functions.php」ファイルについては、親テーマにない子テーマで追加した関数のみを追記していきます。

まだ追加するものがない場合は、ファイルだけ以下のようにして作っておけば、後で楽です。

こちらは純粋なPHPファイルになるので、最後の「?>」は省略すること推奨ですね。

「header.php」などのテンプレートファイル

「header.php」などのテンプレートファイルについては、子テーマにファイルが存在する場合、親テーマのテンプレートファイルをオーバーライド(上書き)します。

なので、親テーマから編集するテンプレートファイルをコピーして子テーマに置き、それを編集していけばOKです。

では、一つ編集してみます。
親テーマの「images」フォルダの中にある、以下の2つの画像が「STINGER5」のものになっているので、変更しましょう。

  • 「apple-touch-icon-precomposed.png」…iPhone/iPadホーム画面用アイコン
  • 「logo.ico」…ファビコン

画像は適当に準備して、子テーマにも同様に「images」フォルダを作成して画像を格納しておきます。
配置パスは、「\wp-content\themes\stinger5-child\images」となります。

次に、「header.php」ファイルを子テーマフォルダにコピーし、以下のように編集します。

ポイントは、「bloginfo(‘stylesheet_directory’)」を使用することです。

「get_stylesheet_uri()」、「bloginfo(‘template_url’)」、「bloginfo(‘template_directory’)」などでは、親テーマのパスになってしまうので、注意。

最後に

「STINGER5」の子テーマの作成は、以上です。

これからどんどんカスタマイズを勉強していきたいと思います。

参考サイト

テーマの作成 – WordPress Codex 日本語版
子テーマ – WordPress Codex 日本語版
Stinger5カスタマイズ!どこがどのデバイスに対応?「style.css」徹底分析!

 - STINGER5