Question

我想自定义我的WordPress登录表单。我是WP的新手，严格遵循此处描述的程序：https://themetrust.com/build-custom-wordpress-login-page/。但我做了额外的小型定制：

require_once( explode( "wp-content" , __FILE__ )[0] . "wp-load.php" );

get_header(); ?>
<?php the_content(); ?>

<style>
.right{
position: absolute;
right: 532px;
width: 480px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
<?php
$args = array(
'echo'           => true,
'redirect'       => site_url( $_SERVER['REQUEST_URI'] ), 
'form_id'        => 'loginform',
'label_username' => 'Username',
'label_password' => 'Password',
'label_remember' => 'Remember Me',
'label_log_in'   => 'Log In',
'id_username'    => 'user_login',
'id_password'    => 'user_pass',
'id_remember'    => 'rememberme',
'id_submit'      => 'wp-submit',
'remember'       => true,
'value_username' => NULL,
'value_remember' => false 
);
?> 
 <div>
<table class = "right" bgcolor="#cccccc">
<tr>
 <td <p><a href="<?php  get_template_directory_uri() .'/page-not-
member.php'; ?>">Not member yet</a></p></td><td></td><td></td>
</tr>
<tr>
 <td colspan="2">Login:</td>
 </tr>
 <tr>
  <td> <?php wp_login_form( array('redirect' => home_url()) ); ?> </td>
 </tr>
<tr>
  <td colspan="2"><a href="<?php get_template_directory_uri() 
.'/zapomnij_formularz.php'; ?>">Forgot password?</a></td>
</tr>
</tr>
</table>
</div>

...我的登录页面如下： http://ipic.su/img/img7/fs/image1.1499330136.jpg

如何将页面格式化（登录/密码输入字段对齐）：http://ipic.su/img/img7/fs/image2.1499330556.jpg？

Thank you in advance.

Answer 1

你可以使用css.Below css是登录表单css。

以下是登录页面的一些有用的，高度特异性的CSS选择器：

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

对你而言我认为需要thione css

body.login div#login form#loginform input#user_pass {}

希望这有助于你

如何对齐登录表单wp_login_form（）

1 个答案: