WordPress

WordPressテーマのCSSをfunctions.phpで管理する方法

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
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)