web-dev-qa-db-fra.com

Mettre une feuille de style en attente pour la page de connexion et la faire apparaître dans l'élément head

J'essaie de styliser la page de connexion dans mon thème. Très simple:

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

Malheureusement, cela ne fonctionne pas comme prévu. L'élément link apparaît très tard dans la body de la page de connexion.

Rendu rendu:

<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>

C'est faux, comment puis-je imprimer l'élément link dans la head?

theme-developmentcssloginwp-enqueue-style
10
fuxia

Pour chaque action enqueue, il existe une action print_styles correspondante:

  • wp_enqueue_scripts → wp_print_styles
  • admin_enqueue_scripts → admin_print_styles
  • customize_controls_enqueue_scripts → customize_controls_print_styles

Pas pour la page de connexion. Il n'y a pas d'action ni de fonction login_print_styles, vos feuilles de style sont donc rejetées sur do_action( 'login_footer' );.

Mais il existe une solution simple:

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

WordPress va maintenant imprimer tous les éléments link enregistrés pour cette page au bon endroit, l'élément head, juste après les feuilles de style intégrées.

Résultat:

<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' />
26
fuxia