【WordPress】自分で作成したCSSやJavaScriptファイルをテーマに追加する

WordPressテーマのカスタマイズなどで、自作したスタイルシートファイル（.css）やJavaScriptファイル（.js）を追加する方法について解説します。

CSSファイルやJSファイルを追加する場合、直接htmlテンプレートのhead部分にファイルパスを書くのではなく、「wp_enqueue_scripts」アクションにフックします。

WordPressで追加のCSS、JavaScriptを読み込む

ここでは、子テーマのディレクトリ（get_stylesheet_directory_uri()）の配下にcss、jsディレクトリを作り、その配下のファイルを読み取る場合の例です。

以下をfunctions.phpなどに記載します。

function ext_css_script() {
  if (is_singular('post') || is_category() || is_page() || is_archive() || is_search() ) {
    wp_enqueue_style('ext-style', get_stylesheet_directory_uri().'/css/ext.css');
    wp_enqueue_script('ext-script', get_stylesheet_directory_uri().'/js/ext.js');
  }
}
add_action('wp_enqueue_scripts', 'ext_css_script');