こんな疑問に答えます。
推奨されているやり方
まずはじめに、ワードプレスからcssファイル、jsファイルを読み込むには<head> 内に link 要素や script タグを使って記述するやり方がありますが、プラグインなどのファイルと重複したり、同じファイルを複数回読み込んだりと様々な問題が出てきます。
そのため、cssはwp_enqueue_style、jsはwp_enqueue_scriptを使って読み込むやり方が推奨されています。
今回は推奨されているやり方を紹介します。
wp_head();が記述されているか
<head>
<title>タイトル名</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<?php wp_head(); ?>
</head>まずはじめに、</head>の直前にwp_head();が読み込まれているかを確認します。
wp_enqueue_style()、wp_enqueue_script()は、wp_head();の中で処理され、styleやscriptのHTMLタグとして出力されるので、これがないと動きません。
なのでheader.phpかindex.phpのヘッドの閉じタグの直前にwp_head();を読み込ませてください。
WordPressでcssファイルとjsファイルを読み込む方法
では早速、head内にwp_head();があることを確認して、正しい記述を学んでいきましょう。
CSSファイル（スタイルシート）の読み込み
テースタイルシート、style.cssを読み込むには、wp_enqueue_style()という関数を使用します。
wp_enqueue_style( $handle, $src, $deps, $ver, $media )
| $handle | （必須）スタイルシートを識別するためのユニークな（他と重複しない）ハンドル名を指定。link 要素の id 属性の値としても使用されます。 |
|---|---|
| $src | スタイルシートの URLを指定。（初期値： 空文字列） |
| $deps | 依存するスタイルシートのハンドル名を配列で指定（指定されたスタイルシートは先に読み込まれます）。依存関係がない場合は空の配列「array()」を指定。 |
| $ver | スタイルシートのバージョン番号を指定する文字列を指定。ファイル名の末尾にクエリパラメータとして追加されます。（初期値： false） |
| $media | スタイルシートのメディアを指定。（初期値： ‘all’） |
上記を踏まえて、下記をfunctions.phpに記載します。
function my_styles() {
wp_enqueue_style( 'style-name', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );このスタイルシートはindex.phpと同じ階層にあります。
jsファイル（java script）の読み込み
jsファイルを読み込むには、wp_enqueue_script()という関数を使います。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )
| $handle | （必須）スクリプトを識別するためのハンドル名を指定。WordPress にデフォルトで登録されているスクリプトのハンドル名は「Default Scripts Included and Registered by WordPress」に掲載されています。 |
|---|---|
| $src | スクリプトの URLを指定。（初期値： 空文字列） |
| $deps | 依存するスクリプトのハンドル名を配列で指定（指定されたスクリプトは先に読み込まれます）。依存関係がない場合は空の配列「array()」を指定。 |
| $ver | スクリプトのバージョン番号を指定する文字列を指定。ファイル名の末尾にクエリパラメータとして追加されます。（初期値： false） |
| $in_footer | 通常スクリプトは に配置されますが、true の場合 終了タグの前に配置されます。（初期値： false）テーマ内の適切な位置に wp_footer() テンプレートタグが含まれていることが必須です。 |
上記を踏まえて、下記をfunctions.phpに記載します。
function my_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.2', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );script.jsファイルはjsフォルダ内にあります。
