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

10

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.

Sortie rendue:

<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 de lien dans le head ?

    
posée fuxia 28.12.2013 - 14:22

1 réponse

26

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

  • wp_enqueue_scriptswp_print_styles
  • admin_enqueue_scriptsadmin_print_styles
  • customize_controls_enqueue_scriptscustomize_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 jeté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 imprimera désormais 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' />
    
réponse donnée fuxia 28.12.2013 - 14:22

Lire d'autres questions sur les étiquettes