[WP] テーマの選定と子テーマの作成

データを移行したらテーマを選定して自分のコンテンツやスタイルに合うテーマを探します。
テーマの選定は WordPress の管理ツールから簡単にできますし、先人の参考になるエントリが山ほどありますので、それらを読んで好みのテーマを選ぶと良いと思います。

そして、テーマを選んだら、過去のエントリで使っている CSS のカスタマイズなどを追加するために子テーマを作成して微調整を行います。

テーマの選定

今回のテーマ選定では以下のエントリを参考にさせていただき、WordPress のテーマについて基礎知識の習得に励みました。

最終的には

アイキャッチ画像が必須ではないテーマにすること

Blogger から移行したコンテンツ全てにアイキャッチ画像を設定して回れないので
スマートデバイスにも対応した画面にしたいので Responsive デザインを採用しているもの

の 2 つを意識して、WordPress の管理ツールの検索で Responsive をキーワードに検索して BirdTips テーマを選びました。

割とすっきりしていて、それでいて味気なくも無いので気に入りました。

子テーマを作成する

WordPress では、テーマとは違うスタイルを設定するためには、子テーマを作るのが正しいアプローチのようです。
今回は BirdTIPS の CSS の変更と ShareHTML 用のスタイルなどを定義するために子テーマを作ります。

子テーマは、 WordPress の Themes ディレクトリに新しくフォルダを一つ作り style.css を作れば OK です。この style.css には少し呪文を書いておきます。

/*
Theme Name:     birdtips_customize
Theme URI:      http://azur256.com/
Description:    BirdTips theme の子テーマ
Author:         azur256
Author URI:     http://azur256.com/about/
Template:       birdtips
Version:        0.1.0
*/

Theme Name: birdtips_customize

Theme URI: http://azur256.com/

Description: BirdTips theme の子テーマ

Author: azur256

Author URI: http://azur256.com/about/

Template: birdtips

Version: 0.1.0

Theme Name	テーマを格納したディレクトリの名前
Theme URI	無くても良い。本来は Theme を説明しているサイト
Description	Word Pressのテーマ管理で表示される説明
Author	作者の名前
Author URI	作者の URL
Template	元にした Theme 名
Version	バージョン番号なので適当で構いません

もう一つの呪文ですが、親テーマの style.css を @import を使って読み込んでおきます。

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

12	@import url('../birdtips/style.css');

ここを正しく設定すると WordPress のテーマの管理で選択することができるようになります。

このあたりのことを簡単にやろうとするなら、One-Click Child Theme という Plugin があるようです。私は仕組みを理解することを求めたので手書きでやりましたが、こういうプラグインを使っても良いと思います。

style.css をいじろう

作成した子テーマの style.css をいじります。親テーマのスタイルで気に入らないところなどは、子テーマ側に同じセレクタを書いてしまえば、子テーマ側が優先されます。

(ソースを見ると分かりますが親テーマ側では !important を宣言していないので、先に読み込まれる子テーマ側のセレクタが有効になる仕掛けです)。

今回は、画像に枠が付くのが嫌なのと、リンクのアンダーラインを消したかったので、以下のようなスタイルを子テーマ側に定義しました。

#content .hentry img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
height: auto;
border: 0px solid #ddd;
padding: 1px;
}

#content a {
text-decoration: none;
border-bottom: 0px #0066aa;
}

#content .hentry img,

.widget img {

max-width: 97.5%; /* Fluid images for posts, comments, and widgets */

height: auto;

border: 0px solid #ddd;

padding: 1px;

}

#content a {

text-decoration: none;

border-bottom: 0px #0066aa;

}

もしおかしくしてしまったら子テーマを削除してしまえば良いですし、親テーマがバージョンアップしたときにも子テーマ側は影響を受けないので、このようなカスタマイズの仕方は本当に便利ですね。

header.phpをいじろう

子テーマは style.css だけではなく、親テーマの PHP ファイルを上書きすることもできます。
Google Analytics のトラッキングコードや Favicon の設定などはヘッダに入れるので、 header.php を子テーマのディレクトリにコピーして必要なところを修正するだけです。

オリジナルを直接触らないということはオリジナルのバックアップを取らなくて良いということです。
また、うまくいかなくなってしまったら子テーマをサーバから移動させてしまえばデフォルトに戻ります。

この仕組みは本当に楽ですね。他のPHPファイルも同様に修正することができます(functions.phpだけは癖があるらしいので修正する時は注意が必要です)。
みなさんもカスタマイズにトライされてはいかがですか？