WordPress

WordPress|head内でCSSやJavaScriptファイルを読み込ませる方法

ここでは、WordPressのテーマ内でスタイルシートやJavaScriptの読み込みリンクを追加する方法についてお話します。

コンテンツ

スタイルシートやJavaScriptの読み込みを追加する方法

jQueryやBootstrap、Font Awesomeなどを自分の使用しているWordPressテーマに導入したいときってありますよね。このようなときに、head内に直接読み込みコードを記入するのも良いですが、functions.phpで関数を使って読み込ませた方がスマートです。ここではその方法についてお話します。

※ちなみに、WordPressは初期設定ですでにjQueryが実装されています。特に必要がなければ最初から実装されているjQueryを使いましょう。

ここでご紹介する方法はfunctions.phpを編集する方法です。良かったらfunctions.phpを編集する前に下記の記事もご参照ください。

CSSファイルの読み込み方法

下記はfunctions.phpに記入するコードです。

PHP

function add_files() {
    wp_enqueue_style( $handle, $src, $deps, $ver, $media );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

「add_files」のところは任意の関数名に変更して大丈夫です。その場合、3行目の名前も変えてくださいね。

カッコの中にある$handle, $src, $deps, $ver, $mediaの部分にそれぞれ値を当てはめていきます。$handle以外は省略可能です。少し難しそうに感じるかもしれませんが、下記の表を見ながら当てはめていけば大丈夫です。

引数 説明
$handle 任意の名前を付けます(必須)。そのままファイル名で良いと思います。
$src ファイルのURLを記入します。
$deps このファイルよりも先に読み込まれるべきファイルがあれば、そのハンドル名を記入します。
$ver バージョン番号。分からなければ省略しましょう。
$media media属性を指定。初期値はallです。

引数と引数は、カンマ区切りで記入します。引数をに値を入れるときは、クォーテーションマーク「’」でくくりましょう。ただし、WordPressのコードには必要ありません。

具体例

PHP

//スタイルシートの読込
function add_files() {
    wp_enqueue_style( 'bootstrap-css', get_template_directory_uri().'/css/bootstrap.min.css' );
    wp_enqueue_style( 'fontawesome', 'https://use.fontawesome.com/releases/v5.0.13/css/all.css' );
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

具体的に読み込みコードを書くとこんな感じになります。$src以降は省略してあります。

ファイルのパスの書き方
テーマの基本スタイルシートを読み込む場合

テーマで使用されるスタイルシートの読み込みは下記のような関数を使います。

get_stylesheet_uri()

この場合は、関数なのでクォーテーションマーク「’」は必要ありません。

外部のCDNを読み込む場合

普通にファイルのパスを記入します。例えば、Bootstrapの読み込みの場合はこんな感じになります。

'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css'
テーマフォルダ内にあるファイルを読み込む場合

get_template_directory_uri().がテーマフォルダ直下のURLになりますので、それに続く形で記入します。

get_template_directory_uri().'/フォルダ名/ファイル名.css'

JavaScriptファイルの読み込み方法

次は、JavaScriptファイルの読み込み方法について見ていきましょう、やり方は、CSSファイルの読み込み方法とほとんど変わりません。下記のコードをfunctions.phpに記入します。

PHP

function add_files() {
    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

先ほどと同じように「add_files」の部分は任意の関数名に変更可能です。その場合は、3行目にある名前も変更してください。それではカッコ内の引数の意味を見ていきましょう。

引数 説明
$handle 任意の名前を付けます(必須)。そのままファイル名で良いと思います。
$src ファイルのURLを記入します。
$deps このファイルよりも先に読み込まれるべきファイルがあれば、そのハンドル名を記入します。
$ver バージョン番号。分からなければ省略しましょう。
$in_footer 値をtrueにすると、body終了タグの前で読み込まれます。
具体例

PHP

//JavaScriptの読込
function add_files() {
    wp_enqueue_script( jQuery, get_template_directory_uri().'/js/jquery-3.3.1.js' );
    wp_enqueue_script( popper, get_template_directory_uri().'/js/popper.min.js', '', '', true );
    wp_enqueue_script( bootstrap-js, get_template_directory_uri().'/js/bootstrap.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

上記がJavaScriptを読み込んだときの具体例です。

CSSとJavaScriptファイルを一緒に読み込む方法

上記で説明した方法の合わせ技です。スタイルシートとJavaScriptを一緒に読み込ませたい場合はこちらの方が効率的ですね。

PHP

function add_files() {
	wp_enqueue_style( $handle, $src, $deps, $ver, $media );
	wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

以上がCSSやJavaScriptファイルを読み込ませる方法でした。

最近の記事

  1. CSS

    CSS|中央寄せが効かないときは・・・
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP