引用于 250 在 2018年1月29日, 23:42

不用插件也可以定制WordPress登陆注册页面，样式会存放在主题文件夹中，即使WordPress升级，也不会破坏定制好的样式。

方法概述

1. 通过钩子在登陆/注册页面引入自定义样式表，修改基本信息，这些在主题的functions.php中完成。

2. 在自定义样式表中写样式覆盖默认的样式，达到更改界面的目的。

编辑主题的functions.php

1. 增加自定义样式表

1 2 3 4

function custom_login() {     echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />'; } add_action('login_head', 'custom_login');

在主题目录下创建一个目录叫custom-login，在该目录下创建一个名为custom-login.css的文件，创建一个images文件夹存放图片。

2.更改logo的url，默认指向wordpress.org

1 2 3 4

function custom_headerurl( $url ) {     return get_bloginfo( 'url' ); } add_filter( 'login_headerurl', 'custom_headerurl' );

3.更改logo的title，默认是“Powered by WordPress”(基于WordPress)

1 2 3 4

function custom_headertitle ( $title ) {     return __( '欢迎来到Sola的博客' ); } add_filter('login_headertitle','custom_headertitle');

4.在登陆表单中添加信息.

1 2 3 4

function custom_login_message() {     echo '<p style="text-align:center">' . __('欢迎来到Sola的博客，请登录后下载本站资源'); } add_action('login_form', 'custom_login_message');

5.添加自定义HTML，例如增加版权信息

1 2 3 4

function custom_html() {     echo '<p class="copyright">&copy; ' . get_bloginfo(url); } add_action('login_footer', 'custom_html');

编辑custom-login.css

例如更改背景图片,在custom-login.css中添加如下内容

1 2 3

body.login{      background:url(images/bg.png) 0 0 no-repeat; }

更改logo图片

1 2 3

.login h1 a {     background:url(images/logo-login.png) no-repeat; }

使用文字作为logo

1 2 3 4 5

.login h1 a {    background:none;    text-indent:inherit;    display:inline; }

自定义登陆界面实例

效果如图所示

个性登陆界面设计