asp登录页面跳转到注册页面_网站注册登录页面大美化！

教程旨在实现网站用户注册登录

分为两部分：邮箱设置、注册登录

使用三款插件：WP Mail SMTP

WP Open Social、Wechat Social

先看一下效果图

1、登录弹窗

2、注册页面

3、侧边栏工具

Wechat Social侧边栏小工具

一、邮箱配置

因为在WordPress自带的邮箱基本残废

我们需要自己配置SMTP(插件商店里很多)

这里使用WP Mail SMTP插件

其中QQ SMTP服务KEY获取

测试一下服务是否正常

顺便设置一个英文邮箱账号

参考资料：WordPress WP Mail SMTP配置qq邮箱

https://www.lijl888.com/archives/1387

提示：授权码拷贝到wp-config.php文件(没必要)

至此，我们可以使用WordPress自带功能，来实现用户邮箱注册

自带注册功能：通过发来的邮件内的链接，初始化登录密码

背景及透明效果用Login Designer插件

这样比较麻烦，用Wechat Social插件，密码直接在注册时设置

二、登录插件设置

插件基础版免费，商店搜wechat social

Wechat Social的邮件设置

这里可使用之前申请的密钥

开启登录/注册页模块

自动新增3个页面

自己访问看看效果

比如：注册页

Wechat Social登录界面美化我们后面讲，先说第三方登录。

Wechat Social提供第三方登录功能，但我不建议使用，因为用该功能后，在评论区用户的头像无法获取，一样的头像让人感觉索然无味。

建议使用免费的WP Open Social，功能介绍：

使用 QQ、微信、微博、百度、谷歌、微软、脸书、推特等社交平台实现一键登录和分享，还有更多平台和功能。模块化结构，按需扩展。

商店搜WP Open Social，排序第五左右

高级接口模块，可按需购买

https://www.xiaomac.com/

各种第三方接口的申请教程，可以参考

https://www.wpweixin.net/product/1067.html

插件设置

注意QQ的回调地址

提示：可申请的登录API

网站未备案：微博、百度

网站已备案：QQ、微博、百度

谷歌的API申请比较麻烦，貌似免费几个月，放弃之

微软的没试过，感兴趣可以尝试一下

我们要用的是登录功能

<?php echo open_social_login_html();?>

下面开始两个插件的融合

一、修改登录模块、按钮配色

原效果：

修改后：

验证码模块在设置中开启

要修改的文件的位置

wp-content/plugins/wechat-social-login/add-ons/login/templates/account/__login.php

原代码预览(38行)：

修改后的代码预览：

说明：1、替换登录模块

<?php  echo open_social_login_html();?>

2、修改按钮颜色

    .xh-regbox .xh-btn-primary {    color: #fff;    background-color: #0084ff;    border-color: #0072ff;}

二、删除快捷登陆、修改外观配色

原效果：

修改后：

logo在设置里弄

要修改的文件的位置

wp-content/plugins/wechat-social-login/add-ons/login/templates/account/register-content.php

1、删除快捷登陆代码块

要修改按钮颜色同上增加样式

2、增加背景图片API

        body{ overflow: hidden;height:100%;background:url('//api.yum6.cn/360img');background-size: cover; background-repeat:no-repeat;background-attachment:fixed; }

图片还适配手机端哦～

刷新页面，图片随机变换

3、修改透明度及增加圆角等

wp-content/plugins/wechat-social-login/assets/css/social.css

/*第68行 注册表单样式*/.xh-reglogo{padding:15px 0 0 0;margin:5px auto; text-align: center;}.xh-reglogo img{height: 80px;vertical-align: middle;text-align: center;}.xh-regbox{width: 400px;margin: 10px auto;background-color:rgba(255,255,255,0.3);border-radius: 5px;border:1px solid #eee;padding:10px 25px;font-family:  "Microsoft Yahei UI","Microsoft Yahei","Helvetica Neue",Helvetica,"Nimbus Sans L",Arial,"Liberation Sans","Hiragino Sans GB","Microsoft YaHei","Wenquanyi Micro Hei","WenQuanYi Zen Hei","ST Heiti",SimHei,"WenQuanYi Zen Hei Sharp",sans-serif;font-size: 0.875em;}.xh-regbox .xh-title{text-align: center;font-size:125%; }/*省略n行...*/.xh-regbox hr{    -moz-box-sizing:content-box;    box-sizing:content-box;    clear:both;    margin:5px auto;    border:0;    border-bottom:1px solid #eee;    height: 1px;}.xh-regbox label {    display: inline-block;    max-width: 100%;    margin-bottom: 5px;    font-weight: 700;    font-size: }.xh-regbox .form-control{    width: 100%;    height: 35px;    padding: 6px 12px;    background-color:rgba(255,255,255,0.5);    background-image: none;    border: 1px solid #ccc;    border-radius: 3px;    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);    -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}

主要是透明度修改，其他的是位置修改

.xh-regbox{...background-color:rgba(255,255,255,0.3);

测试注册登录一下，功能一切正常

如果觉得教程不错～

欢迎点赞、收藏、赞赏

—End—

封面图：by Campaign Creators on Unsplash

扩展阅读

技术松鼠 又拍云 + WordPress + 图床 喜欢就点一下在看呗！