Learning site for website creation

WordPressでCSS・JSファイルを読み込む

  • 投稿日:2019年11月10日

WordPressでCSS・JSファイルを読み込む方法

  1. テンプレートのheadタグに直接記述
  2. 「functions.php」からCSS・JSファイルを読み込みタグを出力

1.テンプレートのheadタグに直接記述

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  <title>タイトル</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>

</body>
</html>

「header.php」等にモジュール化されていることが多いので状況に応じて対応

2.「functions.php」からCSS・JSファイルを読み込みタグを出力

CSS読み込みに使用する関数

wp_enqueue_style関数

初期値説明
第1引数文字列なし (必須) 読み込むCSSを識別する名前
第2引数 文字列|真偽値空文字列CSSファイルのパス
第3引数 配列array()事前に読み込むCSS識別名
第4引数 文字列|真偽値falseバージョン番号
第5引数 文字列|真偽値'all'media属性

第1引数に「common」を使うとwp-admin内の「common.min.css」を読み込んでしまうので注意。

http://localhost/test/wp-admin/css/common.min.css?ver=5.2.4

JS読み込みに使用する関数

wp_enqueue_script関数

初期値説明
第1引数文字列なし (必須) 読み込むJSを識別する名前
第2引数 文字列なし (必須) JSファイルのパス
第3引数 配列array()事前に読み込むJS識別名
第4引数 文字列|真偽値falseバージョン番号
第5引数 文字列|真偽値falsetrue: </body>直前に出力
false: <head>内に出力
/*********************************
 CSS/JSの読み込み
 **********************************/
function load_scripts() {
  /*---------------------------------
    CSS読み込みの基本
  ---------------------------------*/
  wp_enqueue_style(
    'reset-style',//読み込むCSSを識別する名前(必須) ※同名の指定はできない ※既に予約されている「common」等使えないものがあるので注意
    get_stylesheet_directory_uri().'/css/reset.css'//CSSファイルのパス: 例)今回の指定は「テーマフォルダ内/css/reset.css」の読み込み
  );

  /* 読み込み順を指定してCSSファイルを読み込む */
  wp_enqueue_style(
    'initialize-style',//読み込むCSSを識別する名前(必須) ※同名の指定はできない ※既に予約されている「common」等使えないものがあるので注意
    get_stylesheet_directory_uri().'/css/initialize.css',//CSSファイルのパス: 例)今回の指定は「テーマフォルダ内/css/initialize.css」の読み込み
    array('reset-style')//事前に読み込むCSS識別名: 例)今回の指定は「reset.css」の後に「initialize.css」を読み込む
  );

  /* 過去バージョンのキャッシュを使用せず変更済みCSSファイルを読み込ませる:ファイル名の後にバージョン番号をクエリ文字列で付与する */
  wp_enqueue_style(
    'common-style',//読み込むCSSを識別する名前(必須) ※同名の指定はできない ※既に予約されている「common」等使えないものがあるので注意
    get_stylesheet_directory_uri().'/css/common.css',//CSSファイルのパス: 例)今回の指定は「テーマフォルダ内/css/common.css」の読み込み
    array('reset-style', 'initialize-style'),//事前に読み込むCSS識別名: 例)今回の指定は「reset.css」「initialize.css」の後に「common.css」を読み込む
    '1.0'//バージョン番号: 例)CSSファイルパスの後にバージョン番号のクエリ文字列を追加する
  );

  /* メディア属性を追加する */
  wp_enqueue_style(
    'pc-style',//読み込むCSSを識別する名前(必須) ※同名の指定はできない ※既に予約されている「common」等使えないものがあるので注意
    get_stylesheet_directory_uri().'/css/pc.css',//CSSファイルのパス: 例)今回の指定は「テーマフォルダ内/css/pc.css」の読み込み
    array('reset-style', 'initialize-style', 'common-style'),//事前に読み込むCSS識別名: 例)今回の指定は「reset.css」「initialize.css」の後に「common.css」を読み込む
    '1.0',//バージョン番号: 例)CSSファイルパスの後にバージョン番号のクエリ文字列を追加する
    'screen and (min-width: 480px)'//media属性: 例)今回の指定は画面幅480px以上の場合に適用するPC用CSS読み込み
  );

  //固定ページ用CSS:例)スラッグ「contact」に適用させるCSSを読み込む
  if (is_page('contact')) {
    wp_enqueue_style(
      'contact-style',
      get_stylesheet_directory_uri().'/css/contact.css',
      array('reset-style', 'initialize-style'),
      '1.0'
    );
  }

  //投稿詳細用CSS:
  if (is_single()) {
    wp_enqueue_style(
      'post-style',
      get_stylesheet_directory_uri().'/css/post.css',
      array('reset-style', 'initialize-style'),
      '1.0'
    );
  }

  //投稿詳細用CSS:
  if (is_single()) {
    wp_enqueue_style(
      'single-style',
      get_stylesheet_directory_uri().'/css/single.css',
      array('reset-style', 'initialize-style'),
      '1.0'
    );
  }

  //カスタム投稿詳細用CSS:例)カスタム投稿タイプ「news」の投稿詳細ページに適用させるCSSを読み込む
  if (is_singular('news')) {
    wp_enqueue_style(
      'single-news-style',
      get_stylesheet_directory_uri().'/css/single-news.css',
      array('reset-style', 'initialize-style'),
      '1.0'
    );
  }

  //カスタム投稿アーカイブページ用CSS:例)カスタム投稿タイプ「news」のアーカイブページに適用させるCSSを読み込む
  if (is_post_type_archive('news')) {
    wp_enqueue_style(
      'archive-news-style',
      get_stylesheet_directory_uri().'/css/archive-news.css',
      array('reset-style', 'initialize-style'),
      '1.0'
    );
  }


  /*---------------------------------
    jQueryファイルの読み込み
  ---------------------------------*/
  wp_deregister_script('jquery'); //WPが持つjQueryを利用しない
  wp_enqueue_script(
    'jquery',//読み込むJSを識別する名前(必須) ※同名の指定はできない ※既に予約されている「common」等使えないものがあるので注意
    '//code.jquery.com/jquery-3.4.1.min.js'//JSファイルのパス: 例)CDNを使用してjQueryファイルの読み込み
  );

  /*---------------------------------
    JS読み込み
  ---------------------------------*/
  wp_enqueue_script(
    'script',//読み込むJSを識別する名前(必須) ※同名の指定はできない ※既に予約されている「common」等使えないものがあるので注意
    get_stylesheet_directory_uri() . '/js/script.js',//JSファイルのパス: 例)今回の指定は「テーマフォルダ内/js/script.js」の読み込み
    array('jquery'),//事前に読み込むJS識別名: 例)今回の指定は「jquery本体.js」の後に「script.js」を読み込む
    '1.0',//バージョン番号: 例)JSファイルパスの後にバージョン番号のクエリ文字列を追加する
    true//出力位置: true </body>直前に出力, false <head>内に出力
  );

  //フロントページ用JS
  if (is_front_page()) {
    wp_enqueue_script(
      'front-page',
      get_stylesheet_directory_uri() . '/js/front-page.js',
      array('jquery'),
      '1.0',
      true
    );
  }
}
add_action('wp_enqueue_scripts', 'load_scripts');

上記で出力されるCSS/JS読み込みタグ
※フロントページ表示時

<!DOCTYPE html>
<html lang="ja">
<head>
    :
  <link rel='stylesheet' id='reset-style-css'  href='http://localhost/test/wp-content/themes/test/css/reset.css?ver=5.2.4' type='text/css' media='all' />
  <link rel='stylesheet' id='initialize-style-css'  href='http://localhost/test/wp-content/themes/test/css/initialize.css?ver=5.2.4' type='text/css' media='all' />
  <link rel='stylesheet' id='common-style-css'  href='http://localhost/test/wp-content/themes/test/css/common.css?ver=1.0' type='text/css' media='all' />
  <link rel='stylesheet' id='pc-style-css'  href='http://localhost/test/wp-content/themes/test/css/pc.css?ver=1.0' type='text/css' media='screen and (min-width: 480px)' />
  <script type='text/javascript' src='//code.jquery.com/jquery-3.4.1.min.js?ver=5.2.4'></script>
    :
  <link rel="stylesheet" href="http://localhost/test/wp-content/themes/test/style.css">
</head>

<body>
    :
  <script type='text/javascript' src='http://localhost/test/wp-content/themes/test/js/script.js?ver=1.0'></script>
  <script type='text/javascript' src='http://localhost/test/wp-content/themes/test/js/front-page.js?ver=1.0'></script>
</body>
</html>