如何在wordpress首页自己添加一个登录页面

一、将下面代码加到主题functions.php模版文件的最后。

<?php

function custom_login() {

echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/custom_login/custom_login.css" />'}

add_action('login_head', 'custom_login')

?>

二、在所用主题中新建一个名称为：custom_login 的文件夹，并在其中新建：custom_login.css及制作好的网站LOGO： logo.png也放进去。

三、将下面代码添加到custom_login.css中。

/** 背景及字体 **/

html,body.login{

background:#f2f2f2

font: 14px 'Microsoft YaHei', Arial, Lucida Grande, Tahoma, sans-serif

}

/** 去掉链接下划线 **/

html a{

text-decoration: none

}

/** 登录DIV **/

#login {

background:#fff

border: 1pxsolid#ccc

width:400px

margin: 40pxauto 0

padding: 10px10px20px10px

border-radius:5px

box-shadow:0 4px10px -1px rgba(200, 200, 200, 0.7)

}

/** 替换logo **/

.login h1 a{

background: #fffurl(logo.png) no-repeatcenter

width:400px

}

/** 提示 **/

.updated, .login .message {

background:#fff

border: none

text-align: center

}

/** 表单 **/

.login form {

box-shadow:none

border: none

}

#loginform, #registerform, #lostpasswordform{

background:transparent

border:none

}

/** 按钮 **/

.button-primary,.submit .button-primary,#login form .submit input {

width:83px

height:25px

font-weight: bold

border:none

}

1.设计一个引人注目的登录标志

默认的WordPress登录标志由尺寸为80*80的“WordPress”字符组成。现在你需要用你设计的标志来代替默认的，你应该事先将一个存储格式为.png 的标志图像保存到“登录”文件夹中，注意你的图片尺寸可以和默认的一样也可以自定义。然后你要在functiond.php文件的底部加上如下代码：

标志应该具有较强吸引力和较高的清晰度。此外，它最好和你的网站相关并且能告诉用户你的网站是一个怎样的网站。

2.改变标志图像的URL

如果你想要改变标志图像URL并让它不再链接到你的WordPress主页，你可以采取如下 *** 作。这里我们以zhuji91.com 为例，你需要使用如下示例代码去更换你的网站URL。

你也可以通过对上面的代码做一个小的改动来更改标题标签，具体代码如下：

3.定制一个独特的样式表

完成图像标志定制之后，你需要进行样式表的定制。首先，你要创建一个login_stlye.css 文件然后在一个你喜欢的编辑器中打开它 。现在在新建的文件中加入如下代码。

这些代码能够帮助你定制背景图片的尺寸和颜色，登录标签和登录表单。里面包含的参数仅供参考，你可以根据自己的需要进行更改。

事实上，为了让改动生效，你还要把下面的代码添加到functions.php文件中.

以下代码在主题文件 functions.php 中添加即可

1、自定义Logo图片

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

//自定义登录页面的LOGO图片

function my_custom_login_logo() {

    echo '<style type="text/css">

        .login h1 a {

            background-image:url("这里添加logo图片网址") !important

        height: 60px //修改为图片的高度

        width: 250px //修改为图标的宽度

        -webkit-background-size: 250px //修改为图标的宽度

        background-size: 250px //修改为图标的宽度

        }

    </style>'

}

add_action('login_head', 'my_custom_login_logo')

2、自定义Logo链接

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

//自定义登录页面的LOGO链接为首页链接

add_filter('login_headerurl', create_function(false,"return get_bloginfo('url')"))

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

//自定义登录界面LOGO链接为任意链接

function custom_loginlogo_url($url) {

return 'https://www.yuxing.pw' //修改URL地址

}

add_filter( 'login_headerurl', 'custom_loginlogo_url' ) 3、自定义Logo提示信息(tltle) //自定义登录页面LOGO提示为任意文本

function custom_loginlogo_desc($url) {

    return 'yuxing's blog //修改文本信息

}

add_filter( 'login_headertitle', 'custom_loginlogo_desc' )

4、自定义登录框内容

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

function custom_login_message() {

    echo '<p>欢迎来到'.get_bloginfo('name').'，请登录后下载本站资源</p><br />'

}

add_action('login_form', 'custom_login_message')

5、自定义底部内容

//自定义底部信息

function custom_html() {

    echo '<p style="text-align:center">© ' . get_bloginfo(url).'</p>'

}

add_action('login_footer', 'custom_html')

6、自定义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')

---