Wirdpressのカスタマイズ「子テーマ」作成方法。

WordPressユーザーの、さらにほんの一部の人にしか関係ないニッチな話です。

WordPressのデザインテンプレートを直接、散々いじってしまったあとに、もう何年も前から「子テーマ」というスマートなカスタマイズ方法があることを知りました。

というのも、自分がこのブログで採用しているデザインテンプレートは、すでにインストールして4年は経過していますが、一度もバージョンアップがありませんでした。

そのため「子テーマ」を利用するニーズもなかったため、知らなかったわけですが・・。

そのデザインテンプレートが最近バージョンアップしたということで、Wordpressの更新メニューに「新しいバージョンがあります」と出るようになりました。

ただ、もはやテンプレートもスタイルシートもカスタマイズしまくってるので、更新案内も無視していたのですが、Wordpressのダッシュボードで「子テーマ」の利用という言葉を目にしました。

なにそれ?ということで調べてやってみたのが経緯です。
いやはや。
Web業界の片隅に身を置きながら、情報に取り残されている困ったおじさん(私)です。

この「子テーマ」の利用というのは、子テーマを作ってカスタマイズすれば、親テーマがバージョンアップで更新されても、カスタマイズした仕様は守られるというものです。

このブログは「pacify」(※2016年12月にpacifyに変更)というテーマをインストールして利用しているのですが、この「pacify」を例として、大ざっぱに説明しますと・・

親テーマ「pacify」の名前に「-child」をつけた名称で、「pacify-child」というホルダを作り、その中にstyle.cssと、自分がカスタマイズしたphpファイルだけを入れて、「pacify-child」を有効化(外観テーマとして利用)。

  ▼

すると「pacify-child」のフォルダにないファイルは、勝手に親の「pacify」を見てくれる。

  ▼

親テーマをバージョンアップすると「pacify」のフォルダは上書きされてしまうけど、カスタマイズした子テーマ「pacify-child」内のファイルは上書きされない。

図にすると・・・

child

という感じ。

今まで子テーマを作らず、「親」であるテーマを直接いじりまくったあとの祭りの私ですが、子テーマづくりからやってみることにしました。

やった作業は下記。

(1)バックアップと「pacify-child」フォルダ作成

wp-content/themes/にある「pacify」フォルダをFTPでダウンロード。
同時に
wp-content/themes/に「pacify-child」フォルダを作っておく。

(2)子テーマにアップロードするファイルの用意

ダウンロードした「pacify」フォルダのうち、子テーマ用のstyle.cssの先頭に

/*
Theme Name:pacify Child
Template:pacify
*/

と(子テーマの名前と親の名前)を記述。

ほか、カスタマイズしていたphpファイルの確認。
実際はなにをいじったか忘れていたので、タイムスタンプで見ながらphpファイルをテキストエディタで開いて確認しました。
自分が実際にカスタマイズしていたのは、ざっと下記。

style.css 色やサイズ、フォント等
404.php Not Foundのメッセージ変更
comments.php トラックバックについてのメッセージ追加
footer.php Googleアナリティクスの記述を直書き
header.php jQueryやライブラリ用のcssパスの追加
index.php adsenseの記述を直書き
single.php adsenseの記述を直書き
(3)style.css(+カスタマイズしていたphp)を子テーマフォルダにアップロード

※なお、functions.php を作成する場合は注意が必要とのことです。

(参考)【注意】子テーマ作成でトラブルが起きたら…子テーマをつくってのカスタマイズ方法 -functoins.php篇-
その他、純粋に追加したファイルとしてjQuery関係がありましたが、いったんはなにもせず。

(4)管理画面>外観>テーマにて子テーマ(pacifyChild)を有効化

この段階では実際にブログを確認して何も変わっていないことを確認。
もしエラーがあったり、デザインが崩れていたら、親テーマに戻して(親テーマのほうを有効化して)見直す必要があります。
また、管理画面のテーマ選択に子テーマが表示されないと言った場合は、子テーマのstyleに、さきほど書いた記述がエラーを起こしている場合があります。

(5)親テーマ(pacify)をバージョンアップ

バージョンアップした際、もし親テーマが有効化になっていたら、再度子テーマを有効化して、ブログを確認。

まあ、そんなところですが、実は(4)にも書いた、jQueryの機能(私の場合thickboxというモーダルを表示するJS)が動いておらず、さらに下記の作業をしました。

(6)追加ファイルのUPと呼び出しのPASSの書き換え

バックアップしていたフォルダから、子テーマ「pacify-child」に
jquery.js
thickbox.js
thickbox.css
ほかloadingAnimation.gifなどの画像をアップロード。

子テーマに入れたheader.phpにある<head>~</head>内の、上記のjqueryファイルのパス(URL)の「pacify」を「pacify-child」に書き換えて上書き。

これで「子テーマ」を設定完了です。

なお、参考にさせていただいたのは下記の2012年の記事。

【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-

ありがとうございました。
しかし、2012年の記事で勉強になるなんて・・いまさらな話でした。

(追記)
2016年12月にレスポンシブのテーマ(pacify)に変更しましたが、やはり子テーマを作って対応しています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください