Example tutorial on making a personalized WordPress login interface, wordpress example tutorial_PHP tutorial

An example tutorial on making a personalized WordPress login interface, wordpress example tutorial

There are two ways to personalize the login interface. The first is to replace the login background, which is considered a small one. Personalize it:

Find the two pictures login-bkg-tile.gif and login-bkg-bottom_new.gif in /wp-admin/images, and replace them with your own customized pictures (preferably the same size).

Of course, this cannot change the layout of the login box, which is obviously not enough for Virgos who pursue perfection, so the second method appears:

First add a function in functions.php:

// custom login for theme
// folder themes/theme_name/custom-login/
function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login.css" />';
}
add_action('login_head', 'custom_login');

With a simple "hook", your theme can now enable a personalized login interface. The next thing to do is to write a css style for your login interface, name it custom-login.css, and then Just put the css file into the theme folder.

The following is the css of this site for your reference (since my custom-login.css is placed in a sub-file of the theme folder, the url in the background should be written like../images/login-bg- In the form of body.jpg, people familiar with MCS will know that ".." represents the upper level directory)

/* 页面css */
html,body,#wpbody,.form-table .pre{background: #ffffff url("../images/login-bg-body.jpg");? font-size: 13px; font-family: 微软雅黑,宋体;}
a{text-decoration: none;}
body.login,body{border: none;}
h1 a{display: none;}

/* 登陆框主体部分css */
#login{background: url("../images/login-bg.jpg") no-repeat;? width: 650px;? height: 500px;? position: relative; margin: 50px auto;}
#loginform {padding-left: 110px;? float: right;? border-left: 2px solid #e3e3d3}
#loginform #user_login , #loginform #user_pass {border: 2px dotted #666666}
form{width: 280px;? height: 166px;? padding: 45px 0px 0px 0px;? background: url() no-repeat; margin: 60px 0 0 0; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
#user_pass,#user_login,#user_email{width: 190px; height: 20px; margin-bottom: 10px;}

/* 登陆框各组成css */
label {font-size: 13px; color: #fff;}
form .forgetmenot label {font-size: 13px;? color: #666666;}
.login #nav a{color: #666666 !important;}
input.button-primary, button.button-primary, a.button-primary{background: none; border: none; text-shadow: none; margin: 0; padding: 0; font-size: 13px; font-family: 微软雅黑,宋体;}
form .submit input {color: #666666;}
input.button-primary: active, button.button-primary: active, a.button-primary: active {background: none;}

/* 其他 */
#nav{margin: 0; padding: 0; position: absolute; text-shadow: none;}

Send renderings

After seeing the effect, you will find that although we cannot change the html elements of the page, the entire login page including the login box structure can be customized, as long as you know the css selector name of each part. So as long as you use firebug and other tools to check the ids or classes of all css, you can create a login interface that is completely your own.

http://www.bkjia.com/PHPjc/1133115.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1133115.htmlTechArticleAn example tutorial on making a personalized WordPress login interface. WordPress example tutorial There are two ways to personalize the login interface. The first is to replace the login background. This is considered a small personalization...