ワードプレスの管理画面をカスタマイズする際、オリジナルの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」にもちょっとだけ触れました。
誰かのお役に立てれば幸いです。