関数リファレンス/wp enqueue style

説明

WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。wp_register_style() で予め登録されていれば、そのハンドルを使って追加できます。

使い方

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

パラメータ

$handle

（文字列） （必須） スタイルシートのハンドルとして使われる名称。特別なケースとして、文字列に '?' という記号が含まれている場合、それより前の部分は登録されたハンドルとして参照され、それより後の部分はクエリストリングとして URL に追加される。

初期値： なし

$src

（文字列|真偽値） （オプション） スタイルシートの URL。例: http://example.com/css/mystyle.css。このパラメータは WordPress がこのスタイルを認識していない場合のみに必要。ローカルのスタイルには URL を直接書き込むべきではない。代わりに plugins_url (プラグイン向け) と get_template_directory_uri (テーマ向け) を使って適切な URL を取得する。リモートのアセットはプロトコルに影響されない URL で指定できる。例: //otherdomain.com/css/theirstyle.css

初期値： 空文字列

$deps

（array） （オプション） このスタイルシートが依存する他のスタイルシートのハンドル配列、つまり、このスタイルシートより前に読み込まれる必要があるスタイルシート。依存関係がない場合は空の配列を指定。

初期値： array()

$ver

（文字列|真偽値） （オプション） スタイルシートのバージョン番号を指定する文字列 (存在する場合) 。このパラメータはキャッシングに関わらず正しいバージョンがクライアントに送信されるようにするために使う。したがって、バージョン番号があってそれがスタイルシートに意味を持つ場合は含めるべきである。

初期値： false

$media

（文字列|真偽値） （オプション） スタイルシートが定義されているメディアを指定する文字列。例: 'all'、'screen'、'handheld'、'print'。有効な CSS-media-types の全容についてはこちらの一覧を参照。

初期値： 'all'

戻り値

(void) 

この関数は値を返しません。

用例

フックを使う

ひとつのアクションフックからスクリプトとスタイルを読み込む。

/**
 * スクリプトとスタイルを適切にエンキューする方法
 */
function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

プラグインの設定ページのみでスタイルシートを読み込む

   /*
    * この例は WordPress 2.6.3 以降で使えるが、
    * それより古いバージョンでも動く可能性もある。
    */
   add_action( 'admin_init', 'my_plugin_admin_init' );
   add_action( 'admin_menu', 'my_plugin_admin_menu' );
   
   function my_plugin_admin_init() {
       /* スタイルシートを登録 */
       wp_register_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
   }
   
   function my_plugin_admin_menu() {
       /* プラグインページを登録 */
       $page = add_submenu_page( 'edit.php', 
                                 __( 'My Plugin', 'myPlugin' ), 
                                 __( 'My Plugin', 'myPlugin' ),
                                 'administrator',
                                 __FILE__, 
                                 'my_plugin_manage_menu' );
  
       /* 登録した $page ハンドルをを使ってスタイルシートの読み込みをフック */
       add_action( 'admin_print_styles-' . $page, 'my_plugin_admin_styles' );
   }
   
   function my_plugin_admin_styles() {
       /*
        * プラグイン管理画面のみで呼び出される。スタイルシートをここでエンキュー
        */
       wp_enqueue_style( 'myPluginStylesheet' );
   }
   
   function my_plugin_manage_menu() {
       /* 管理画面での出力 */
   }

参考

• グローバルを使う: (WP_Styles/en) $wp_styles - WP_Styles::add() と WP_Styles::enqueue()　を参照。
• ヒント: print_r( $wp_styles );
• jQuery UI 機能を使う場合は、独自の CSS ファイルを用意する必要がある。WordPress コアには完全な jQuery UI テーマは含まれていない。

変更履歴

• 3.3: wp_enqueue_style() をページの中盤 (HTML body) で呼び出すことができるようになった。これにより、スタイルはフッターで読み込まれる。
• 2.1 で導入 (BackPress バージョン: r79) 。

ソースファイル

wp_enqueue_style() は wp-includes/functions.wp-styles.php にあります。

リソース

• WordPress で CSS、JavaScript ファイルを読み込む正しい方法

英語

• How to enqueue styles with proper conditional comments for IE
• How to enqueue your style so that it can be minified
• How to enqueue style with conditions
• Enqueue a stylesheet for login page and make it appear in head element
• How to disable scripts and styles
• WordPress スタイル登録ジェネレーター

関連項目

• エンキュー関数:
  • スクリプト:wp_register_script(),wp_deregister_script(), wp_enqueue_script(), wp_dequeue_script() /en, wp_script_is() /en, wp_localize_script(), wp_enqueue_media()
  • スタイル: wp_register_style(),wp_deregister_style() /en,wp_enqueue_style(),wp_dequeue_style(), wp_style_is() /en

• エンキューアクション:
  • フロントエンド: wp_enqueue_scripts /en, wp_print_scripts /en, wp_print_styles /en
  • 管理画面: admin_enqueue_scripts /en, admin_print_scripts / en, admin_print_styles /en
  • ログイン: login_enqueue_scripts /en

関数リファレンス、テンプレートタグ目次もご覧ください。

最新英語版: Reference / Functions / wp_enqueue_style()

最新英語版： WordPress Codex » Function_Reference/wp_enqueue_style （最新版との差分）