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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(パラメータ)
(改めて en:Function Reference/wp_register_style 01:22, 18 August 2016 Tareiking 版を流し込み。)
1行目: 1行目:
{{NeedTrans|一部}}
+
{{NeedTrans}}
  
== 説明 ==
+
== Description ==
  
WordPress の生成するページへ CSS スタイルを安全に追加もしくはキューに加えます。[[Function_Reference/wp_register_style|wp_register_style()]] で先に登録されていればこのハンドルで追加できます。
+
A safe way to register a CSS style file for later use with [[関数リファレンス/wp_enqueue_style|wp_enqueue_style()]].
  
== 使い方 ==
+
== Usage ==
  
  wp_enqueue_style( $handle, $src, $deps, $ver, $media );
+
  <?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>
  
== パラメータ ==
+
<strong>Use the [[プラグイン API/アクションフック一覧/wp_enqueue_scripts|<code>wp_enqueue_scripts</code>]] /[[:en:Plugin API/Action Reference/wp_enqueue_scripts|en]] action to call this function.</strong> Calling it outside of an action can lead to problems. See [http://core.trac.wordpress.org/ticket/17916 #17916] for details.
  
{{Parameter|$handle|文字列|スタイルシートのハンドルとして使用される名前。 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.}}
+
== Parameters ==
  
{{Parameter|$src|文字列&#124;真偽型|スタイルシートのURL。 例: '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 [[関数リファレンス/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'.|オプション|false}}
+
{{Parameter|$handle|string|Name of the stylesheet (which should be unique as it is used to identify the script in the whole system).}}
  
{{Parameter|$deps|array|このスタイルシートが依存するスタイルシートのハンドルの配列。; このスタイルシートの前にロードされる必要があるスタイルシート。依存関係が存在しない場合はfalse。|オプション|array()}}
+
{{Parameter|$src|string|URL to the stylesheet. Example: <nowiki>'http://example.com/css/mystyle.css'</nowiki>. You should never hardcode URLs to local styles, use <tt>[[関数リファレンス/plugins_url | plugins_url()]]</tt> (for Plugins) and <tt>[[関数リファレンス/get_template_directory_uri | get_template_directory_uri()]]</tt> (for Themes) to get a proper URL.  Remote assets can be specified with a protocol-agnostic URL, i.e. '//otherdomain.com/css/theirstyle.css'.}}
  
{{Parameter|$ver|文字列&#124;真偽型|付いている場合、スタイルシートのバージョン番号を指定する文字列。 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.|オプション|false}}
+
{{Parameter|$deps|array|Array of handles of any stylesheets that this stylesheet depends on. Dependent stylesheets will be loaded before this stylesheet.|optional|array()}}
  
{{Parameter|$media|文字列&#124;真偽型|このスタイルシートが定義されているメディアを指定する文字列。 例: '<tt>all</tt>', '<tt>screen</tt>', '<tt>handheld</tt>', '<tt>print</tt>'。
+
{{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. The version is appended to the stylesheet URL as a query string, such as  <tt>?ver&#61;3.5.1</tt>. By default, or if <tt>false</tt>, the WordPress version string is used. If <tt>null</tt> nothing is appended to the URL.|optional|false}}
参照:[http://www.w3.org/TR/CSS2/media.html#media-types list] for the full range of valid CSS-media-types.|オプション|'all'}}
+
  
== 戻り値 ==
+
{{Parameter|$media|string|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'}}
  
; (void) : この関数は値を返しません。
+
== Return Values ==
  
== 用例 ==
+
; (bool): Whether the style has been registered. True on success, false on failure.
<!-- Need creative examples. Feel free to link to external examples. -->
+
  
=== フックの使用 ===
+
== Examples ==
 +
 
 +
=== In a Plugin (outside a PHP class) ===
  
 
<pre>
 
<pre>
<?php
+
// Register style sheet.
    /**
+
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
    * Register with hook 'wp_enqueue_scripts', which can be used for front end CSS and JavaScript
+
    */
+
    add_action( 'wp_enqueue_scripts', 'prefix_add_my_stylesheet' );
+
  
    /**
+
/**
    * Enqueue plugin style-file
+
* Register style sheet.
    */
+
*/
    function prefix_add_my_stylesheet() {
+
function register_plugin_styles() {
        // Respects SSL, Style.css is relative to the current file
+
wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
        wp_register_style( 'prefix-style', plugins_url('style.css', __FILE__) );
+
wp_enqueue_style( 'my-plugin' );
        wp_enqueue_style( 'prefix-style' );
+
}
    }
+
?>
+
 
</pre>
 
</pre>
  
=== プラグインのオプションページでのみCSSを読み込む ===
+
* Assumes the Plugin directory is named 'my-plugin'.
 +
* Assumes the Plugin style sheet is named 'plugin.css'.
  
    /*
+
=== In a Plugin (inside a PHP class) ===
    * This example will work at least on WordPress 2.6.3,
+
    * but maybe on older versions too.
+
    */
+
    add_action( 'admin_init', 'my_plugin_admin_init' );
+
    add_action( 'admin_menu', 'my_plugin_admin_menu' );
+
   
+
    function my_plugin_admin_init() {
+
        /* Register our stylesheet. */
+
        wp_register_style( 'myPluginStylesheet', plugins_url('stylesheet.css', __FILE__) );
+
    }
+
   
+
    function my_plugin_admin_menu() {
+
        /* Register our plugin page */
+
        $page = add_submenu_page( 'edit.php',
+
                                  __( 'My Plugin', 'myPlugin' ),
+
                                  __( 'My Plugin', 'myPlugin' ),
+
                                  'administrator',
+
                                  __FILE__,
+
                                  'my_plugin_manage_menu' );
+
 
+
        /* Using registered $page handle to hook stylesheet loading */
+
        add_action( 'admin_print_styles-' . $page, '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' );
+
    }
+
   
+
    function my_plugin_manage_menu() {
+
        /* Output our admin page */
+
    }
+
  
=== WordPress テーマでCSSを読み込む  ===
 
 
<pre>
 
<pre>
function theme_styles() 
+
class my_plugin {
{  
+
  // Register the style like this for a theme: 
+
  // (First the unique name for the style (custom-style) then the src,
+
  // then dependencies and ver no. and media type)
+
  wp_register_style( 'custom-style',
+
    get_template_directory_uri() . '/css/custom-style.css',
+
    array(),
+
    '20120208',
+
    'all' );
+
  
  // enqueing:
+
/**
  wp_enqueue_style( 'custom-style' );
+
* @TODO Add class constructor description.
 +
*/
 +
function __construct() {
 +
// Register style sheet.
 +
add_action( 'wp_enqueue_scripts', array( $this, 'register_plugin_styles' ) );
 +
}
 +
 
 +
/**
 +
* Register and enqueue style sheet.
 +
*/
 +
public function register_plugin_styles() {
 +
wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
 +
wp_enqueue_style( 'my-plugin' );
 +
}
 
}
 
}
add_action('wp_enqueue_scripts', 'theme_styles');
 
 
</pre>
 
</pre>
 +
* Assumes the Plugin class name is 'my_plugin'.
 +
* Assumes the Plugin directory is named 'my-plugin'.
 +
* Assumes the Plugin style sheet is named 'plugin.css'.
  
== ==
+
== 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>.
+
* Tip: <tt>print_r( $wp_styles );</tt>
+
* If you are going to use some [[関数リファレンス/wp_enqueue_script#Default_Scripts_Included_and_Registered_by_WordPress |jQuery UI features]] 独自のCSSファイルを提供する必要がある場合があります: WordPressのコアが完全なjQueryUIのテーマを持っていません!
+
  
 +
* Uses global: (<tt>[[クラスリファレンス/WP_Styles |WP_Styles]] /[[:en:Class_Reference/WP_Styles|en]] object</tt>) <tt>$wp_styles</tt>
 +
* See <tt>wp_default_styles()</tt> in {{Trac|wp-includes/script-loader.php|{{CurrentVersion}}|605}} for a complete list of styles WordPress registers by default.
  
== 更新履歴 ==
+
== Change Log ==
  
* [[Version 2.1|2.1]]:新規導入 (BackPress バージョン: r79)
+
* Since: [[Version 2.1|2.1]] (BackPress version: r79)
* [[Version 3.3|3.3]]: <tt>wp_enqueue_style()</tt> は(HTMLのbodyの内側にある)mid-pageを呼び出すことができます。これはフッターのスタイルをロードします。
+
  
 +
== Source File ==
  
== ソースファイル ==
+
<tt>wp_register_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://generatewp.com/register_style/ WordPress Style Registration Generator]
== 外部リソース ==
+
 
+
* [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://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://justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles How to disable scripts and styles]
+
 
+
* [http://www.youngflavor.net/2013/04/373/ wp_register_scriptとwp_register_styleの使い方] www.youngflavor.net
+
 
+
== 関連 ==
+
  
 +
== Related ==
 
{{Enqueue Functions Related}}
 
{{Enqueue Functions Related}}
  
 
{{Tag Footer}}
 
{{Tag Footer}}
  
{{原文|Function Reference/wp_enqueue_style|143752}}<!-- 15:35, 23 May 2014‎ Jdgrimes  版 -->
+
{{原文|Function Reference/wp register style|158096}} <!-- 01:22, 18 August 2016 Tareiking 版 -->
 +
 
 +
最新英語版: [https://developer.wordpress.org/reference/functions/wp_register_style/ Reference / Functions / wp_register_style()]
  
 +
{{DEFAULTSORT:Wp_register_style}}
 
[[Category:関数]]
 
[[Category:関数]]
  
[[en:Function_Reference/wp_enqueue_style]]
+
[[en:Function Reference/wp_register_style]]
[[ru:Справочник_по_функциям/wp_enqueue_style]]
+

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

このページ「関数リファレンス/wp register style」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

Description

A safe way to register a CSS style file for later use with wp_enqueue_style().

Usage

<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>

Use the wp_enqueue_scripts /en action to call this function. Calling it outside of an action can lead to problems. See #17916 for details.

Parameters

$handle
string) (必須) Name of the stylesheet (which should be unique as it is used to identify the script in the whole system).
初期値: なし
$src
string) (必須) URL to the stylesheet. Example: 'http://example.com/css/mystyle.css'. You should never hardcode URLs to local styles, use plugins_url() (for Plugins) and 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'.
初期値: なし
$deps
array) (optional) Array of handles of any stylesheets that this stylesheet depends on. Dependent stylesheets will be loaded before this stylesheet.
初期値: array()
$ver
string|boolean) (optional) 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. The version is appended to the stylesheet URL as a query string, such as ?ver=3.5.1. By default, or if false, the WordPress version string is used. If null nothing is appended to the URL.
初期値: false
$media
string) (optional) String specifying the media for which this stylesheet has been defined. Examples: 'all', 'screen', 'handheld', 'print'. See this list for the full range of valid CSS-media-types.
初期値: 'all'

Return Values

(bool)
Whether the style has been registered. True on success, false on failure.

Examples

In a Plugin (outside a PHP class)

// Register style sheet.
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );

/**
 * Register style sheet.
 */
function register_plugin_styles() {
	wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
	wp_enqueue_style( 'my-plugin' );
}
  • Assumes the Plugin directory is named 'my-plugin'.
  • Assumes the Plugin style sheet is named 'plugin.css'.

In a Plugin (inside a PHP class)

class my_plugin {

	/**
	 * @TODO Add class constructor description.
	 */
	function __construct() {
		// Register style sheet.
		add_action( 'wp_enqueue_scripts', array( $this, 'register_plugin_styles' ) );
	}

	/**
	 * Register and enqueue style sheet.
	 */
	public function register_plugin_styles() {
		wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
		wp_enqueue_style( 'my-plugin' );
	}
}
  • Assumes the Plugin class name is 'my_plugin'.
  • Assumes the Plugin directory is named 'my-plugin'.
  • Assumes the Plugin style sheet is named 'plugin.css'.

Notes

Change Log

  • Since: 2.1 (BackPress version: r79)

Source File

wp_register_style() is located in wp-includes/functions.wp-styles.php.

Resources

Related




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


最新英語版: WordPress Codex » Function Reference/wp register style最新版との差分

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