• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

Tips

特定のWordPress管理画面でのみ独自のCSSやスクリプトを読み込む方法

特定のWordPress管理画面でのみ独自のCSSやスクリプトを読み込む方法

自作でWordPressのテーマやプラグインをつくる場合、管理画面だけに自前のCSSやJavascriptを読み込ませたいときがあります。
そんなときはWordPressのアクションフックを使って色々と方法がありますが、ここでは1回のアクション関数でCSSもスクリプトも読み込んで、さらに対象の管理画面も指定する方法をご紹介します。

テーマ制作時やカスタマイズするときのTipsにどうぞ。

WordPressの管理画面に独自のCSSやJavascriptを読み込む

まずは基本。以下のようなコードをテーマの場合は ”function.php” に追記して管理画面に自前のCSSやスクリプトを組み込むことができます。

投稿ページのみに独自のCSSやJavascriptを読み込む

WordPressの管理画面すべてではなく、例えば 投稿ページ(新規、編集)でのみ自前のスタイルやスクリプトをロードさせるには、WordPressによって割り当てられている現在のページのユニークな接尾辞(hook_suffix)が “post-new.php” か “post.php” であるかをチェックすればOKです。

“admin_enqueue_scripts” アクションでは 引数(hook_suffix)に現在のページの接尾辞が渡されれるので、この値で管理画面のどのページかを判定することで読み込むスクリプトやスタイルシートを特定のページに限定することができます。

WordPressで安全に任意のスクリプトを読み込むには、”wp_enqueue_script” 関数、CSSを読み込むには “wp_enqueue_style” 関数を使います。

現在の hook_suffix を調べる方法

目的の管理画面の “hook_suffix” がわからない場合は、以下を “function.php” にでも追記して対象ページを参照することで、管理画面上部にメッセージで通知させてチェックできます。

このコードを使って、例えばカテゴリーの表示順序を変えられる「My Category Order」プラグインの管理画面の hook_suffix は “posts_page_mycategoryorder” であることがわかります。
capture 2014-11-21 13.17.28


DigiPressテーマにも専用の管理画面がありますが、同じように hook_suffix を利用してDigiPress管理画面だけに自前のCSSとスクリプトをキューに追加しています。

URL
TBURL

COMMENT ON FACEBOOK

Return Top