【WordPress】CSS・JavaScriptの外部ファイルを追加・削除する方法｜wp_enqueue_scripts
WordPressではプラグインをインストールした際などに、外部のCSS・JavaScriptファイルを読み込むタグが、head内や</body>の直前に挿入される場合があります。
今回は、そのような外部CSS・JavaScriptファイルを削除したい場合と、それとは反対に外部ファイルを追加したい場合に利用できるソースコードの例となります。
CSS・JavaScriptの外部ファイルを追加・削除する例
外部ファイルの追加・削除｜wp_enqueue_scripts
外部CSS・JavaScriptファイルを読み込むタグの追加・削除には、アクションフックwp_enqueue_scriptsを利用する方法があります。
以下、wp_enqueue_scriptsを利用し、head内にCSS・JavaScriptファイルを読み込むタグを追加・削除する例となり、functions.phpに記述します。
function my_enqueue_scripts() {
// WordPressのデフォルトの「jQuery」スクリプトを削除
wp_deregister_script('jquery');
// プラグイン「contact-form-7」のスタイルシートを削除
wp_deregister_style('contact-form-7');
// CDNを利用し「jquery.min.js」スクリプトを追加
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
// テンプレートディレクトリ直下にある「js」フォルダ内の「script-common.js」を、ハンドル名jqueryのファイルの後に追加
wp_enqueue_script('script-common', get_template_directory_uri() . '/js/script-common.js', array('jquery'));
// テンプレートディレクトリ直下にある「style.css」を追加
wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/style.css' );
// CDNを利用し「font-awesome.min.css」を追加
wp_enqueue_style( 'font-awesome.min', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
// 条件分岐を使用し、シングルページの場合のみ「prism.js」を、ハンドル名jqueryのファイルの後に追加
if(is_single()) {
wp_enqueue_script('prism', get_template_directory_uri() . '/js/min/prism.js', array('jquery'));
}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );上記コードで利用しているget_template_directory_uri 関数のように、WordPressのディレクトリを取得できる関数については以下のリンク先を参考にしてみてください。
</body>直前のタグ｜wp_footer
インストールしたプラグインによっては、外部CSS・JavaScriptファイルを読み込むタグが、</body>タグの前にある場合があり、それらは上記のアクションフックwp_enqueue_scriptsでは削除できません。
そのような場合には、アクションフックwp_footerを利用することで、</body>直前にあるタグの削除や、</body>直前にタグを追加できます。
ソースコードの例
以下はアクションフックwp_footerを利用し、</body>タグの前にあるcssファイルを読み込むタグを削除する例となり、functions.phpに記述します。
function my_wp_footer(){
// プラグイン「YARPP」のスタイルシートを削除
wp_deregister_style( 'yarppRelatedCss' );
}
add_action( 'wp_footer', 'my_wp_footer' );管理画面のみで外部ファイルを追加・削除する場合
また、WordPressの管理画面のみで、外部CSS・JavaScriptファイルを読み込むタグを追加・削除する場合については、以下のリンク先を参考にしてみてください。
CSS・JavaScriptファイルを追加・削除する関数について
上記のソースコードではフックのコールバック関数内で、以下の4つの関数を使いCSS・JavaScriptファイルを読み込むタグを追加・削除しています。
- wp_deregister_script() で、登録済みのスクリプトを解除
- wp_deregister_style() で、登録済みのスタイルシートを解除
- wp_enqueue_script() で、スクリプトを登録して追加
- wp_enqueue_style() で、スタイルシートを登録して追加
ファイルのハンドル名について
上記の関数では、追加・削除するファイルのハンドル名をパラメータに必ず指定する必要があります。
削除したいファイルのハンドル名を確認する方法は、以下のリンク先を参考にしてみてください。
作成したファイルを追加する場合のハンドル名について
CSS・JavaScriptファイルを追加する際のハンドル名は、ファイルを識別する名前のため一意である必要があります。
そのため作成したファイルを追加する場合、ハンドル名commonのスクリプトなど、あらかじめWordPress に登録されているスクリプトのハンドル名は利用できません。
WordPress に登録されているスクリプトのハンドル名については以下のリンク先を参考にしてみてください。
関数リファレンス/wp enqueue script - WordPress Codex 日本語版
関数のパラメータ
上記例で利用したCSS・JavaScriptファイルを追加・削除する関数のパラメータとなります。
jsファイルを削除｜wp_deregister_script
登録済みのスクリプトを解除する関数
パラメータ
wp_deregister_script( $handle );- $handle（必須）
- スクリプトのハンドル名を指定。
cssファイルを削除｜wp_deregister_style
登録済みのスタイルシートを解除する関数
パラメータ
wp_deregister_style( $handle );- $handle（必須）
- スタイルシートのハンドル名を指定。
jsファイルを追加 ｜wp_enqueue_script
スクリプトを追加する関数。スクリプトが登録されていない場合はスクリプトの登録も行います。
パラメータ
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );- $handle（必須）
- スクリプトのハンドル名を指定。
- $src（省略可）
- スクリプトのURLを指定。ローカルスクリプトの URL はget_template_directory_uri関数などでディレクトリを取得して指定。
- $deps（省略可）
- 追加するスクリプトより前に読み込まれる必要があるスクリプトのハンドル名を配列で指定。
- $ver（省略可）
- スクリプトのバージョン番号を指定する文字列を指定。
- $in_footer（省略可）
- true を指定した場合 、スクリプトを</body> タグの前に配置。初期値は false
cssファイルを追加｜wp_enqueue_style
スタイルシートを追加する関数。スタイルシートが登録されていない場合はスタイルシートの登録も行います。
パラメータ
wp_enqueue_style( $handle, $src, $deps, $ver, $media );- $handle（必須）
- スタイルシートのハンドル名を指定。
- $src（省略可）
- スタイルシートのURLを指定。ローカルスクリプトの URL はget_template_directory_uri関数などでディレクトリを取得して指定。
- $deps（省略可）
- 追加するスタイルシートより前に読み込まれる必要があるスクリプトのハンドル名を配列で指定。
- $ver（省略可）
- スタイルシートのバージョン番号を指定する文字列を指定。
- $media（省略可）
- スタイルシートに定義されているメディアを指定する文字列。初期値は 'all'