Menyesuaikan dan menggayakan borang yang dilindungi kata laluan di WordPress

Pelanggan baru -baru ini perlu menambah perlindungan kata laluan ke halaman WordPress mereka, yang tidak rumit dengan sendirinya. Walau bagaimanapun, mereka kemudian meminta untuk mengubah suai teks dan memperbaiki penampilan halaman. Saya dengan mudah menerima cabaran ini, dan inilah pelaksanaan saya.

bagaimana menyesuaikan halaman yang dilindungi kata laluan di WordPress

Langkah 1: Edit fail fungsi.php

Buka fail

anda dan tambahkan blok kod berikut: functions.php

<code class="language-php"><?php
add_filter( 'the_password_form', 'custom_password_form' );

function custom_password_form() {
    global $post;
    $label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );

    $o = '
' . __( "这是您新的密码提示文本，显示在密码表单上方" ) . '
<label for="' . $label . '">' . __( "密码：" ) . ' </label>
<input class="input password-input" id="' . $label . '" name="pwd" type="password" size="20">
<input type="submit" name="Submit" class="button" value="' . esc_attr__( " .>
<p class="extra-text">额外文本可以放在这里……这将显示在表单下方</p>

';

    return $o;
}
?></code>

izinkan saya menerangkannya dengan cepat. Kod perlindungan kata laluan dijana dari fail dalam folder

, dan anda mungkin mahu mengeditnya secara langsung. Walau bagaimanapun, ini tidak disyorkan kerana mengubah suai kod teras adalah idea yang buruk. Kenapa? Jika anda mengemas kini WordPress, semua perubahan akan dibersihkan. Oleh itu, adalah lebih baik untuk mengelakkan pendekatan ini untuk mencegah sebarang masalah yang berpotensi. Letakkan kod di atas dalam fail wp-includes dan anda boleh mengubahnya menggunakan sistem Hook WordPress supaya anda tidak perlu bimbang tentang kehilangan sebarang perubahan pada borang semasa mengemas kini WordPress. Seperti yang anda lihat, saya sebenarnya menambah kelas CSS ke bentuk itu sendiri, tag bentuk, medan kata laluan, dan butang. Sebaik sahaja semua elemen yang diperlukan ada, kita kini boleh gaya mereka menggunakan CSS. Bahagian yang terbaik ialah kita tidak akan membuat apa -apa perubahan pada folder functions.php, jadi kita tidak akan melanggar sebarang peraturan pengekodan WordPress standard.

wp-includes Langkah 2: Tukar Teks yang Dilindungi Kata Laluan Lalai

Teks yang dimodalkan di atas juga menunjukkan apa yang saya ubah, set pertama teks:

seperti yang anda lihat, ini adalah teks pengenalan anda, yang dulu seperti ini:

<code>这是您新的密码提示文本，显示在密码表单上方</code>

sekarang kita boleh mengubahnya ke teks apa sahaja yang anda mahukan. Anda juga boleh mengeluarkan segala -galanya di antara petikan tanpa menunjukkan apa -apa.

<code>此内容受密码保护。要查看它，请在下方输入您的密码：</code>

Langkah 3: Tukar Label Medan Input Kata Laluan

Label lalai yang dipaparkan di sebelah kiri medan input ialah kata laluan

. Anda boleh mengubahnya kepada apa sahaja yang anda mahukan. Dalam kes saya, saya memberikannya kelas CSS dan mengeluarkan tag menggunakan peraturan CSS berikut.

Kelas CSS yang sama juga boleh digunakan jika anda ingin menukar sifat lain.

<code class="language-css">.pass-label { display: none; }</code>

Langkah 4: Tetapkan gaya medan input kata laluan

Saya tidak suka penampilan lalai borang ini, tetapi saya boleh membuatnya kelihatan lebih moden kerana penambahan medan input kata laluan ini. Anda boleh menyesuaikannya dengan lebih lanjut mengikut pilihan anda.

Langkah 5: Tetapkan gaya butang hantar

Dalam kod fungsi, saya menambah kelas CSS ke butang Submit. Ini dilakukan kerana saya mahu semua butang di laman web klien kelihatan sama. Konsistensi laman web adalah kunci. Ini adalah CSS yang saya gunakan:

button

Langkah 6: Tambahkan teks tambahan di bawah borang

<code class="language-css">.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;
}</code>

Saya juga ingin menambah keterangan yang memberitahu pengguna bahawa medan kata laluan adalah sensitif kes. Untuk melakukan ini, saya hanya menambah kod perenggan di bawah borang dan memasukkan tag gaya untuk memohon gaya tersuai ke teks untuk membezakannya dari seluruh halaman.

Opsyen Tambahan

Di bahagian sebelumnya, kami membincangkan cara menyesuaikan halaman perlindungan kata laluan dari perspektif pemaju. Walau bagaimanapun, jika anda tidak digunakan untuk mengedit kod anda, anda juga boleh menggunakan alat lain untuk mencapai hasil yang sama.

Berikut adalah beberapa plugin atau tambahan yang anda boleh menyesuaikan borang yang dilindungi kata laluan di WordPress.

YellowPencil

Plugin YellowPencil adalah plugin WordPress yang menyediakan editor CSS visual yang kaya dengan ciri yang membolehkan anda menyesuaikan rupa laman web anda tanpa menulis sebarang kod. Ia menawarkan antara muka mesra pengguna dan pilihan penyesuaian yang luas.

siteorigin css

Plugin SiteOrigin CSS adalah plugin WordPress percuma yang membolehkan anda dengan mudah menyesuaikan rupa laman web anda dengan editor visual yang mudah. Ia menyediakan antara muka mesra pengguna yang membolehkan anda menukar CSS (Cascading Stylesheet) laman web anda tanpa menulis sebarang kod.

Dengan plugin ini, anda boleh dengan mudah melaksanakan gaya dan teks halaman yang dilindungi kata laluan tersuai tanpa mengubah kod secara langsung.

Atas ialah kandungan terperinci Menyesuaikan dan menggayakan borang yang dilindungi kata laluan di WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!