Web・PC Tips

子テーマの作成手順-WordPress

WordPressのテーマをカスタマイズ。
保険代わりに子テーマを作成します。
バージョンアップとかで、カスタマイズが消えてしまうのは常識ですもんね。

私も、何度もやってます💧
ほんとに懲りない。
わかっててもやってしまうのです。

仕事でやっているなら考えモノだけど、自己満足でやっている手前、消えたら消えたで「ま、いっか」と毎度大着してます。
かと言って、慌てないわけではないのです。
消えたら消えたで、ひとりで大騒ぎなんですけど💧

そんな大着ぶりなので、子テーマを作る時も、やっぱり大着してます。

WordPressをインストールしたら、とりあえず設定。
とりあえず、ベースにするテーマを選んだら、FTP。

テーマfileをフォルダごとダウンロードします。
そして、-childフォルダを作成。
-childフォルダに、親のテンプレート(php)を全部アップロード。

それからstyle.cssfunction.phpに子テーマで使用するための記述をしたら上書き。
しっかりスクショも保存します(これが自己満足)。
スクショ自体は好きな画像なんかをほおりこんでます。

後は、子テーマを有効にして好きにカスタマイズするだけ。

上書きするstyle.cssには、以下を記述。
子テーマを認識させるために書くもの。
(以下は最低限の情報ですが)
/*
Theme Name: 子テーマの名前
Template: 親テーマの名前(フォルダ名)
*/

上書きするfunction.phpには、以下を記述。
親のCSSを読み込んでもらうためのもの。
(何か気持ち悪いけど、閉じタグはいらない)
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles()
{ wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

カスタマイズするためにに子テーマを作る時はこんな感じ。
結局、どのテンプレートもいじってしまうから、一気にあげちゃう。
面倒くさがりなんです。

でも、カスタマイズが生きてくれないと困るので流れくらいはわかってるつもり。

ざっと解説。

親テーマのテンプレートfileと子のテンプレートfileは同名。
(だからごっそり上書きするのだけど)

そのテンプレートfileは、子が優先で読み込まれる。
なので、同名のテンプレートは子が有効。

function.phpは年功序列。
親が読み込まれた後に、子が読み込まれる。
なので、書き換えじゃなくて追記。

style.cssもまた年功序列。
親が読み込まれた後に、子が読み込まれる。
だから、親のCSSの変えたい部分を子のCSSに書けばおっけ。
CSSでIDやクラス分けをちゃんと作ってくれてる親のありがたみを感じております。

でも、実際のところ、CSSに関しては、あまり子テーマを使わない。
CSSは外部fileにしてheader.phpで読み込ましてる。
装飾デザインに関しては、いちいち窓開くのが面倒なので外部に置いておく方が楽だわ、と。

とりあえずばかりのおおちゃくな子作り😅