2021/11/01 (更新日: 2024/01/17)

WordPressサイトにCSSやJavaScriptのファイルを読み込ませて利用する方法

WordPress

WordPressで作ったサイトで、CSSのフレームワークやJavaScriptのライブラリ又は自作のファイルなど、デフォルトでWordPressに含まれていないファイルを利用したいことがあると思います。
静的サイトのようにファイルを読み込ませる記述を「header.php」や「footer.php」に設置して読み込ませれば良いようにも思えます。
もちろんそれで動作する場合もあるかもしれませんが、使用しているテーマやプラグインなどが読み込む他のファイルと重複や競合してしまい、正しく動作しない恐れもあります。
CSSやJavaScriptのファイルを読み込む際の方法として、WordPressにより推奨されている正しいやり方がありますので、今回はその方法について紹介していきたいと思います。

参考：
Including CSS & JavaScript | Theme Developer Handbook | WordPress Developer Resources

目次

• WordPressにCSSを読み込ませる方法
• wp_enqueue_styleの$srcパラメータについて
• サイトに設置したCSSファイルを読み込ませる場合
• CDNを利用してCSSファイルを読み込ませる場合
• wp_enqueue_styleの$verパラメータについて
• WordPressにJavaScriptを読み込ませる方法
• wp_enqueue_scriptの$srcパラメータについて
• サイトに設置したJSファイルを読み込ませる場合
• CDNを利用してJSファイルを読み込ませる場合
• wp_enqueue_scriptの$verパラメータについて
• WordPressにCSSとJavaScriptを両方読み込ませる方法
• 補足
• 補足1. get_theme_file_uri関数について
• 補足2. filemtime関数を利用したバージョン番号の自動更新について

WordPressにCSSを読み込ませる方法

WordPressにCSSを読み込ませる際は、wp_enqueue_style()関数を利用します。
wp_enqueue_style()の基本的な構成は以下のようになっています。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

WordPressにCSSを読み込ませるためには、上記のwp_enqueue_style()関数を使って、使用しているテーマのfunctions.phpに下記のような記述を設置する必要があります。

function my_styles() {	
  wp_enqueue_style( $handle, $src, $deps, $ver, $media);　// CSSファイルの登録と読み込みキューへの追加
}

add_action( 'wp_enqueue_scripts', 'my_styles()' );  // 'my_styles()'をアクションフックで読み込む

以下で、wp_enqueue_style()のカッコ内で利用できる各パラメータについて紹介していきます。

参考：
$mediaパラメータについて詳しくは、下記のページを見てみてください。
メディアタイプ－CSSの基本

wp_enqueue_styleの$srcパラメータについて

wp_enqueue_styleのパラメータ$srcの記述内容について簡単に紹介しておきます。
サイトに設置したCSSファイルを読み込ませる場合と、CDNを利用してCSSファイルを読み込ませる場合の$srcの記述方法を紹介します。

サイトに設置したCSSファイルを読み込ませる場合

下記のようなファイル構成になっていて、テーマとして「twentytwentyone」の子テーマである「twentytwentyone-child」を有効化している場合を例に紹介していきます。
「twentytwentyoneの子テーマ」内の「assets」フォルダの中の「css」フォルダに今回読み込ませたい「add-style.css」というCSSファイルを設置しています。

root_folder/
        ├── wp-content/
            ├── themes/
                └── twentytwentyone/
                └── twentytwentyone-child/
                     ├── assets/
                         ├── css/
                              └── add-style.css

「add-style.css」を設置して読み込ませる場合のfunctions.phpへの記述例
（wp_enqueue_styleのパラメータのうち、$handleと$srcだけ指定しています。）

function my_styles() {
  wp_enqueue_style('my-style', get_theme_file_uri('/assets/css/add-style.css'));
}

add_action( 'wp_enqueue_scripts', 'my_styles' );

パラメータ$srcでは読み込ませたいファイルのURLを指定しますが、テーマフォルダまでのパスはget_theme_file_uri()というWordPressの関数を利用して指定します。
最近のバージョンのWordPressを使用していれば、有効化しているテーマが親テーマか子テーマかで読み込ませるためのget_theme_file_uri()関数を変える必要はありません。
詳しくは下の方の「補足1. get_theme_file_uri関数について」で紹介していますので、興味のある方は見てみてください。

CDNを利用してCSSファイルを読み込ませる場合

BootstrapをCDN経由で読み込ませる場合を例として紹介します。
例としてBootstrap CSSのhrefは、

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

となっています。このCDNを利用して読み込ませる場合の記述は下記のようになります。

Bootstrap CSSをCDN経由で読み込ませる場合のfuctions.phpへの記述例
(wp_enqueue_styleのパラメータのうち、$handleと$srcだけ指定しています。)

function add_my_styles() {
    wp_enqueue_style(
    'bootstrap',  //$handle
    '//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'  //$src
    );
}

add_action( 'wp_enqueue_scripts', 'add_my_styles' );

CDNを利用してCSSファイルを読み込ませる場合は、上記のようにCDNのhrefの//以降を$srcパラメータに指定します。

wp_enqueue_styleの$verパラメータについて

wp_enqueue_styleのパラメータ$verの指定内容と出力されるHTMLについて簡単に紹介しておきます。
例として、「https://example.com」というサイトで先ほど$srcパラメータのところで紹介した例と同じファイル構成で、テーマとして「twentytwentyone-child」を有効化している場合に、function.phpに下の記述のように記述して$verパラメータに'1.1'と指定したときについて見てみましょう。

function my_styles() {
  wp_enqueue_style(
　　　　　　　　'my-style',  //$handle
    get_theme_file_uri('/assets/css/add-style.css'),  //$src
    array(),  //$deps
    '1.1',  //$ver
    'all'  //$media
);
}

add_action( 'wp_enqueue_scripts', 'my_styles' );

すると、出力されるHTMLは下記のようになりCSSのファイル名の後に?ver=1.1というバージョン番号がつきます。

<link rel='stylesheet' id='add-style-css' href='https://example.com/wp-content/themes/twentytwentyone-child/assets/css/add-style.css?ver=1.1' media='all'/>

上記のようにCSSのバージョン番号を合わせてHTMLに出力させることもできるので、CSSファイルを更新した際に$verパラメータのバージョン番号も書き換えておくことで「旧ファイルのキャッシュを読み込んでいるために更新が反映されていない」という状況を防ぐことができます。
また、$verパラメータとPHPのfilemtime()関数を組み合わせて利用することで、バージョン番号を自動更新し、キャッシュからの読み込みを防止する方法について、下の方の「補足2. filemtime関数を利用したバージョン番号の自動更新について」で紹介していますので、興味のある方は見てみてください。

ここまで、WordPressにCSSを読み込ませる方法について紹介してきました。
wp_enqueue_style()関数についてもっと詳しく知りたい方は、「wp_enqueue_style() | Function | WordPress Developer Resources 」を見てみてください。

WordPressにJavaScriptを読み込ませる方法

WordPressにJavaScriptを読み込ませる際は、wp_enqueue_script()関数を利用します。
wp_enqueue_script()の基本的な構成は以下のようになっています。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

WordPressにCSSを読み込ませるためには、上記のwp_enqueue_script()関数を使って、使用しているテーマのfunctions.phpに下記のような記述を設置する必要があります。

function my_script() {	
  wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);　// JSファイルの登録と読み込みキューへの追加
}

add_action( 'wp_enqueue_scripts', 'my_script()' );  // 'my_script()'をアクションフックで読み込む

wp_enqueue_script()のカッコ内で利用できる各パラメータについて紹介していきます。

wp_enqueue_scriptの$srcパラメータについて

wp_enqueue_scriptのパラメータ$srcの記述内容について簡単に紹介しておきます。
サイトに設置したJSファイルを読み込ませる場合と、CDNを利用してJSファイルを読み込ませる場合の$srcの記述方法を紹介します。

サイトに設置したJSファイルを読み込ませる場合

下記のようなファイル構成になっていて、テーマとして「twentytwentyone」の子テーマである「twentytwentyone-child」を有効化している場合を例に紹介していきます。
「twentytwentyoneの子テーマ」内の「assets」フォルダの中の「js」フォルダに今回読み込ませたい「my-script.js」というJSファイルを設置しています。

root_folder/
        ├── wp-content/
            ├── themes/
                └── twentytwentyone/
                └── twentytwentyone-child/
                     ├── assets/
                         ├── js/
                              └── my-script.js

「my-script.js」を設置して読み込ませる場合のfunctions.phpへの記述例
（wp_enqueue_scriptのパラメータのうち、$handleと$srcだけ指定しています。）

function my_script() {
  wp_enqueue_script('nice-script', get_theme_file_uri('/assets/js/my-script.js'));
}

add_action( 'wp_enqueue_scripts', 'my_script' );

パラメータ$srcでは読み込ませたいファイルのURLを指定しますが、テーマフォルダまでのパスはget_theme_file_uri()というWordPressの関数を利用して指定します。
最近のバージョンのWordPressを使用していれば、有効化しているテーマが親テーマか子テーマかで読み込ませるためのget_theme_file_uri()関数を変える必要はありません。
詳しくは下の方の「補足1. get_theme_file_uri関数について」で紹介していますので、興味のある方は見てみてください。

CDNを利用してJSファイルを読み込ませる場合

clipboard.jsをCDN経由で読み込ませる場合を例として紹介します。
例としてcdnjsのclipboard.jsのsrcは、

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

となっています。このCDNを利用して読み込ませる場合の記述は下記のようになります。

clipboard.jsをCDN経由で読み込ませる場合のfuctions.phpへの記述例

function add_my_script() {
    wp_enqueue_script(
    'clipboard',  //$handle
    '//cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js',  //$src
    array(),  //$deps
    null,  //$ver
    true  //$in_footer
    );
}

add_action( 'wp_enqueue_scripts', 'add_my_script' );

CDNを利用してJSファイルを読み込ませる場合は、上記のようにCDNのsrcの//以降を$srcパラメータに指定します。

wp_enqueue_scriptの$verパラメータについて

wp_enqueue_scriptのパラメータ$verの指定内容と出力されるHTMLについて簡単に紹介しておきます。
例として、「https://example.com」というサイトで先ほど$srcパラメータのところで紹介した例と同じファイル構成で、テーマとして「twentytwentyone-child」を有効化している場合に、function.phpに下の記述のように記述して$verパラメータに'1.1'と指定したときについて見てみましょう。

function my_script() {
  wp_enqueue_script(
　　　　　　　　'nice-script',  //$handle
    get_theme_file_uri('/assets/js/my-script.js'),  //$src
    array(),  //$deps
    '1.1',  //$ver
    'true'  //$in_footer
);
}

add_action( 'wp_enqueue_scripts', 'my_script' );

すると、出力されるHTMLは下記のようになりJSのファイル名の後に?ver=1.1というバージョン番号がつきます。

<script src='https://example.com/wp-content/themes/twentytwentyone-child/assets/js/my-script.js?ver=1.1' id='nice-script-js'></script>

上記のようにJSのバージョン番号を合わせてHTMLに出力させることもできるので、JSファイルを更新した際に$verパラメータのバージョン番号も書き換えておくことで「旧ファイルのキャッシュを読み込んでいるために更新が反映されていない」という状況を防ぐことができます。
また、$verパラメータとPHPのfilemtime()関数を組み合わせて利用することで、バージョン番号を自動更新し、キャッシュからの読み込みを防止する方法について、下の方の「補足2. filemtime関数を利用したバージョン番号の自動更新について」で紹介していますので、興味のある方は見てみてください。

ここまで、WordPressにJSを読み込ませる方法について紹介してきました。
wp enqueue script()関数についてもっと詳しく知りたい方は、「wp_enqueue_script() | Function | WordPress Developer Resources 」を見てみてください。

WordPressにCSSとJavaScriptを両方読み込ませる方法

WordPressに読み込ませたいCSSやJavaScriptが複数ある場合も多いかと思います。
そのような時は、function.phpへの記述を一つのfunctionにまとめて記述することが推奨されていますので、その際の記述方法の例を紹介します。

function add_my_files() {
　　　　wp_enqueue_style(　'bootstrap',　'//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'　);
  wp_enqueue_style( 'my-style', get_template_directory_uri() . '/assets/css/add-style.css' );
  wp_enqueue_script( 'my-script', get_template_directory_uri() . '/assets/js/add-script.js' , array (), 1.1, true);
}  

add_action( 'wp_enqueue_scripts', 'add_my_files' );

上記の記述例のように、一つのfunctionの中に必要な分だけwp_enqueue_style()やwp_enqueue_script()を設置して、まとめてadd_action()で読み込ませます。

補足

補足1. get_theme_file_uri関数について

WordPressのバージョンがv4.7（2016年12月公開）以降である場合、$srcパラメータでサイトに設置したファイルのURLを指定するのにget_theme_file_uri()関数が利用できます。
get_theme_file_uri()関数を利用することで、現在使用しているテーマが子テーマであるか親テーマであるかに関係なくサイトに設置したCSSやJSのファイルを読み込ませるための$srcのURL記述を同じ記述で済ませることができます。
get_theme_file_uri()関数は、下記のように定義されています。

function get_theme_file_uri( $file = '' ) {
    $file = ltrim( $file, '/' );
 
    if ( empty( $file ) ) {
        $url = get_stylesheet_directory_uri();
    } elseif ( file_exists( get_stylesheet_directory() . '/' . $file ) ) {
        $url = get_stylesheet_directory_uri() . '/' . $file;
    } else {
        $url = get_template_directory_uri() . '/' . $file;
    }
 
    /**
     * Filters the URL to a file in the theme.
     *
     * @since 4.7.0
     *
     * @param string $url  The file URL.
     * @param string $file The requested file to search for.
     */
    return apply_filters( 'theme_file_uri', $url, $file );
}

すなわち、get_theme_file_uri($file)関数はまず、$fileで指定されたファイルが子テーマ内に存在するかを調べ、あれば子テーマ内のファイルのURLを返し、なければ、親テーマ内のファイルのURLを返します。

参考：
get_theme_file_uri() | Function | WordPress Developer Resources

補足2. filemtime関数を利用したバージョン番号の自動更新について

前述したように、wp_enqueue_style()とwp_enqueue_script()ではパラメータの$verを指定することでファイル名の後ろにバージョン番号をつけることができます。
この$verパラメータにファイルの更新時刻を取得できるPHPのfilemtime()関数を利用して自身で作成したファイルの更新時刻を取得させることで、更新時に自動的にバージョン番号を書き換えることができます。
ファイルを更新するたびに自動的にバージョン番号が更新されることでファイル更新後に手動でバージョン番号を更新しなくても古いキャッシュが読み込まれるのを防ぐことができます。
filemtime($filename)関数の基本的な構成は以下のようになっており、$filenameで指定されたパスにあるファイルの更新時刻を返します。

filemtime( $filename );  //$filenameはファイルへのパス

以下に、$verパラメータにfilemtime()関数を利用する場合の記述例を紹介しておきます。

function my_styles() {
  wp_enqueue_style(
　　　　　　　　'my-style',  //$handle
　　　　　　　　get_theme_file_uri('/assets/css/add-style.css'),  //$src
    array(),  //$deps
    filemtime( get_theme_file_uri( '/assets/css/add-style.css' ))  //$ver
　　　　);
}

add_action( 'wp_enqueue_scripts', 'my_styles' );

参考：
PHP: filemtime – Manual

以上、WordPressサイトにCSSやJavaScriptのファイルを読み込ませて利用する方法を紹介してきました。
参考になりましたら幸いです。

関連記事

WordPressの投稿や固定ページにそのページ固有のCSSやJavaScriptを設置する方法

WordPressサイト内の個別の投稿ページや固定ページだけに適用させたい固有のCSSやJavaScriptを設置する方法について紹介します。今回紹介する方法は、WordPressのプラグインなどを使わずにfunctions.phpにコードを設置してカスタマイズする方法です。

Font AwesomeをWordPressサイトで利用する方法

Font AwesomeのFree版を利用して、WordPressで制作したWebサイト内にアイコンを設置する方法について紹介します。WordPressのプラグインを利用する場合と、利用しない場合とに分けてFont Awesomeのアイコンを使うための準備の方法から、実際にアイコンを設置する方法まで紹介していきます。

WordPressのプラグイン”Easy Table of Contents”を使ってスクロールの現在地ハイライト表示ができる目次をサイドバーに固定表示する

“Easy Table of Contents”を利用してサイドバーウィジェットにスクロール現在位置のカレント表示ができる目次を固定表示させる方法を紹介します。その目次をアレンジする際のCSSコード例も紹介しています。また、”Easy Table of Contents”の”Sticky TOC”についても紹介しています。

• 
• 
• 

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。