wordpress做登录 wordpress用户登录功能

WordPress教程:自定义登录界面网站模板元素

我们在平时使用wordpress的时候,有可能希望将登录页面开放给访客,那么就涉及到了wordpress主题页面定制,但传统方法的定义,改CSSJSPHP,往往意味着版本更新,就要重新来过,太繁琐,不过可以通过简短的方式实现。

创新互联专注于企业营销型网站建设、网站重做改版、图们网站定制设计、自适应品牌网站建设、H5开发商城网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为图们等各大城市提供网站开发制作服务。

自定义登录LOGO

将下面代码放在主题目录内的functions.php文件内即可,也可以自己定义一个插件放在里面

//自定义登录LOGO

function

custom_loginlogo()

{

$UAZOH_PLUGIN_URL

=

WP_PLUGIN_URL."/".dirname(plugin_basename(__FILE__));

echo'';

}

add_action('login_head',

'custom_loginlogo');

//自定义登录LOGO的超级链接

by

function

custom_loginlogo_url($url)

{

return

'';

}

add_filter(

'login_headerurl',

'custom_loginlogo_url'

);

自定义登录页面风格

将下面代码放在主题目录内的functions.php文件内即可,也可以自己定义一个插件放在里面,也可和上面的方法合并使用.

通过下面的定义登录背景色变成淡灰色,登录按钮变成深灰色。也可以自己再添加:hover等伪类修改悬停、点击等样式

//自定义登录页面风格

function

uazoh_custom_login_page()

{

echo'';

}

add_action('login_head',

'uazoh_custom_login_page');

自定义登录页面风格(图片轮换背景)

将下面代码放在主题目录内的functions.php文件内即可,也可以自己定义一个插件放在里面,也可和上面的方法合并使用.

使用到的的jQuery插件下载:

jquery.backstretch.min.js

需要在你主题下面建立一个login_page_bg文件夹,也可以修改下面var

imgsrc部分代码,改成自己的地址

//自定义登录页面风格(图片轮换背景)

function

uazoh_custom_login_page_imgbackground()

{

echo

'

';

}

add_action('login_head',

'uazoh_custom_login_page_imgbackground');

修改登录界面地址

将下面代码放在主题目录内的functions.php文件内即可,也可以自己定义一个插件放在里面

修改完成后,登录页的地址就是http://域名/wp-login.php?usr=Ga6ges2vo

,没有usr=Ga6ges2vo字段的登录地址就无法访问,会跳转到下面定义的地址

这个方法对于高手来说有很严重的漏洞

//修改登录界面地址

function

Uazoh_login_url_crk(){

$uel_f='usr';//等号前的内容

$uel_b='Ga6ges2vo';//等号后的内容

if($_GET{$uel_f}

!=

$uel_b)header('Location:

');//如果还用原来的登录地址,会自动跳转到博客首页

}

add_action('login_enqueue_scripts','Uazoh_login_url_crk');

如何创建一个自定义的WordPress登录页面

通过WordPress内置的挂钩(Hook),在主题的 functions.php 添加一些简单的代码,即可完成自定义修改,所有的操作都不需要修改WordPress核心文件,即使升级WordPress版本,也不会丢失效果。

自定义Logo图片

制作一个名为 login_logo.png 的图片,放在主题下的images文件夹里(也可以根据自己的实际修改,只要下面的代码引用的Logo地址正确即可)。

自定义Logo链接

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

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

自定义Logo提示信息(tltle)

自定义为网站名称:add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));

自定义为网站名称:add_filter('login_headertitle', create_function(false,"return get_bloginfo('name');"));

自定义为其他任何文本:

//自定义登录页面LOGO提示为任意文本

2.function custom_loginlogo_desc($url) {3

3 . return 'WordPress大学'; //修改文本信息5

4.add_filter( 'login_headertitle', 'custom_loginlogo_desc' );    //自定义登录页面LOGO提示为任意文本

自定义登录框内容

//在登录框添加额外的信息

function custom_login_message() {

echo 'p欢迎来到'.get_bloginfo('name').',请登录后下载本站资源/pbr /';

}

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的登录页面

实现的方法很简单就一段函数和一段CSS代码就搞定,改起来也不麻烦

第一步

把CSS追加到登陆页面,代码如下:

//自定义登录页面LOGO

function custom_login_logo() { echo 'link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/admstyle.css" type="text/css" /

div class="slogan"

h1nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;此页面仅提供给管理员作登录后台所用。

br※nbsp;如果你不是本站管理员,请速速离去。(你的IP网站后台已自动记录)/h1

/div';}

add_action('login_head', 'custom_login_logo');

将上面代码丢进模板函数里(functions.php),如果你的函数模板里面已经自定义过了,那就替换掉以前的,不然会报错哦!如果没有那就加到最后把。

第二步

新建一个CSS文件,把以下代码粘贴进去,重命名为:“admstyle.css”,然后传到主题根目录下。

body,textarea{font-size:14px;font-family:"Microsoft Yahei",宋体,PMingLiU,Verdana,Arial,Helvetica,sans-serif !important;}

input{font-size:14px;font-family:Tahoma,Arial,sans-serif !important;}

body{background:#92C1D1 url() fixed center top no-repeat !important;}

.login h1 a {background-image:url('images/logo.png') !important;background-size:120px;background-position:top center;

background-repeat:no-repeat;width:170px;margin:auto;margin-top:35px;height:35px;text-indent:-9999px;overflow:hidden;padding-bottom:15px;display:block;}

#login {

width:320px;

background:rgba(0, 0, 0, 0.2);

padding:0 20px 100% 12px;

margin:auto;

top:0px;

right:15%;

position:fixed;

box-shadow:0px 0px 5px 0px   #333;

}

.login form {

margin-left:8px;

padding:26px 24px 46px;

font-weight:normal;

background:rgba(255, 255, 255, 0.2);

border:none;

-moz-box-shadow:none;

-webkit-box-shadow:none;

box-shadow:#000 0 0px 10px -1px;}

#loginform {-webkit-border-radius:0px;border-radius:0px;}

.login form .input, .login input[type="text"] {

color:#555;

font-weight:200;

font-size:24px;

line-height:1;

width:100%;

padding:5px;

margin-top:2px;

margin-right:6px;

margin-bottom:16px;

border:1px solid #FFF;

background:#FFF !important;

outline:0;

-moz-box-shadow:none;

-webkit-box-shadow:none;

box-shadow:none;

}

.login form .input, .login input[type="text"] {

font-size:17px;

padding-bottom:11px;

padding-top:11px;

text-indent:3px; }

.login form .input, .login input[type="text"] {border:2px solid #DCE4EC;}

input.button-primary{

margin-top:8px;

border:#000;

font-weight:bold;

text-shadow:#FFF 0 0px 10px;}

.login .button-primary {

font-size:14px!important;

line-height:22px;

padding:8px 117px;

border-radius:0px;

}

input.button-primary {

background:rgba(255, 255, 255, 0.5);color:#000; }

input.button-primary:hover,input.button-primary:focus {

background:rgba(255, 255, 255, 0.8);color:#000; }

input.button-primary:active{

background:rgba(255, 255, 255, 0.2);color:#000; }

.login form .forgetmenot {

font-weight:normal;

float:none;

margin-top:-10px;

}

.login #nav, .login #backtoblog {text-shadow:#FFF 0 0 5px,#FFF 0 0 10px;float:right;margin:0 30px 0 0px;padding:16px 0px 0 20px;}

.login #nav  a, .login #backtoblog  a{color:#FFF!important;}

.login #nav  a:hover, .login #backtoblog  a:hover{color:#000!important;}

div.error, .login #login_error {display:none;}

div.updated, .login .message {background-color: #E0FFE1;border-color: #ACE655;}

.slogan {

padding-left: 420px;

padding-top: 65px;

}

.slogan h1 {

font-size: 18px;

line-height: 2em;font-family: 'PT Sans Narrow',"Microsoft YaHei", serif;font-weight:400;margin-left: -320px;

margin-top: 200px; 

}

好了,搞定!

参考资料 

纯新手,求助如何用wordpress做网页登录界面

主要的流程很简洁:你需要一个域名及一台云服务器。

利用镜像部署wordpress网站:

如果利用镜像部署的方法,首先要注意:部分境外地域暂不支持通过镜像市场创建云服务器,如果你选择的地域下没有看到“镜像市场”的选项,那就不能使用这个方法。在磐石云可以用这种方法搭建网站。

镜像部署操作步骤:

在磐石云购买云服务器时,选择如下“应用镜像”--“wordpress5.4.2”

可以一键部署轻量级应用,方便快捷,简单易用。


网页题目:wordpress做登录 wordpress用户登录功能
网站地址:http://pwwzsj.com/article/dohoscg.html