「自学哈网」WordPress 自定义登录页面 LOGO、链接、文本、样式等-自学哈网

说真的，子凡其实感觉 WordPress 后台登录页面也是非常简单的了，但是对于一些把 WordPress 不仅仅是作为一个博客来使用的时候，那么问题就来了，登录页面就需要做自定义或者去修改并符合网站的整体风格了，所以子凡就在网上查询了一下解决方法。也算是做个记录分享吧！相信你通过本文如此详细的代码实例一定可以定制出更符合你心意的登录页面，同时这样也比你直接修改 WordPress 源文件方便，不同担心 WordPress 升级覆盖的问题了。

自定义 WordPress 登录界面 Logo

在主题目录 functions.php 中加入以下代码：

//自定义 WordPress 登录界面 Logo
function fanly_custom_login_logo() {
    echo \'<style type="text/css">
      h1 a { background-image:url(\'.get_bloginfo(\'template_directory\').\'/images/logo.png) !important; }
    </style>\';
}
add_action(\'login_head\', \'fanly_custom_login_logo\');

使用以上方法时子凡需要提醒一下：将需要替换的 Logo 图片放置到主题目录的 images/custom-login-logo.gif 下，默认 WordPress 的后台 logo 尺寸为 274px*63px。

删除 WordPress 登录界面 Logo

若想让后台登陆界面变得更加简洁，可以尝试着只留下输入框，删除 WordPress 登录界面 Logo。同样的方法在主题目录 functions.php 中加入以下代码：

//删除 WordPress 登录界面 Logo
function admin_bar_remove() {
    global $wp_admin_bar;
    /* Remove their stuff */
    $wp_admin_bar->remove_menu(\'wp-logo\');
}
add_action(\'wp_before_admin_bar_render\', \'admin_bar_remove\', 0);

自定义 Logo 链接

将 Logo 的链接改为网站首页链接：

1 2	//自定义登录页面的 LOGO 链接为首页链接 add_filter(\'login_headerurl\', create_function(false,"return get_bloginfo(\'url\');"));

将 Logo 的链接改为任意链接：

//自定义登录界面 LOGO 链接为任意链接
function custom_loginlogo_url($url) {
	return \'https://zhangzifan.com\'; //修改 URL 地址
}
add_filter( \'login_headerurl\', \'custom_loginlogo_url\' );

自定义 Logo 提示信息(tltle)

自定义为网站名称：

1 2	//自定义登录页面的 LOGO 提示为网站名称 add_filter(\'login_headertitle\', create_function(false,"return get_bloginfo(\'name\');"));

自定义为其他任何文本：

//自定义登录页面 LOGO 提示为任意文本
function custom_loginlogo_desc($url) {
    return \'泪雪博客\'; //修改文本信息
}
add_filter( \'login_headertitle\', \'custom_loginlogo_desc\' );

自定义登录框内容

//在登录框添加额外的信息
function custom_login_message() {
    echo \'<p>欢迎来到\'.get_bloginfo(\'name\').\'，请登录后继续操作</p><br />\';
}
add_action(\'login_form\', \'custom_login_message\');

自定义底部内容

//自定义底部信息
function custom_html() {
    echo \'<p style="text-align:center">© \' . get_bloginfo(url).\'</p>\';
}
add_action(\'login_footer\', \'custom_html\');

自定义 CSS

要更加灵活地修改登录页面的显示样式，建议添加一个自定义的 CSS 文件，然后查看登录页面的源代码的 html 结构，撰写自己的 CSS 样式。你可以使用下面的代码引入自己的 CSS，注意修改代码中的 css 地址，以下调用的是主题根目录下的 login_style.css：

//添加自定义 CSS
function custom_login() {
    echo \'<link rel="stylesheet" type="text/css" href="\' . get_bloginfo(\'template_directory\') . \'/login_style.css" />\';
}
add_action(\'login_head\', \'custom_login\');

其实到最后子凡还是觉得吧！以上代码可能会帮你更好的定制 WordPress 默认的后台登录页面，如果你是用 WordPress 做其它网站开发，或许你就不会使用 WordPress 默认的后台登录页面了，大家可以从上面的代码就可以看出来，定制这个页面对于不太懂代码的人来说是非常方便的，但是对于懂代码的人可能就单独是做登录页面了。

子凡就不多说了，到这里为止你已经可以完美的通过以上代码开始定制你的 WordPress 后台登录页面了。