【ワードプレス】css,スクリプトは、まとめて一か所で管理

ワードプレス、プラグインを追加するたび、css,scriptなどを追加していきますが、

便利なワードプレス関数を発見というか、本家が推奨されていたので、それに従って変更することにしました。

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

https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

 

変更前のCSSは、以下のとおりです。(子テーマでの運用が前提です)

@import url('../親テーマ/style.css');  

これをfunction.phpで設定します。

function.phpに以下を追記し、


function theme_enqueue_styles_scripts() { 
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); 
} 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles_scripts' ); 

 

cssから

@import url('../親テーマ/style.css'); 

を削除

 

で、見た目、変更なく読み込み方を変更できたはずです。

スタイルシートの読み込み関数
wp_enqueue_style

スクリプトの読み込み関数
wp_enqueue_script

それぞれ本家のリンクが参考になりました。

 

まとめ

とあるプラグインを追加しようと思ったら、まずプラグインの追加の方法から変更しなければとなり、このような設定を行いました。
ワードプレスの扱いについては、まだまだ初心者レベルですが、コツコツと学んでいきたいと思います。