子テーマの簡単な使用方法
どうも、キーです。
前回(WordPressの子テーマは必ず利用しよう)は、WordPressにおける「子テーマ」の作り方を説明しました。
今回は、「子テーマ」の簡単な使用方法を説明したいと思います。
子テーマのファイル
「子テーマ」を利用するためには前提知識が必要です。
といっても前回説明した「親テーマ」の更新の影響を受けなくする。を達成するだけであれば以下の点を覚えていれば十分です。
- 「親テーマ」「子テーマ」に同じファイル名のファイルがあった場合、「子テーマ」のファイルが使用される。
- 「cssファイル」と「functions.php」は例外。特に「cssファイル」は「親テーマ」→「子テーマ」の順に読み込まれる。
※「functions.php」については読み込まれ方が複雑であるのと、今回その知識は必要ないので割愛。必要なときに書きます。
例1: header.php
親テーマには通常「header.php」というファイルがあると思います。
こちらの記事(Google Analyticsを導入しよう（WordPressブログのアクセス解析について）)でも編集しました。
この編集を子テーマで行うようにし、親テーマの更新の影響を受けないようにしたいと思います。
といっても手順は簡単。
- 「親テーマ」の「header.php」を、FTPソフトなどでダウンロードするか内容をコピーしてテキストエディタに貼り付ける。
※文字コードはUTF-8にする。改行コードは自分が利用しているOSのものでOK(WindowsならCR+LF、現代のmacOS、LinuxならLF)。 - Google Analyticsを導入しよう（WordPressブログのアクセス解析について）の記事のとおり、コピーした「header.php」を編集する。
- ファイルを「header.php」の名前で保存する。
- FTPソフトなどを利用し、子テーマのパスに作成した「header.php」をアップする。
以上です。やっていることはコピーを作って編集するだけですね。
例2: style.css
次は子テーマのスタイルシートについてです。
スタイルシート(cssファイル)については前述しましたが、「親テーマ」→「子テーマ」の順に読み込まれます。
そしてスタイルシートの特徴として、同じ項目に対する記述は、後に書いたもので上書きされます。
つまり、上書きしたい項目文のみ記載すれば良いわけです。
スタイルシートの編集内容についてはこちら(WordPressブログのレイアウトを最低限整える方法まとめです。(Twenty Seventeen))を例とさせてもらいます。
上記記事で「style.css」の編集についてごちゃごちゃと書いておりますが、子テーマを用いて同じようにする場合は以下を前回(WordPressの子テーマは必ず利用しよう)作成した子テーマの「style.css」へ追記してください。
@media screen and (min-width: 48em) {
/* Layout */
.wrap {
max-width: 1100px;
}
.has-sidebar:not(.error404) #primary {
width: 68%;
}
.has-sidebar #secondary {
width: 26%;
}
}これだけでOKです。
ページ全体の表示の幅、記事の幅、サイドバーの幅を親テーマの設定から上書きしています。
@media screen and (min-width: 48em)などはページ内の要素を特定するための記述だったりしますが、気になる方はcssの書き方を調べてください。機会があれば記事にするかもですが。
結果
子テーマを使って以下の2つの記事の内容と同じ編集ができる。
※子テーマを更新してもレイアウトなどが反映されない場合はまず以下の「レイアウトが反映されない場合」をチェックしてください。それでもわからなければこの記事ではどうしようもないですが。
レイアウトが反映されない場合
真っ先に思い当たる可能性は以下の2つです。
これらを試して違った場合は他のブログも含めもっと広い範囲で調査したほうが良いかもしれません。
- 記述が間違っていないか確認する。
当然ですが、これまでの記述のどこかで誤りがあればレイアウトが反映されないということもありえます。また、テーマが違う場合はすべてがそのまま使えるとは限らないです。テーマ名で検索しましょう。 - ブラウザのキャッシュをクリアする。
レイアウトを確認しているブラウザのキャッシュをクリアしましょう。
キャッシュ関連のプラグインを利用していなくてもまず試しましょう。
私はプラグインないから大丈夫なはずとスルーしていたら見事にハマりました。
今後の構想
勘の良い方やもともと知識のある方は気づいているかもしれませんが、この方法にも問題点があります(かなり簡単にできるのはとても良い点ですが)。
問題に対応するには少し勉強が必要そうですので今しばらくはこの方法で行きたいと思います。筆者が問題に対応できるようになったら記事にしたいと思います。