WordPressに子テーマを導入してみました

先日、ふとWordpressのダッシュボードを開いていて、更新通知がたくさんきていたので、プラグインの更新に続いて、テーマの更新をかけたところ、見出し用に編集していたCSSがデフォルトに戻ってしまいました。

このブログは、テーマに「Twentyeleven」を使っているのですが、この機会にテーマに更新をかけてもサイトデザインに影響が出ないよう「子テーマ」というものを使ってみることにしました。以下、備忘録的に参考にしたサイトを中心に作業内容をメモします。
11808466594_2285698349
photo credit: 6/365 – Long overdue via photopin (license)

子テーマの作り方

子テーマとは、既存のWordpressテーマ(こちらを親テーマと呼びます)のカスタマイズ専用のテーマです。概念を理解するのと、具体的な作業内容はこの「寝ログ」さんにパーフェクトな解説がされています。

要は、子テーマ用のフォルダを用意して、その中に style.css と functions.php を入れて、親テーマと並列のディレクトリに置くだけです。

少し前の記事では、style.cssに「@import url…」と一文を追加して親テーマを呼び出す書き方が主流だったようですが、現在ではfunctions.phpに「get_template_directory_uri()」と書くことで呼び出すのが一般的になっているようです。もちろん、書いてあることの意味は分かりません。コピペです。

WordPressのカスタマイズをするのに際し、初めから子テーマを作るのであれば他に見るべき参考サイトも不要かと思いますが、僕のように既に多少のカスタマイズをしている場合は、もう1つ「room9」さんの記事を読んでおくとよいでしょう。

ヘッダーなどをいじっている場合は子テーマに対象のphpファイルをコピーしておくことで、親テーマが更新されても勝手に上書きされなくなるのでこの一手間は大事です。

子テーマを有効化したが…うまくいってない

style.css に見出しH1~H4までよさげなものを見つけ、色だけ変えてコピペで追記してアップロードしてみました。しかし、デフォルトの親テーマになっている上、サイドバーのウィジェット類がなくなってしまいました。子テーマの有効化をする前に一度「ライブビュー」で様子を見るほうがよいでしょう。

僕が直面した問題は大きく3つでした。

  1. 見出しのCSSが反映されていない
  2. カスタムヘッダー画像がデフォルトになってしまった
  3. ウィジェットがアーカイブだけになり、フッターにカレンダーなどが移動してしまった

それぞれ対応策をググって調べてみると

見出しのCSSが反映されていない

これは、style.css の書き方が間違っていたようで、「*/」の前に .entry-content h1 { …と書いていたことが原因でした。たまに思いついたときにしかCSSを触ることがなく、本を読んでちゃんと学んだことがないのがダメなんでしょうが、様々な要素をどういう順番で書くのか迷っていました。web屋さんが書いた記事はあまりにも基本すぎてそうしたところから書いてあるのを探すのがなかなか大変なのですが、どうも、特に順番は気にせず書いてよいみたいですね。

何度かstyle.css を書き直して、再度アップロードしてを繰り返しているうちに見出しがイメージしていたものに変わりました。

カスタムヘッダー画像がデフォルトになってしまった

Twentyelevenのカスタムヘッダー画像に20くらい登録していて、それをランダムに表示させていたのですが、子テーマを有効化するとTwentyelevenデフォルトの画像に戻ってしまいました。

これについては、いろいろググってみたのですが、phpファイルの書き換えなどではできないのか、かんたんな対応策を見つけることができませんでした。やむなく、再度ダッシュボードからヘッダー→ヘッダー画像へと進み、ここで再度「新規画像を追加」からメディアライブラリにある過去のヘッダー画像を探して追加する作業をしました。

2016-09-20_03h17_45

2016-09-20_03h17_59

ついでに、6枚ほどこの数年の旅行写真からピックアップしてヘッダー画像に追加しました。過去のヘッダー画像は、12~15年前の旅行時フィルムカメラで撮影したものをデジタルにしたものも多かったので、画質の差が圧倒的に違います…

ウィジェットがアーカイブだけになり、フッターにカレンダーなどが移動してしまった

こちらのサイトは Graziosoというテーマの使い方ガイドですが、自動では親テーマで設定していたウィジェットの配置は子テーマに引き継がれないようです。

ウィジェットの編集作業については、先にするか後でするかの違いですが、手動での作業が必要なようです。

まとめと見出しの参考サイト

そうこうして何とか子テーマを導入することができました。画像の追加などに手間取り、3時間くらいかかってしまったのは誤算でしたが、この機会にやっておいてよかったです。はじめから、テーマの編集でH1、H2を書き換えるのではなく子テーマを作っておけば楽だったのですが…急がば回れでした。

以下に今回、見出しに使ったCSSをコピペさせてもらったサイトを挙げています。ありがとうございました。

コメント