ログインページのスタイルシートをエンキューし、head要素に表示する


10

ログインページのスタイルをテーマに設定します。非常に簡単:

add_action( 'login_enqueue_scripts', function()
{
    wp_enqueue_style( 'TEST', get_template_directory_uri() . '/css/login.css' );
});

残念ながら、期待どおりに動作しません。link要素がに表示されてbody非常に遅く、ログインページの。

レンダリングされた出力:

<link rel='stylesheet' id='TEST-css'  href='http://themes.wp/t5-theme-base/css/login.css?ver=3.9-alpha' type='text/css' media='all' />
<div class="clear"></div>
</body>
</html>

これは間違っていheadます。リンク要素をどのように印刷できますか?

回答:


26

すべてのenqueueアクションには、対応するprint_stylesアクションがあります。

  • wp_enqueue_scriptswp_print_styles
  • admin_enqueue_scriptsadmin_print_styles
  • customize_controls_enqueue_scriptscustomize_controls_print_styles

ログインページ用ではありません。login_print_stylesアクションや関数がないため、スタイルシートはに表示されdo_action( 'login_footer' );ます。

しかし、簡単な修正があります:

if ( ! has_action( 'login_enqueue_scripts', 'wp_print_styles' ) )
    add_action( 'login_enqueue_scripts', 'wp_print_styles', 11 );

WordPressはlink、そのページに登録されているすべての要素headを、組み込みのスタイルシートの直後の適切な場所にある要素に印刷します。

結果:

<link rel='stylesheet' id='dashicons-css'  href='http://git.wp/wp-includes/css/dashicons.min.css?ver=3.9-alpha' type='text/css' media='all' />
<link rel='stylesheet' id='wp-admin-css'  href='http://git.wp/wp-admin/css/wp-admin.min.css?ver=3.9-alpha' type='text/css' media='all' />
<link rel='stylesheet' id='buttons-css'  href='http://git.wp/wp-includes/css/buttons.min.css?ver=3.9-alpha' type='text/css' media='all' />
<link rel='stylesheet' id='colors-fresh-css'  href='http://git.wp/wp-admin/css/colors.min.css?ver=3.9-alpha' type='text/css' media='all' />
<!--[if lte IE 7]>
<link rel='stylesheet' id='ie-css'  href='http://git.wp/wp-admin/css/ie.min.css?ver=3.9-alpha' type='text/css' media='all' />
<![endif]-->
<link rel='stylesheet' id='TEST-css'  href='http://themes.wp/t5-theme-base/css/login.css?ver=3.9-alpha' type='text/css' media='all' />
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.