1.如何在wordpress首页自己添加一个登录页面
你好,方法如下如果你看腻了Wordpress默认登录界面,或者想将Wordpress的logo替换为自己网站logo,并改变其外观,可以参考此文,打造一个个性化的登录页面。
一、将下面代码加到主题functions.php模版文件的最后。<?php function="" custom_login()="" {="" echo="">?php>'; } 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="">?php>'; } 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登录界面