Coloque uma folha de estilo na página de login e faça com que ela apareça no elemento principal

10

Eu tento estilizar a página de login no meu tema. Muito simples:

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

Infelizmente, não funciona como esperado. O linkelemento aparece na bodypágina de login muito tarde.

Saída renderizada:

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

Isso está errado, como posso imprimir o elemento de link no head?

theme-development css login wp-enqueue-style fuxia
fonte

Respostas:

26

Para cada enqueueação, há uma print_stylesação correspondente :

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

Não é para a página de login. Não há login_print_stylesação ou função; portanto, suas folhas de estilo são descartadas do_action( 'login_footer' );.

Mas há uma correção simples:

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

O WordPress agora imprimirá todos os linkelementos registrados para essa página no local apropriado, o headelemento, logo após as folhas de estilo internas.

Resultado:

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