• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

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

提供: WordPress Codex 日本語版
< 関数リファレンス
2014年8月27日 (水) 06:58時点におけるNao (トーク | 投稿記録)による版 (最新版に更新、和訳完了。)

(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先: 案内検索

説明

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
初期値: false
$deps
array) (オプション) このスタイルシートが依存する他のスタイルシートのハンドル配列、つまり、このスタイルシートより前に読み込まれる必要があるスタイルシート。依存関係がない場合は false。
初期値: 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 Codex » Function_Reference/wp_enqueue_style最新版との差分