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

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

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

提供: WordPress Codex 日本語版
< 関数リファレンス
2018年6月7日 (木) 11:04時点におけるGblsm (トーク | 投稿記録)による版 (Code Rererence をマージ。)

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

説明

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 にあります。

リソース

英語

関連項目




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


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

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

「http://wpdocs.osdn.jp/wiki/index.php?title=関数リファレンス/wp_enqueue_style&oldid=13368」から取得