こういうことは更新がかかるととっても大変です。

テーマが更新されるとテーマに行ったファイルの変更がすべて無効に

というよりは上書きですね。更新したテーマによってファイルが上書きされてしまうので今までの更新が消えてしまいます。

テーマを更新する必要があるときにそれが通知されるのが幸いでしょうか。更新する前に自分が変更したファイルのテキストを保存しておけば変更を元に戻すことができるのでまずはバックアップを。style.cssなどをテーマ編集で開いてメモ帳などのテキストエディタに貼り付けていったんローカルで保存すれば修正そのものはできます。

が、テーマの更新が頻度は少ないとはいえあると言うことがわかればそのたびにこれをやるのも面倒きわまる作業です。それを解決するのが「子テーマ」という方法です。どうもテーマのスタイルをカスタマイズするときには必須のようですが知らなかったのでこうなるわけですね・・・。

というわけで子テーマを作ってみる

【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法-CSS篇-を参考にさせていただきました。

つまるところ、親テーマからCSSを引っ張ってきてカスタマイズしたものを別のディレクトリに保存してそちらを参照する、というわけですね。

このシステムにより親テーマが変更されても自身が変更した部分については変更が保たれる、というシステムのようです。いろいろと考えるわけですね～。

なお、CSS(スタイルシート)とphp(スクリプト)を子テーマとして扱うには微妙な差があります。同名ファイルを子テーマのディレクトリ上に作るところまでは同じなのですが・・・。また、function.phpについてもちょっと差があります。(参考ページ内のリンクを参照のこと)

なので、スクリプトを変更したときは親テーマ更新時に差分をとってみる必要がありますし、function.phpを編集した場合はテーマ更新前にバックアップをとって更新後のスクリプトとの差分を確認しないと動作がおかしくなる可能性が高くなります。

スタイルシートの差分を作るときにもちょっと注意

何が注意かというと「たまに複数行に渡ってタグをしていているスタイルがあるのでそれは全部引っ張ってきましょう」と言うことです。まあ、一つ一つを更新しているときには余り意味はないかもしれませんが、いまのようにいきなり子テーマを作成するときには要注意です。

たまに編集したスタイルの量が多くなってくるとあきらめて更新後のスタイルに上書きする、という投げやりな決断をする人もいるかもしれませんが、できる限りスマートに解決するときにはテキスト差分ツールで差分を見て必要な部分だけ移転させれば良い、ということです。

たとえば例としてliタグのマージン設定のスタイルシートは

・・・
.mu_register ul {
	margin: 0 0 12px;
	margin: 0 0 0.857142857rem;
}
.mu_register li {
	margin: 0 0 0 16px;
	margin: 0 0 0 1.142857143rem;
}
・・・

・・・ちょっと待った～～～

はい。差分ツールで確認した場合、こういう凡ミスを犯すことになります。liタグを使っているクラスはmu_registerだけではないですね。これに気がつかないと本文中のliタグの設定が更新されないということに。ちゃんと差分確認時にどこからやっているのかを確認しましょう。

正しくは

・・・
.mu_register ul {
	margin: 0 0 12px;
	margin: 0 0 0.857142857rem;
}
.entry-content li,
.comment-content li,
.mu_register li {
	margin: 0 0 0 16px;
	margin: 0 0 0 1.142857143rem;
}
・・・

となります。もう二つ設定すべきタグの記述が上にあるのでそれもちゃんと持ってこないとだめですよ。

後書きましたが「変更点だけを記述する」というのも必要です。対象のタグのスタイルとして書いてある変更されていない属性は一切書く必要はありません。

というわけで子テーマの作成が完了

この作業のせいで十数分くらいスタイルが間違えた状態で表示されていたはずです。アクセスが少ない+個人管理なのでこういう芸当が許されるのであって、もしこれが企業などで運営中とかなら「テストサーバー上で更新処理手順の確認+メンテナンス告知+短時間(数分以内)での更新」ということを行わなければいけません。

ちなみにこのテーマの更新時にちょっと行間を変えています。pタグにまつわる行間問題ですが、ちょっと気になるところです。個人的には少し読みやすくなったような気はしますが、どんなものなのでしょうかね・・・。

Tweet