子テーマでスタイルシートを追加する方法

WordPressで子テーマを作成していて、各投稿ページや固定ページにスタイルシートを追加したい場合に参考になさってください。

子テーマで読み込ませるときに気を付けないといけないのは、「get_stylesheet_directory_uri()」です。「get_template_directory_uri()」で読み込ませると親テーマのディレクトリを読み込んでしまいますので気をつけてください。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {
 //親テーマのcssを読み込ませます。
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

 //子テーマの共通のcssを読み込ませます。
  wp_enqueue_style( 'common', get_stylesheet_directory_uri() .'/css/common.css', array('parent-style'));

   //投稿ページに読み込む 「single.css」
   if (is_single()) {
    wp_enqueue_style('single', get_stylesheet_directory_uri() . '/css/single.css', array('parent-style'));
  }

  //固定ページ別にcssを読み込む 「(スラッグ名).css」
  if(is_page()) {
    $page = get_post( get_the_ID() );
    wp_enqueue_style($page->post_name , get_stylesheet_directory_uri() . '/css/'. $page->post_name .'.css', array('parent-style'));
  }
}