【WordPress】ダッシュボード(管理画面)に独自CSSや独自JavaScriptを読み込む方法

Ads by Google

ワードプレスの管理画面をカスタマイズする際、オリジナルのCSSとJavaScriptを読み込むことはほぼ必須です。

そんなニーズに応えるために、ワードプレスのadmin_enqueue_scriptsアクションが使えます。

ダッシュボードに独自CSSと独自JavaScriptを読み込む方法

function custom_admin_enqueue(){
	wp_enqueue_style( 'custom_admin_enqueue', get_template_directory_uri(). '/custom-admin.css' );
	wp_enqueue_script( 'custom_admin_enqueue', get_template_directory_uri(). '/custom-admin.js' );
}
add_action( 'admin_enqueue_scripts', 'custom_admin_enqueue' );

上記のコードで、ダッシュボードに「custom-admin.css」と「custom-admin.js」が読み込まれるようになります。

なおダッシュボードではなく、公開しているサイト側でスタイルシートやスクリプトを読み込みたい場合はadmin_enqueue_scriptsの代わりにwp_enqueue_scriptsを使います。

公開しているサイトで独自CSSと独自JavaScriptを読み込む方法

function custom_enqueue(){
	wp_enqueue_style( 'custom_admin_enqueue', get_template_directory_uri(). '/custom.css' );
	wp_enqueue_script( 'custom_admin_enqueue', get_template_directory_uri(). '/custom.js' );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue' );

これで<?php wp_head(); ?>のときに「custom.css」と「custom.js」が読み込まれるようになります。

なお<?php wp_head(); ?>ではなく<?php wp_footer(); ?>で出力させたいときは、「wp_enqueue_style()」または「wp_enqueue_script()」の第5引数でtrueを指定します。

function custom_enqueue(){
	wp_enqueue_style( 'custom_admin_enqueue', get_template_directory_uri(). '/custom.css', '', '', true );
	wp_enqueue_script( 'custom_admin_enqueue', get_template_directory_uri(). '/custom.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue' );

以上。
当初は「WordPressダッシュボードに独自CSSや独自JavaScriptを読み込む方法」だけを紹介するつもりでしたが、関連する「wp_enqueue_scripts」にもちょっとだけ触れました。
誰かのお役に立てれば幸いです。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google