WordPressでCSS・JSファイルを読み込む
公開日:2019年11月10日
WordPressでCSS・JSファイルを読み込む方法
- テンプレートのheadタグに直接記述
- 「functions.php」からCSS・JSファイルを読み込みタグを出力
１．テンプレートの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」等にモジュール化されていることが多いので状況に応じて対応
２．「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引数 | 文字列|真偽値 | false | true: </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>
同じカテゴリーのコンテンツ
