【WP美化】不用插件定制WordPress登陆注册页面

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

方法概述

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

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

编辑主题的functions.php

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

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

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

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

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

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

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

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

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

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

编辑custom-login.css

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

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

更改logo图片:

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

使用文字作为logo:

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

自定义登陆界面实例

效果如图所示:

图片[1]-【WP美化】不用插件定制WordPress登陆注册页面-七木云

个性登陆界面设计

效果如图所示:

图片[2]-【WP美化】不用插件定制WordPress登陆注册页面-七木云
图片[3]-【WP美化】不用插件定制WordPress登陆注册页面-七木云
图片[4]-【WP美化】不用插件定制WordPress登陆注册页面-七木云
图片[5]-【WP美化】不用插件定制WordPress登陆注册页面-七木云
图片[2]-【WP美化】不用插件定制WordPress登陆注册页面-七木云

以上来自:https://www.solagirl.net/custom-wordpress-login-without-plugins.html

温馨提示:本文最后更新于2020-03-05 21:41:11,某些文章具有时效性,若有错误或已失效,请在下方留言或联系站长
------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容