概要
wp_style_add_data関数は、WordPressにおけるCSSファイルにメタ情報を追加するための関数です。これにより、スタイルシートに特定のデータや情報を関連付けることができます。この機能は、テーマやプラグインの開発時に役立つことが多く、以下のような状況でよく使用されます。
- CSSファイルにバージョン情報を追加する。
- 特定のデバイスタイプ用のスタイルを追加する。
- ウェブフォントのプリロードを指示するためのメタデータを追加する。
- CSSの組み合わせや順序に関する情報を追加する。
- ブラウザ固有のプレフィックスを追加するためのデータを設定する。
- プラグインやテーマ間でのスタイルシートの依存性を明示化する。
- 特定のスタイルが適用される条件を設定する。
- CDNから配信されるCSSファイルにメタデータを追加する。
構文
wp_style_add_data( $handle, $prop, $value );
パラメータ
$handle(string) 必須: スタイルのハンドル名。$prop(string) 必須: 追加したいプロパティ（メタ情報）の名前。$value(mixed) 必須: プロパティに設定する値。
戻り値
- (bool) 成功した場合は true、失敗した場合は false。
関連する関数
使用可能なバージョン
wp_style_add_data関数は、WordPress 3.3.0以降で使用可能です。
コアファイルのパス
wp-includes/class.wp-scripts.php
この関数のアクションでの使用可能性
| アクション | 使用例 |
|---|---|
| mu_plugin_loaded | |
| registered_post_type | |
| plugins_loaded | |
| wp_roles_init | |
| setup_theme | |
| after_setup_theme | |
| set_current_user | |
| init | |
| register_sidebar | |
| wp_loaded | |
| send_headers | |
| parse_query | |
| pre_get_posts | |
| wp | |
| template_redirect | |
| get_header | |
| wp_head | 〇 |
非推奨又は削除されたバージョン
現在のところ、wp_style_add_data関数は特定のバージョンで非推奨または削除されていません。
サンプルコード
サンプル1: バージョン情報を追加する
function add_style_version() {
wp_enqueue_style( 'my-style', get_stylesheet_uri() );
wp_style_add_data( 'my-style', 'version', '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'add_style_version' );
このコードは、スタイルシートにバージョン情報を追加し、キャッシュ管理を助けます。
サンプル2: メディア条件を追加する
function add_media_condition() {
wp_enqueue_style( 'my-style', get_stylesheet_uri() );
wp_style_add_data( 'my-style', 'media', 'screen' );
}
add_action( 'wp_enqueue_scripts', 'add_media_condition' );
このコードは、my-styleスタイルシートにメディア条件を追加し、指定されたメディアでのみ適用されるようにします。
サンプル3: プリロード用のデータを追加する
function preload_fonts() {
wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Roboto' );
wp_style_add_data( 'google-fonts', 'preload', true );
}
add_action( 'wp_enqueue_scripts', 'preload_fonts' );
このコードは、Googleフォントのスタイルシートにプリロード情報を追加します。
サンプル4: 特定の条件を追加する
function add_custom_condition() {
wp_enqueue_style( 'my-style', get_stylesheet_uri() );
wp_style_add_data( 'my-style', 'conditional', 'ie' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_condition' );
このコードは、my-styleをIEブラウザ向けのスタイルとして条件付きで設定します。
サンプル5: CDNスタイルシートにメタデータを追加する
function add_cdn_style() {
wp_enqueue_style( 'cdn-style', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' );
wp_style_add_data( 'cdn-style', 'integrity', 'sha384-DyZvA5Dva2u97Wjc9T0tZIh5saYieF2evm1R/XD5anysDF1oM6GqlQ/Td2GBbH/wp' );
}
add_action( 'wp_enqueue_scripts', 'add_cdn_style' );
このコードは、CDNから読み込んだスタイルシートにセキュリティのための整合性チェック情報を追加します。