云策 WordPress 开发者社区

钩子文档

login_head

查看官方原文 ↗
💡 云策文档标注

概述

login_head 是一个 WordPress 动作钩子，在登录页面的头部脚本排队后触发，主要用于自定义登录页面的样式和内容。开发者可以利用此钩子添加自定义 CSS、替换 Logo 或执行其他前端修改。

关键要点

  • login_head 在登录页面头部触发，适用于添加自定义样式或脚本到 <head> 部分。
  • 通过 add_action('login_head', 'function_name') 调用自定义函数，实现登录页面的个性化定制。
  • 常见应用包括：添加自定义 CSS 文件、替换 WordPress 默认 Logo、验证登录表单字段等。
  • 与 login_headerurl 配合使用，可设置 Logo 链接的 URL。

代码示例

// 添加自定义 CSS 到登录页面
function childtheme_custom_login() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_stylesheet_directory_uri() . '/customlogin.css" />';
}
add_action('login_head', 'childtheme_custom_login');

// 替换登录页面 Logo
function my_custom_login_logo() {
    echo '<style type="text/css"> #login h1 a { background-image: url(' . get_stylesheet_directory_uri() . '/images/logo.png); } </style>';
}
add_action('login_head', 'my_custom_login_logo');

注意事项

  • login_head 不仅用于 Logo 替换，还可添加任意内容到登录页面的 <head> 部分。
  • 使用 get_stylesheet_directory_uri() 确保代码在子主题中正常工作。
  • 自定义 CSS 文件需放置在主题目录中，例如 customlogin.css。
📄 原文内容

Fires in the login page header after scripts are enqueued.

More Information

This filter can be used to add anything to the section on the login page.

You can customise the login form using login_head fairly easily.

Add the following code to functions.php in your theme:

// custom login for theme
function childtheme_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/customlogin.css" />';
}

add_action('login_head', 'childtheme_custom_login');

This has the effect of adding a reference to a stylesheet to your login form.

You will then need to add a stylesheet called customlogin.css to your theme directory.

For testing purposes, this should start you off:

html {
background-color: #f00;
}

This should produce a login background.

Here we replace the standard WordPress logo with our logo, taken from our theme (this uses get_stylesheet_directory_uri to work with child themes):

function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_stylesheet_directory_uri().'/images/login.png) !important;
height: 120px !important; width: 410px !important; margin-left: -40px;}
</style>';
}
add_action('login_head', 'my_custom_login_logo');

To set the URL of the login icon’s link, see login_headerurl

Source

do_action( 'login_head' );

View all references View on Trac View on GitHub

Used by Description
login_header()wp-login.php

Outputs the login page header.

Changelog

Version Description
2.1.0 Introduced.

User Contributed Notes

  1. Skip to note 2 content


    tarhe


    You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note

    More Information
    login_head handles authentication, registering, resetting passwords, forgot password,
    and other user handling.

    The login_head filter can be used to filter the logo image on the WordPress login page. By default this logo is of WordPress.

    Note: this is not the only possible use of this filter. It can be used to add anything to the section on the login page.

    Basic Examples
    Where “wpdocs_custom_function_name” is the function to be called when the content is being retrieved.

    add_filter( 'login_head', 'wpdocs_custom_function_name' );

    In the below example the default logo is changed to custom logo, using CSS.

    function wpdocs_my_custom_login_logo() {
    echo '<style type="text/css">
	h1 a { background-image: url(<a href="http://example.com/your-logo.png" rel="nofollow ugc">http://example.com/your-logo.png</a>) !important; margin: 0 auto; }
	</style>';
}
add_filter( 'login_head', 'wpdocs_my_custom_login_logo' );

    To validate the login details before user logins, you can use the below function:
    (p.s. At first, you may have inserted some extra fields using ‘login_form’ action hook.)

    function wpdocs_ref_access() {
    global $error;
    if ( empty( $_POST['custom_field_name'] ) ) {
        $error  = 'Restricted area, please login to continue.';
    }
}
add_action( 'login_head', 'wpdocs_ref_access' );