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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(最新版に更新、和訳完了。)
(Code Rererence をマージ。)
 
1行目: 1行目:
== 説明 ==
+
== 説明<span id="Description"></span> ==
  
WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。[[関数リファレンス/wp_register_style|wp_register_style()]] で最初に登録されていれば、そのハンドルを使って追加することができます。
+
WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。[[関数リファレンス/wp_register_style|wp_register_style()]] で予め登録されていれば、そのハンドルを使って追加できます。
  
== 利用方法 ==
+
== 使い方<span id="Usage"></span> ==
  
<code><?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?></code>
+
<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
  
== パラメータ ==
+
== パラメータ<span id="Parameters"></span> ==
  
 
{{Parameter|$handle|文字列|スタイルシートのハンドルとして使われる名称。特別なケースとして、文字列に '?' という記号が含まれている場合、それより前の部分は登録されたハンドルとして参照され、それより後の部分はクエリストリングとして URL に追加される。}}
 
{{Parameter|$handle|文字列|スタイルシートのハンドルとして使われる名称。特別なケースとして、文字列に '?' という記号が含まれている場合、それより前の部分は登録されたハンドルとして参照され、それより後の部分はクエリストリングとして URL に追加される。}}
  
{{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|$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>|オプション|空文字列}}
  
{{Parameter|$deps|array|このスタイルシートが依存する他のスタイルシートのハンドル配列、つまり、このスタイルシートより前に読み込まれる必要があるスタイルシート。依存関係がない場合は false。|オプション|array()}}
+
{{Parameter|$deps|array|このスタイルシートが依存する他のスタイルシートのハンドル配列、つまり、このスタイルシートより前に読み込まれる必要があるスタイルシート。依存関係がない場合は空の配列を指定。|オプション|<tt>array()</tt>}}
  
{{Parameter|$ver|文字列&#124;ブーリアン|スタイルシートのバージョン番号を指定する文字列 (存在する場合) 。このパラメータはキャッシングに関わらず正しいバージョンがクライアントに送信されるようにするために使う。したがって、バージョン番号があってそれがスタイルシートに意味を持つ場合は含めるべきである。|オプション|false}}
+
{{Parameter|$ver|文字列&#124;真偽値|スタイルシートのバージョン番号を指定する文字列 (存在する場合) 。このパラメータはキャッシングに関わらず正しいバージョンがクライアントに送信されるようにするために使う。したがって、バージョン番号があってそれがスタイルシートに意味を持つ場合は含めるべきである。|オプション|false}}
  
{{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'}}
+
{{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 こちらの一覧]を参照。|オプション|<tt>'all'</tt>}}
  
== 戻り値 ==
+
== 戻り値<span id="Return_Values"></span> ==
  
 
; (void) : この関数は値を返しません。
 
; (void) : この関数は値を返しません。
  
== ==
+
== 用例<span id="Examples"></span> ==
 
<!-- Need creative examples. Feel free to link to external examples. -->
 
<!-- Need creative examples. Feel free to link to external examples. -->
  
80行目: 80行目:
 
     }
 
     }
  
== ==
+
== 参考<span id="Notes"></span> ==
  
 
* グローバルを使う: (<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> を参照。
 
* グローバルを使う: (<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> を参照。
86行目: 86行目:
 
* [[関数リファレンス/wp_enqueue_script#Default_Scripts_Included_and_Registered_by_WordPress |jQuery UI 機能]]を使う場合は、独自の CSS ファイルを用意する必要がある。WordPress コアには完全な jQuery UI テーマは含まれていない。
 
* [[関数リファレンス/wp_enqueue_script#Default_Scripts_Included_and_Registered_by_WordPress |jQuery UI 機能]]を使う場合は、独自の CSS ファイルを用意する必要がある。WordPress コアには完全な jQuery UI テーマは含まれていない。
  
== 変更履歴 ==
+
== 変更履歴<span id="Change_Log"></span> ==
  
 
* [[Version 3.3|3.3]]: <tt>wp_enqueue_style()</tt> をページの中盤 (HTML body) で呼び出すことができるようになった。これにより、スタイルはフッターで読み込まれる。
 
* [[Version 3.3|3.3]]: <tt>wp_enqueue_style()</tt> をページの中盤 (HTML body) で呼び出すことができるようになった。これにより、スタイルはフッターで読み込まれる。
 
* [[Version 2.1|2.1]] で導入 (BackPress バージョン: r79) 。
 
* [[Version 2.1|2.1]] で導入 (BackPress バージョン: r79) 。
  
== ソースファイル ==
+
== ソースファイル<span id="Source_File"></span> ==
  
 
<tt>wp_enqueue_style()</tt> は {{Trac|wp-includes/functions.wp-styles.php}} にあります。
 
<tt>wp_enqueue_style()</tt> は {{Trac|wp-includes/functions.wp-styles.php}} にあります。
108行目: 108行目:
 
* [http://generatewp.com/register_style/ WordPress スタイル登録ジェネレーター]
 
* [http://generatewp.com/register_style/ WordPress スタイル登録ジェネレーター]
  
== 関連 ==
+
== 関連項目<span id="Related"></span> ==
  
 
{{Enqueue Functions Related}}
 
{{Enqueue Functions Related}}
114行目: 114行目:
 
{{Tag Footer}}
 
{{Tag Footer}}
  
{{原文|Function_Reference/wp_enqueue_style|146135}}<!-- 2014-08-26T17:56:18 Nao 版 -->
+
最新英語版: [https://developer.wordpress.org/reference/functions/wp_enqueue_style/ Reference / Functions / wp_enqueue_style()]
 +
{{原文|Function_Reference/wp_enqueue_style|146135}} <!-- 2014-08-26T17:56:18 Nao 版 -->
  
 +
{{DEFAULTSORT:Wp_enqueue_style}}
 
[[Category:関数]]
 
[[Category:関数]]
  
 
[[en:Function_Reference/wp_enqueue_style]]
 
[[en:Function_Reference/wp_enqueue_style]]
 
[[ru:Справочник_по_функциям/wp_enqueue_style]]
 
[[ru:Справочник_по_функциям/wp_enqueue_style]]

2018年6月7日 (木) 11:04時点における最新版

説明

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