• WordPress

WordPressの管理画面ページに独自のCSS・JSを追加する方法

WordPressの管理画面ページに独自のCSS・JSを追加したい。

特定の管理画面ページだけに適用したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

テーマフォルダ内にCSS・JSファイルを作成

テーマフォルダ内に管理画面に追加したいCSS・JSファイルを作成します。

管理画面ページ共通でCSS・JSを追加

function mytheme_admin_enqueue() {
  // cssを追加
  wp_enqueue_style( 'my_admin_css', get_template_directory_uri() . '/css/style.css' );
  // jsを追加
    wp_enqueue_script( 'my_admin_script', get_template_directory_uri() . '/js/function.js' );
}
add_action( 'admin_enqueue_scripts', 'mytheme_admin_enqueue' );

管理画面ページ共通でCSS、JSファイルを追加するコード例です。

アクションフックwp_enqueue_scriptを使います。

上記アクションフックを使う事で管理画面ページにコードを追記する事が出来ます。

functions.phpに上記コードを記述。

wp_enqueue_style関数を使う事でlinkタグを生成。

wp_enqueue_script関数を使う事でscriptタグを生成出来ます。

それぞれ第二引数に前章で作成したCSS・JSファイルへのパスを記述すればOKです。

ブラウザ検証ツールを使って管理画面ページのソースを確認。

CSS・JSファイルが追加されていたら成功です。

特定の管理画面ページだけに追加

function mytheme_admin_enqueue($hook) {
  // 新規投稿・編集画面のみ
  if( 'post.php' === $hook || 'post-new.php' === $hook ) {
      return;
  }
    // jsを追加
    wp_enqueue_script( 'my_admin_script', get_template_directory_uri() . '/js/function.js' );
  }
add_action( 'admin_enqueue_scripts', 'mytheme_admin_enqueue' );

特定の管理画面ページだけにJSを追加するコード例です。

新規投稿・編集画面のみJSが追加されます。

admin_enqueue_scriptsの引数には現在開いてる管理画面ページのファイルが割り当てられてます。

if文を使い、条件式にCSS・JSを追加したい管理画面ページで使われてるファイルの時だけwp_enqueue_script関数が動作するようにすればO Kです。

まとめ

WordPressの管理画面ページに独自のCSS・JSを追加する方法について紹介しました。

以上で解説を終わります。