当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「関数リファレンス/wp enqueue style」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(利用方法)
(最新版に更新、和訳完了。)
1行目: 1行目:
{{Languages|
 
{{en|Function_Reference/wp_enqueue_style}}
 
{{ru|Справочник_по_функциям/wp_enqueue_style}}
 
}}
 
 
== 説明 ==
 
== 説明 ==
  
WordPress が生成したページに CSS スタイルファイルを安全に(キューに)追加します。[[Function_Reference/wp_register_style|wp_register_style()]] で最初に登録されていれば、そのハンドルを使って追加することができます。
+
WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。[[関数リファレンス/wp_register_style|wp_register_style()]] で最初に登録されていれば、そのハンドルを使って追加することができます。
  
 
== 利用方法 ==
 
== 利用方法 ==
11行目: 7行目:
 
<code><?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?></code>
 
<code><?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?></code>
  
== Parameters ==
+
== パラメータ ==
  
{{Parameter|$handle|string|Name used as a handle for the stylesheet. As a special case, if the string contains a '?' character, the preceding part of the string refers to the registered handle, and the succeeding part is appended to the URL as a query string.}}
+
{{Parameter|$handle|文字列|スタイルシートのハンドルとして使われる名称。特別なケースとして、文字列に '?' という記号が含まれている場合、それより前の部分は登録されたハンドルとして参照され、それより後の部分はクエリストリングとして URL に追加される。}}
  
{{Parameter|$src|string&#124;boolean|URL to the stylesheet. Example: 'http://example.com/css/mystyle.css'. This parameter is only required when WordPress does not already know about this style. You should never hardcode URLs to local styles, use [[Function Reference/plugins_url|plugins_url]] (for Plugins) and [[Function Reference/get_template_directory_uri|get_template_directory_uri]] (for Themes) to get a proper URL. Remote assets can be specified with a protocol-agnostic URL, i.e. '//otherdomain.com/css/theirstyle.css'.|optional|false}}
+
{{Parameter|$src|文字列&#124;ブーリアン|スタイルシートの URL。例: <code><nowiki>http://example.com/css/mystyle.css</nowiki></code>。このパラメータは WordPress がこのスタイルを認識していない場合のみに必要。ローカルのスタイルには URL を直接書き込むべきではない。代わりに [[関数リファレンス/plugins_url|plugins_url]] (プラグイン向け) [[関数リファレンス/get_template_directory_uri|get_template_directory_uri]] (テーマ向け) を使って適切な URL を取得する。リモートのアセットはプロトコルに影響されない URL で指定できる。例: <code>//otherdomain.com/css/theirstyle.css</code>|オプション|false}}
  
{{Parameter|$deps|array|Array of handles of any stylesheet that this stylesheet depends on; stylesheets that must be loaded before this stylesheet. false if there are no dependencies.|optional|array()}}
+
{{Parameter|$deps|array|このスタイルシートが依存する他のスタイルシートのハンドル配列、つまり、このスタイルシートより前に読み込まれる必要があるスタイルシート。依存関係がない場合は false。|オプション|array()}}
  
{{Parameter|$ver|string&#124;boolean|String specifying the stylesheet version number, if it has one. This parameter is used to ensure that the correct version is sent to the client regardless of caching, and so should be included if a version number is available and makes sense for the stylesheet.|optional|false}}
+
{{Parameter|$ver|文字列&#124;ブーリアン|スタイルシートのバージョン番号を指定する文字列 (存在する場合) 。このパラメータはキャッシングに関わらず正しいバージョンがクライアントに送信されるようにするために使う。したがって、バージョン番号があってそれがスタイルシートに意味を持つ場合は含めるべきである。|オプション|false}}
  
{{Parameter|$media|string&#124;boolean|String specifying the media for which this stylesheet has been defined. Examples: '<tt>all</tt>', '<tt>screen</tt>', '<tt>handheld</tt>', '<tt>print</tt>'. See this [http://www.w3.org/TR/CSS2/media.html#media-types list] for the full range of valid CSS-media-types.|optional|'all'}}
+
{{Parameter|$media|文字列&#124;ブーリアン|スタイルシートが定義されているメディアを指定する文字列。例: '<tt>all</tt>''<tt>screen</tt>''<tt>handheld</tt>''<tt>print</tt>'。有効な CSS-media-types の全容については[http://www.w3.org/TR/CSS2/media.html#media-types こちらの一覧]を参照。|オプション|'all'}}
  
== Return Values ==
+
== 戻り値 ==
  
; (void) : This function does not return a value.
+
; (void) : この関数は値を返しません。
  
== Examples ==
+
== ==
 
<!-- Need creative examples. Feel free to link to external examples. -->
 
<!-- Need creative examples. Feel free to link to external examples. -->
  
=== Using a Hook ===
+
=== フックを使う ===
  
Scripts and styles from a single action hook
+
ひとつのアクションフックからスクリプトとスタイルを読み込む。
  
 
<pre>
 
<pre>
 
/**
 
/**
  * Proper way to enqueue scripts and styles
+
  * スクリプトとスタイルを適切にエンキューする方法
 
  */
 
  */
 
function theme_name_scripts() {
 
function theme_name_scripts() {
46行目: 42行目:
 
</pre>
 
</pre>
  
=== Load stylesheet only on a plugin's options page ===
+
=== プラグインの設定ページのみでスタイルシートを読み込む ===
  
 
     /*
 
     /*
     * This example will work at least on WordPress 2.6.3,
+
     * この例は WordPress 2.6.3 以降で使えるが、
     * but maybe on older versions too.
+
     * それより古いバージョンでも動く可能性もある。
 
     */
 
     */
 
     add_action( 'admin_init', 'my_plugin_admin_init' );
 
     add_action( 'admin_init', 'my_plugin_admin_init' );
56行目: 52行目:
 
      
 
      
 
     function my_plugin_admin_init() {
 
     function my_plugin_admin_init() {
         /* Register our stylesheet. */
+
         /* スタイルシートを登録 */
 
         wp_register_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
 
         wp_register_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
 
     }
 
     }
 
      
 
      
 
     function my_plugin_admin_menu() {
 
     function my_plugin_admin_menu() {
         /* Register our plugin page */
+
         /* プラグインページを登録 */
 
         $page = add_submenu_page( 'edit.php',  
 
         $page = add_submenu_page( 'edit.php',  
 
                                   __( 'My Plugin', 'myPlugin' ),  
 
                                   __( 'My Plugin', 'myPlugin' ),  
69行目: 65行目:
 
                                   'my_plugin_manage_menu' );
 
                                   'my_plugin_manage_menu' );
 
    
 
    
         /* Using registered $page handle to hook stylesheet loading */
+
         /* 登録した $page ハンドルをを使ってスタイルシートの読み込みをフック */
 
         add_action( 'admin_print_styles-' . $page, 'my_plugin_admin_styles' );
 
         add_action( 'admin_print_styles-' . $page, 'my_plugin_admin_styles' );
 
     }
 
     }
75行目: 71行目:
 
     function my_plugin_admin_styles() {
 
     function my_plugin_admin_styles() {
 
         /*
 
         /*
         * It will be called only on your plugin admin page, enqueue our stylesheet here
+
         * プラグイン管理画面のみで呼び出される。スタイルシートをここでエンキュー
 
         */
 
         */
 
         wp_enqueue_style( 'myPluginStylesheet' );
 
         wp_enqueue_style( 'myPluginStylesheet' );
81行目: 77行目:
 
      
 
      
 
     function my_plugin_manage_menu() {
 
     function my_plugin_manage_menu() {
         /* Output our admin page */
+
         /* 管理画面での出力 */
 
     }
 
     }
  
== Notes ==
+
== ==
  
* Uses global: (<tt>[[Class_Reference/WP_Styles |WP_Styles]]</tt>) <tt>$wp_styles</tt> - See <tt>WP_Styles::add()</tt>, <tt>WP_Styles::enqueue()</tt>.
+
* グローバルを使う: (<tt>[[クラスリファレンス/WP_Styles |WP_Styles]]</tt>/[[:en:Class_Reference/WP_Styles|en]]) <tt>$wp_styles</tt> - <tt>WP_Styles::add()</tt> <tt>WP_Styles::enqueue()</tt> を参照。
* Tip: <tt>print_r( $wp_styles );</tt>
+
* ヒント: <tt>print_r( $wp_styles );</tt>
 +
* [[関数リファレンス/wp_enqueue_script#Default_Scripts_Included_and_Registered_by_WordPress |jQuery UI 機能]]を使う場合は、独自の CSS ファイルを用意する必要がある。WordPress コアには完全な jQuery UI テーマは含まれていない。
  
== Change Log ==
+
== 変更履歴 ==
  
* [[Version 3.3|3.3]]: <tt>wp_enqueue_style()</tt> can now be called mid-page (in the HTML body). This will load styles in the footer.
+
* [[Version 3.3|3.3]]: <tt>wp_enqueue_style()</tt> をページの中盤 (HTML body) で呼び出すことができるようになった。これにより、スタイルはフッターで読み込まれる。
* Since: [[Version 2.1|2.1]] (BackPress version: r79)
+
* [[Version 2.1|2.1]] で導入 (BackPress バージョン: r79)
  
== Source File ==
+
== ソースファイル ==
  
<tt>wp_enqueue_style()</tt> is located in {{Trac|wp-includes/functions.wp-styles.php}}.
+
<tt>wp_enqueue_style()</tt> {{Trac|wp-includes/functions.wp-styles.php}} にあります。
  
== Resources ==
+
== リソース ==
  
* [http://www.nkuttler.de/2010/07/28/wordpress-style-version-conditional-comments/ How to enqueue styles with proper versioning info and conditional comments for IE]
+
* [http://eastcoder.com/2014/07/proper-way-to-enqueue-scripts-and-styles-with-wordpress/ WordPress で CSS、JavaScript ファイルを読み込む正しい方法]
 +
 
 +
=== 英語 ===
 +
 
 +
* [https://gist.github.com/wpscholar/4947518 How to enqueue styles with proper conditional comments for IE]
 
* [http://www.nkuttler.de/post/minify-wordpress-theme-css/ How to enqueue your style so that it can be minified]
 
* [http://www.nkuttler.de/post/minify-wordpress-theme-css/ How to enqueue your style so that it can be minified]
 
* [http://wordpress.stackexchange.com/questions/89494/how-to-enqueue-the-style-using-wp-enqueue-style/89495 How to enqueue style with conditions]
 
* [http://wordpress.stackexchange.com/questions/89494/how-to-enqueue-the-style-using-wp-enqueue-style/89495 How to enqueue style with conditions]
 +
* [http://wordpress.stackexchange.com/questions/127835/enqueue-a-stylesheet-for-login-page-and-make-it-appear-in-head-element Enqueue a stylesheet for login page and make it appear in head element]
 
* [http://justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles How to disable scripts and styles]
 
* [http://justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles How to disable scripts and styles]
* [http://generatewp.com/register_style/ WordPress Style Registration Generator]
+
* [http://generatewp.com/register_style/ WordPress スタイル登録ジェネレーター]
  
== Related ==
+
== 関連 ==
  
 
{{Enqueue Functions Related}}
 
{{Enqueue Functions Related}}
112行目: 114行目:
 
{{Tag Footer}}
 
{{Tag Footer}}
  
[[Category:Functions]]
+
{{原文|Function_Reference/wp_enqueue_style|146135}}<!-- 2014-08-26T17:56:18 Nao 版 -->
 +
 
 +
[[Category:関数]]
 +
 
 +
[[en:Function_Reference/wp_enqueue_style]]
 +
[[ru:Справочник_по_функциям/wp_enqueue_style]]

2014年8月27日 (水) 06:58時点における版

説明

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最新版との差分