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

前回の記事で、Stinger3の公式サイトに沿ってWordPressの基本的な設定を進めました。
今回は、Stinger3自体を自分色に変えていくために、子テーマの作成から始めたいと思います。

子テーマを作る

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

Wordpress child theme

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

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

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

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

Wordpress child theme admin

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

Wordpress child theme mistake

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

正しくは・・・

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

@import url(‘../stinger3ver20140327/style.css’);
[/css]

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

Wordpress child theme import css

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

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

Stinger3のデフォルトのまま使っていて気になるのは、ヘッダー画像です。
Stinger3公式サイトで説明されているように、管理画面から画像を変えることが出来るのですが、ここではヘッダー画像の表示自体をなくしてみましょう。

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

Wordpress child theme header

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

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


*

*

INOCCU VISION

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

ファビコンを変える

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

Wordpress theme favicon default

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



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



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

Wordpress child theme favicon

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

Wordpress child theme favicon changed

出来ました!

次回は

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

この記事を書いた人

井上 研一

経済産業省推進資格ITコーディネータ/ITエンジニア/ブロガー。
井上研一事務所代表、株式会社ビビンコ代表取締役、一般社団法人ITC-Pro東京理事。
北九州市出身、横浜市在住。 AIやIoTに強いITコーディネータとして活動中。著書に「初めてのWatson」、「ワトソンで体感する人工知能」など。セミナーや研修講師での登壇も多数。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします