こんな疑問に答えます。
推奨されているやり方
まずはじめに、ワードプレスから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フォルダ内にあります。