用wordpress登录界面

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

你好，方法如下如果你看腻了Wordpress默认登录界面，或者想将Wordpress的logo替换为自己网站logo，并改变其外观，可以参考此文，打造一个个性化的登录页面。

一、将下面代码加到主题functions.php模版文件的最后。<？php function="" custom_login()="" {="" echo="">'; } 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； }上面只罗列了登录界面几个基本要素的样式修改。

可以使用火狐扩展Firebug查看各部分DIV选择器名称进行详细修改。

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

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

echo ''; }

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;

}

3.如何自定义WordPress的登录页面

看腻了Wordpress默认登录界面，或者想将Wordpress的logo替换为自己网站logo，并改变其外观，可以参考此文，打造一个个性化的登录页面。

一、将下面代码加到主题functions.php模版文件的最后。<？php function="" custom_login()="" {="" echo="">'; } 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: 1px solid #ccc; width:400px; margin: 40px auto 0; padding: 10px 10px 20px 10px; border-radius:5px; box-shadow:0 4px 10px -1px rgba(200, 200, 200, 0.7)； } /** 替换logo **/ .login h1 a{ background: #fff url(logo.png) no-repeat center; 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； } 上面只罗列了登录界面几个基本要素的样式修改。

可以使用火狐扩展Firebug查看各部分DIV选择器名称进行详细修改。最终效果如图：同时还可参考登录页面默认样式文件：wordpress\wp-admin\css目录的wp-admin.min.css，进一步个性化登录页面，就看你的创意了！另外，也可以将下面代码添加到主题functions.php模版文件中，直接将样式写在其中。

function new_custom_login_logo() { echo '';}ps:HotNews主题早期版本集成了该功能，后来添加前台登录功能后就将其删除了。

4.如何自定义WordPress的登录页面

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

function my_custom_login_logo() {

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

h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo.png) !important; }

</style>';

}

add_action('login_head', 'my_custom_login_logo')；以上代码是定义登陆的页面的logo的，logo的位置位于主题根目录下的images目录下

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

add_filter('login_headerurl', create_function(false,"return get_bloginfo('url')；"））；将Logo的链接改为网站首页链接。如果想修改成其它链接，可以使用以下代码。

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

function custom_loginlogo_url($url) {

return '() {

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

}

add_action('login_footer', 'custom_html')；自定义CSS

//添加自定义CSS

function custom_login() {

echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/css/login_style.css" />';

}

add_action('login_head', 'custom_login')；上面的css代码路径为主题根目录下的css目录

5.如何修改WordPress的后台登录界面

自定义登陆界面，一般包含了3个方面：

1， 自定义logo；（默认是WordPress的logo）

2， 自定义logo指向的链接；（默认指向WordPress官网）

3， 背景图片；（默认没有背景图片）

如下代码，就是对以上3个方面的自定义，将代码加入functions.php文件即可。

以下代码，请根据自己的情况，调整各项参数。

/* 自定义登陆界面 */

add_filter('login_headerurl', create_function(false,'return "";' ));

add_filter('login_headertitle', create_function(false,'return "云上小悟，麦新杰的独立博客！"；')）；

function custom_loginlogo() {

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

div#login h1 a {

background-image: url("/wp-content/uploads/2014/11/baidutiebaqianmingtupian.png");

width:129px;

height:130px;

background-size:129px;130px;

}

.login {

background-image: url("/wp-content/uploads/2014/02/yunshang.jpg");

background-repeat:no-repeat;

-moz-background-size:100% 100%； /* 老版本的 Firefox */

background-size:100% 100%;

padding:24px;

}

</style>';

}

add_action('login_head', 'custom_loginlogo');

本题答案来自云上小悟独立博客，原文链接：/wangzhan/zidingyidenglujiemian-4378

6.怎么找到wordpress的后台登陆界面

方法1：直接修改安装目录下的wp-login.php文件

if ( is_multisite() ) {

$login_header_url = network_home_url();

$login_header_title = $current_site->site_name;

} else {

$login_header_url = __( 'http://wordpress.org/' );

$login_header_title = __( 'Powered by WordPress' );

}

如果没有开启多站点功能的话，那么链接地址及其标题提示就是WordPress的内容；否则，就是网络站点的地址与站点名称。把else里面的内容修改即可。

方法2：修改自己的主题中的functions.php文件（一劳永逸的方法，推荐）

1、修改Logo上的链接

在functions.php中添加代码：

add_filter('login_headerurl', create_function(false,"return get_bloginfo( 'siteurl' );"));

2、修改Logo上的提示文字

在functions.php中添加如下代码：

add_filter('login_headertitle', create_function(false,"return get_bloginfo( 'description' );"));

3、修改由CSS控制显示的链接图片

在functions.php中添加如下代码：

add_action('login_head', 'my_custom_login_logo');

function my_custom_login_logo() {

echo '

h1 a { background-image:url('.get_bloginfo('template_directory').'/images/wordpress-logo.png) !important; }

';

}

然后在你的主题文件夹下的images文件夹中放置自己的LOGO 图片wordpress-logo.png。

转载请注明出处51数据库 » 用wordpress登录界面