【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' );

</body>タグの直前にあるタグを削除|wp_footer

インストールしたプラグインによっては、外部CSS・JavaScriptファイルを読み込むタグが、</body>タグの前にある場合があり、それらは上記のアクションフックwp_enqueue_scriptsでは削除できません。

そのような場合には、アクションフックwp_footerを利用します。

ソースコードの例

以下はアクションフックwp_footerを利用し、</body>タグの前にあるcssファイルを読み込むタグを削除する例となり、functions.phpに記述します。

function my_wp_footer(){
	// プラグイン「YARPP」のスタイルシートを削除
	wp_dequeue_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'

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。