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

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

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

子テーマを作る

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

Wordpress child theme

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

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

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

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

Wordpress child theme admin

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

Wordpress child theme mistake

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

正しくは・・・

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

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

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

Wordpress child theme import css

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

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

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

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

Wordpress child theme header

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 -->

INOCCU VISION

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

ファビコンを変える

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

Wordpress theme favicon default

ファビコンの設定は、やはり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" />

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

Wordpress child theme favicon

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

Wordpress child theme favicon changed

出来ました!

次回は

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

この記事を書いた人

井上 研一

株式会社ビビンコ代表取締役、ITエンジニア/経済産業省推進資格ITコーディネータ。AI・IoTに強いITコーディネータとして活動。2018年、株式会社ビビンコを北九州市に創業。IoTソリューションの開発・導入や、画像認識モデルを活用したアプリの開発などを行っている。近著に「使ってわかった AWSのAI」、「ワトソンで体感する人工知能」。日本全国でセミナー・研修講師としての登壇も多数。