自定义WordPress登入注册页面

本页另有英语版本。

聪头找到一个不用插件也能定制WordPress登入/注册页面的办法,在这里跟大家分享一下。

(原文及代码作者:Sola,刊于:http://www.solagirl.net/custom-wordpress-login-without-plugins.html。)

这个方法需要添加文件在主题文件夹里面,所以即使日后WordPress升级,也不会影响自定义的样式。

方法简介:

1. 通过钩子在登入/注册页面中引入自定义样式,修改基本信息。这些都是在主题中functions.php添加。

2. 默认的样式将会被自定义样式覆盖,这样就可以更改登入/注册页面了。

首先,编辑主题的functions.php:

1. 先在主题目录下创建一个名为“custom-login”的目录,在该目录下创建一个名为“custom-login.css”的文件,再创建一个“images”目录用来存放图片,例如背景和网站logo等。

2. 在主题的functions.php中增加如下函数:

2.1 增加加自定义样式:

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');

2.2 更改logo的url:(默认指向wordpress.org)

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

2.3 更改logo的title:(默认是“Powered by WordPress”(基于WordPress))

function custom_headertitle ( $title ) {
    return __( '欢迎光临聪头话斋' );
}
add_filter('login_headertitle','custom_headertitle');

2.4 在登入/注册页面的表单中添加欢迎信息.

function custom_login_message () {
    echo '
<p style="text-align:center">'.__('欢迎光临聪头话斋!').'

';
}
add_action('login_form','custom_login_message');

2.5 添加自定义HTML,例如增加版权信息

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

';
}
add_action('login_footer','custom_html');

然后,编辑custom-login.css

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

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

2. Logo

2.1 如果使用图片作logo:

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

2.2 如果使用文字作logo:

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

好了,到这里就大功造成了!函数和css样式都可按实际应用而更改。比如要用主题本来的背景做登入/注册页面的背景,也可以把相应的路径更改为实际而要的路径,此处不细述。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.

分类目录
树莓派小伙伴