Tạo kiểu cho Biểu mẫu được bảo vệ bằng mật khẩu

Trong trường hợp bạn đã tạo được biểu mẫu bảo mật các trang WordPress – nhưng để đẹp hơn chúng ta có thể edit nó cho đẹp và phù hợp với trang web hơn.

Bước 1: Chỉnh sửa tệp functions.php của bạn

Được rồi, hãy mở tệp functions.php của bạn và thêm khối mã này:

 <?php
add_filter( 'the_password_form', 'custom_password_form' );
function custom_password_form() {
    global $post;
    $label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );
    $o = '<form class="protected-post-form" action="' . get_option('siteurl') . '/wp-pass.php" method="post">
    ' . __( "THIS IS YOUR NEW PASSWORD INTRO TEXT THAT SHOWS ABOVE THE PASSWORD FORM" ) . '
    <label class="pass-label" for="' . $label . '">' . __( "PASSWORD:" ) . ' </label><input name="post_password" id="' . $label . '" type="password" style="background: #ffffff; border:1px solid #999; color:#333333; padding:10px;" size="20" /><input type="submit" name="Submit" class="button" value="' . esc_attr__( "Submit" ) . '" />
    </form><p style="font-size:14px;margin:0px;">∗EXTRA TEXT CAN GO HERE...THIS WILL SHOW BELOW THE FORM</p>
    ';
    return $o;
}
?>

Bước 2: Thay đổi Văn bản Bảo vệ Mật khẩu Mặc định

 

Ví dụ bạn có thể thay đổi  đoạn:THIS IS YOUR NEW PASSWORD INTRO TEXT THAT SHOWS ABOVE THE PASSWORD FORM”

Thành một số văn bản content khác – hoặc nạn có thể tham khảo 1 số mẫu chủ đề ở đây:

https://codecanyon.net/category/mobile/ios?ec_promo=ca_app-templates-ios&ec_topic=code

https://elements.envato.com/fr/graphic-templates/app?ec_promo=ca_app-design-templates&ec_topic=code

https://codecanyon.net/category/php-scripts?ec_promo=ca_php-scripts&ec_topic=code

Bước 3: Thay đổi nhãn trường nhập mật khẩu

.pass-label { display: none; }

Bước 4 Tạo kiểu cho trường nhập mật khẩu

<input name=”post_password” id=”‘ . $label . ‘” type=”password” style=”background: #ffffff; border:1px solid #999; color:#333333; padding:10px;” size=”20″ />

Bước 5.Tạo kiểu cho nút gửi

.button {
background-color: #000;
color:#fff;
border: 0;
font-family: Impact, Arial, sans-serif;
margin: 0;
height: 33px;
padding: 0px 6px 6px 6px;
font-size: 15px;
cursor: pointer;
}

 

Ok vậy là đã xong-chúc các bạn thành công


Leave a Reply