Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development

Mengkustomisasi dan Menata Form yang Dilindungi Password

by
Length:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Baru-baru ini saya memiliki klien yang ingin salah satu halaman WordPress mereka terlindungi, tidak masalah! Lalu dia kembali dan berkata, bisakah Anda mengubah teksnya dan membuatnya terlihat lebih baik? Hmm... Pasti! Inilah caranya ...


Langkah 1 Edit file functions.php Anda

Baiklah, mari kita buka file functions.php Anda dan tambahkan blok kode ini:

Biarkan saya membedah ini sangat cepat untuk Anda. Kode proteksi password dihasilkan dari sebuah file di folder wp-includes. "Keren", Anda berpikir begitu, "Saya akan masuk ke sana dan membuat perubahan saya". Jangan lakukan itu! Sangat menggoda memang, mengedit kode inti adalah hal yang mengerikan, rendahan, bukan ide yang bagus. Untuk satu alasan: Apa yang terjadi jika Anda mengupdate WordPress? Itu akan dihapuskan ... maaf. Oke, jadi letakkan blok kode ini di file functions.php Anda, mari kita ubah dan tidak khawatir kehilangan perubahan pada form saat Anda memperbarui.

Seperti yang Anda lihat, saya benar-benar menambahkan kelas ke form itu sendiri, label form, field password serta tombolnya. Sekarang kita memiliki semua yang kita butuhkan untuk menata sepenuhnya dengan CSS. Oh, dan kami tidak benar-benar mengubah apapun di folder wp-includes, jadi kami tidak melanggar peraturan apa pun.


Langkah 2 Ganti Teks Default Perlindungan Password

Teks di huruf besar di atas juga menunjukkan kepada Anda apa yang saya ubah ... kumpulan teks pertama:

THIS IS YOUR NEW PASSWORD INTRO TEXT THAT SHOWS ABOVE THE PASSWORD FORM

Seperti yang bisa Anda lihat, ini adalah teks intro Anda ... dulunya mengatakan ini:

This post/page is password protected. To view it please enter your password below

Sekarang kita bisa mengubahnya menjadi teks apa pun yang Anda inginkan di sana. Anda bahkan dapat menghapus segala sesuatu di antara kutipan tersebut dan sama sekali tidak menampilkan apa-apa.


Langkah 3 Mengubah Label Field Input Password

Label default yang ditunjukkan di sebelah kiri field input adalah Password. Di sini Anda bisa mengubahnya menjadi apapun yang ingin Anda katakan. Dalam kasus saya, saya menugaskannya sebuah kelas yang mengambil label di css dengan menempatkan display menjadi none.

Anda juga dapat mengubah ukuran font, warna, karya ke label ini


Langkah 4 Menata Field Input Password

Saya benci bagaimana form-nya terlihat, tapi dengan tambahan ini ke field input password default, saya bisa membuatnya terlihat sedikit lebih "up to date". Jangan ragu untuk mengubahnya bagaimanapun yang Anda merasa cocok.


Langkah 5 Menata Tombol Submit

Dalam kode fungsi, saya menambahkan sebuah kelas ke tombol submit yang disebut "button". Saya melakukan ini karena saya ingin semua tombol di situs klien saya terlihat sama. Keseragaman di sebuah situs adalah kuncinya. Inilah CSS yang saya gunakan:

Untuk beberapa alasan saya mendapatkan panah saat saya hover di atas tombol jadi saya hanya mengubah kursor untuk menunjukkan pointer dan kembali ke tangan saat hover.


Langkah 6 Menambahkan Teks Ekstra di Bawah Form

Sebenarnya saya perlu menambahkan sedikit catatan untuk memberi tahu orang-orang bahwa field password-nya adalah case sensitive sehingga untuk menambahkan teks tambahan di bawah form ini, saya hanya menambahkan kode paragraf dan memasukkan tag style ke dalamnya untuk memberi gaya teks secara terpisah dari yang lain di seluruh halaman.

Dan kita sudah selesai!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.