- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細)
関数リファレンス/wp enqueue style
提供: WordPress Codex 日本語版
目次
説明
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
にあります。
リソース
英語
- 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 (最新版との差分)