WordPressオリジナルテーマを作成する時、「functions.php」を使ってCSSを管理できることを知ってますか？
今回はテーマ用のCSSを「header.php」に記述せず、「functions.php」で管理する方法を紹介します。
WordPressテーマのCSSをfunctions.phpで管理する方法
WordPressテーマのCSSは「head」に直接読み込んでも良いんですが、head内っていろいろ読み込まないといけないのでスッキリさせたいので、「functions.php」にまとめることでスッキリさせることができます。
これでは実際に「functions.php」を編集してCSSを読み込めるようにしてみましょう。
// CSS読み込み
function add_files() {
// サイト共通のCSSの読み込み
wp_enqueue_style( 'main', get_template_directory_uri() . '/common/css/top.css', "", '20210718' );
wp_enqueue_style( 'sub', get_template_directory_uri() . '/common/css/post.css', "", '20210718' );
}
add_action( 'wp_enqueue_scripts', 'add_files' );
「20210718」って言うのは、日付を入れています。
別に必要はないのですが、書いておくと更新日がわかったり、そこを変えるだけでキャッシュの悩みが解決します。
（ただ書き換えるのを忘れると意味がないので、自動化してアップロード時間を自動で取得して保持するのが良いかも…今回は優先度が低いので対応しません）
上記では、共通で表示されてしまうので、下層ページのみに使用したい場合や投稿のみに読み込みさせたい場合はif文で分岐してください。
// singleページのみ if ( is_single() ) wp_enqueue_style( 'sub', get_template_directory_uri() . '/common/css/post.css', "", '20210716' );
「functions.php」はいろんな事ができるので、覚えておくと便利です。
ABOUT ME
