schoo授業感想「基礎からのWordPress：子テーマを使ったカスタマイズ」

オンライン動画学習サービスの「schoo（スクー）」。
授業の受講感想記です。

今回の授業は、
＊基礎からのWordPress -子テーマを使ったカスタマイズ-
https://schoo.jp/class/2443
大串先生の録画授業です。

子テーマの作成方法が変更になっていた！？

超速の端折り気味の授業でそこが残念でしたが、WordPressに関してはある程度知識があるので、なんとかついていけました。
ただ、初心者の受講生には厳しかったと思います。

この授業で一番タメになったのは、WordPressの子テーマの作成方法についてです。

私の知識では子テーマの「style.css」は以下のような記述だと思ってました。

/*
Theme Name: ＊子テーマの名前
Template: ＊親テーマの名前
*/

@import url('../zzz/style.css'); /*上書きしたいCSSの場所*/

ところがですよ、時代の進歩とは恐ろしいもので、この書き方はいつの間にか時代遅れとなってました。

正しくは、

/*
Theme Name: ＊子テーマの名前
Template: ＊親テーマの名前
*/

のみで、「@import」の箇所は不要です。

じゃあ、どこで親テーマのCSSを継承するかというと、子テーマのフォルダに「function.php」を入れて、以下のように記述します。

<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); 
    function theme_enqueue_styles() 
    { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); 
} ?>

これで親テーマのCSSを継承します。

新方式は2015年あたりから？

いつから手法が変更になったかというと、どうやら2015年あたりを境に切り替わったようですね。

実際、2014年以前のWordPressの解説本を見ると「@import」で記述しています。
また、ネット上の解説サイトやブログなども2014年以前の記事は古いやり方のままですね。

この「function.php」に記述する手法はWordPressの公式ページにも載ってました。

＊子テーマ – WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

以下のように説明しています。

以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。したがって子テーマには functions.php を作成する必要があります。

ふむふむ。

いやあ、WEBデザイン業界は変化が激しいですね。
積極的に新知識を仕入れないと、あっという間に取り残されるなあと実感しました。