How to modify the WordPress login page?

How to replace the logo of WordPress with its own website logo and change its appearance to create a personalized login page?

First, add the following code to the end of the theme functions.php template file.

<? 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’);

> >

2. Create a new folder named custom_login in the theme used, and add custom_login.css and logo.png.

Third, add the following code to custom_login.css.

/ ** Background and font **/

Html, body. login{

Background: f2f2f2;

Font: 14px’Microsoft YaHei’, Arial, Lucida Grande, Tahoma, sans-serif;

}

/ ** Remove the underline of the link **/

HTML a{

Text-decoration: none;

}

/ ** Log on to DIV **/

#login {

Background:#fff;

Border: 1px solid #ccc;

Width: 400 px;

Margin: 40px auto 0;

Padding: 10px 10px 20px 10px;

Border-radius: 3px;

Box-shadow: 04px 10px-1px RGBA (200, 200, 200, 0.7);

}

/ ** Replace logo **/

.login H1 a{

Background: # FFF URL (logo. png) no-repeat center;

Width: 400 px;

}

/ ** Tips **/

Updated,.login.message{

Background:#fff;

Border: none;

Text-align: center;

}

/ ** Form**/

Login form{

Box-shadow: none;

Border: none;

}

# Loginform, registerform, lostpasswordform{

Background: transparent;

Border: none;

}

/ ** Button**/

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

Width: 60px;

Height: 30px;

Border-radius: 1px;

}

3. Modify the logo link address

Function custom_loginlogo_url ($url){

Return’https://defcon.cn’;

}

Add_filter (‘login_headerurl’,’custom_loginlogo_url’);

未经允许不得转载:996ICU » How to modify the WordPress login page?

赞 (0) 打赏