MENU

【WordPress】CSS・JavaScriptを読み込む方法

WordPress

この記事では、WordPressでCSS・JavaScriptを読み込む方法について解説しています。

プラグインでエディタ上に記述する項目を追加することも可能ですが、この作業は比較的簡単なのでプラグインの数をこれ以上増やしたくない人はチャレンジしてみましょう。

目次

functions.phpの編集

使用しているテーマフォルダの直下にあるfunctions.phpに、下記のコードを記述します。

function custom_enqueue_scripts() {
    /* ここにファイルを読み込む処理を記述します */
    
};
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
functions.php

wp_enqueue_scriptsは、フロントエンドに表示されるスクリプトとスタイルをキューに格納するときに使用するフックです。

CSSの読み込み

CSSを読み込むには、wp_enqueue_styleを使います。

wp_enqueue_style( string $handle, string $src = "", string[] $deps = array(), string|bool|null $ver = false, string $media = ‘all’ );
PHP
引数説明
$handle一意の名前を指定。
他ファイルとの依存関係を指定する際に使用される。
$src読み込むcssファイルまでのパスを指定。
$deps依存関係にあるファイルを指定。
$verファイルのバージョンを指定。
$mediaメディアタイプを指定。

テーマディレクトリ直下にあるstyle.cssを読み込む場合は、以下のように記述します。

function custom_enqueue_scripts() {
    wp_enqueue_style('theme-css', get_template_directory_uri() . '/style.css', array(), false, 'all');
};
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
functions.php

JavaScriptの読み込み

JavaScriptを読み込むには、wp_enqueue_scriptを使います。

wp_enqueue_script( string $handle, string $src = ”, string[] $deps = array(), string|bool|null $ver = false, array|bool $args = array() );
PHP
引数説明
$handle一意の名前を指定。
他ファイルとの依存関係を指定する際に使用される。
$src読み込むJavaScriptファイルまでのパスを指定。
$deps依存関係にあるファイルを指定。
$verファイルのバージョンを指定。
$argsdefer・asyncの属性を付与させたい場合は、連想配列のstrategyの値に「defer」または「async」を指定。

スクリプトをフッターに出力させたい場合は、連想配列のin_footerの値に「true」を指定。

テーマディレクトリ直下にあるfront.jsを読み込む場合は、以下のように記述します。

function custom_enqueue_scripts() {
    wp_enqueue_script('theme-js', get_template_directory_uri() . '/front.js', array(), false, array(
        'strategy' => 'defer',
        'in_footer' => true
    ));
};
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
PHP

応用編

バージョンを指定してキャッシュクリアさせる

CSS・JavaScriptを読み込む際にバージョンを指定しますが、ここで指定したバージョンはURLの末尾に「?ver=バージョン」の形で追加され、キャッシュクリアとして使われます。

ここで指定するバージョンを、テーマのバージョンと紐づけてあげることによって、修正したファイルが複数あった場合でもテーマのバージョンを上げることで一括キャッシュクリアが可能となります。

define('THEME_VERSION', wp_get_theme()->get('Version'));
function custom_enqueue_scripts() {
    wp_enqueue_style('theme-css', get_template_directory_uri() . '/style.css', array(), THEME_VERSION, 'all');
    wp_enqueue_script('theme-js', get_template_directory_uri() . '/front.js', array(), THEME_VERSION, array(
        'strategy' => 'defer',
        'in_footer' => true
    ));
};
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');
PHP

テーマのバージョンは、style.cssにコメントアウトされている「Version」です。

/*
    ThemeName: テストテーマ
    Version: 1.0.0
*/
CSS
WordPress
よかったらシェアしてね！
  • URLをコピーしました！
目次