Stinger3のカスタマイズ (2) 子テーマを作る

前回の記事で、Stinger3の公式サイトに沿ってWordPressの基本的な設定を進めました。

Stinger3のカスタマイズ (1) 最低限の基本設定とプラグイン

きのう導入したStinger3ですが、テーマの導入と同時に、最低限のカスタマイズもやっていました。 Sting…

inoccu.com

今回は、Stinger3自体を自分色に変えていくために、子テーマの作成から始めたいと思います。

子テーマを作る

WordPressの子テーマを作るのは簡単です。

このように、wp-content/themesディレクトリの中に、新しいディレクトリを作って、その中にstyle.cssを入れればOK。

style.cssの中身はこれだけ。
Templateとして指定してあるのが親テーマであるStinger3です。テーマのディレクトリ名（stinger3ver20140327）を指定します。

/*
Theme Name: INOCCU VISION
Template: stinger3ver20140327
Author: Kenichi Inoue
*/

あとは、WordPressの管理画面で見てみると、作った子テーマが選択可能になっていることが分かります。

で、いざ有効化してみると・・・。

あれ、おかしいですね。表示はたしかに変わりましたが、デザインがぐちゃぐちゃです。
これは、style.cssの記述漏れがあるのです。

正しくは・・・

/*
Theme Name: INOCCU VISION
Template: stinger3ver20140327
Author: Kenichi Inoue
*/

@import url('../stinger3ver20140327/style.css');

これ。
一番最後の行で、親テーマのstyle.cssをインポートしています。

これで、親テーマと同じ表示になりました。

ヘッダー画像を消してみる

Stinger3のデフォルトのまま使っていて気になるのは、ヘッダー画像です。

Stinger3でヘッダー画像の表示を行っているのは、header.phpです。なので、親テーマ側のディレクトリ（stinger3ver20140327）から、header.phpを自分のテーマ側のディレクトリにコピーします。

WordPressの子テーマの仕組みは、子テーマ側にファイルがあったらそのファイルを使用し、なければ親テーマ側のファイルを使うという単純なものです。
なので、親テーマ側のディレクトリから子テーマ側のディレクトリにファイルをコピーして編集すれば、以後は子テーマ側での変更が有効になるわけです。

header.phpの102行目から始まる、gazouという部分がヘッダー画像なので、この部分をばっさり削除してしまいます。

<div id="gazou">
  <div id="gazou-in">
    <?php if (is_home()) { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } else { ?>
    <?php //カスタムヘッダー画像// ?>
    <?php if(get_header_image()): ?>
    <p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
    <?php endif; ?>
    <?php } ?>
  </div>
  <!-- /#gazou-in --> 
</div>
<!-- /#gazou -->

ヘッダー画像が表示されなくなりました。

ファビコンを変える

もう一つ気になるのが、これ。ファビコン。

ファビコンの設定は、やはりheader.phpで、38行目のこの記述です。

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/rogo.ico" />

テーマディレクトリ内のimages/rogo.icoというファイルをファビコンとして指定しています。
get_template_directory_uri()というWordPress関数によって、テーマディレクトリのURLを取得しているのですが、実はこの関数は子テーマで使っても親テーマのURLを返してしまいます。なので、get_stylesheet_directory_uri()に変更する必要があります。
あと、rogo.icoというファイル名も何かアレなので、このように書き替えてしまいます。

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" />

あとは、ファビコンを指定したディレクトリに置きます。

favicon.icoのタイムスタンプに歴史を感じますね・・・。

出来ました！

次回は

今回は、子テーマを作成することで、今後のカスタマイズの土台が出来ました。
次回は、そろそろ広告も入れたいなと思うので、その辺をやろうと思います。