Cara membuat halaman login WordPress kustom

Orang dapat berargumen bahwa halaman login adalah halaman terpenting dari situs WordPress mana pun. Tanpa kemampuan untuk masuk, bagaimana lagi pemilik blog dapat mempublikasikan konten hebat? Selain pembuatan konten, ini juga cara masuk ke berbagai opsi konfigurasi WordPress.

Halaman login default cukup sederhana dan melayani tujuannya dengan sangat baik. Ini memiliki bidang yang diperlukan bagi pengguna untuk memasukkan kredensial WordPress mereka dan halaman mengontrol akses ke layar administrasi, yang memungkinkan hanya pengguna terdaftar untuk masuk.

Sebagai seorang desainer, Anda mungkin telah menghabiskan waktu berjam-jam untuk membuat desain situs web yang sempurna. Sangat penting untuk membawa desain itu melalui seluruh pengalaman pengguna, meskipun tidak semua pengguna akan berinteraksi dengan halaman login. Ini adalah kesempatan lain untuk menambahkan detail ekstra itu dan akan meninggalkan kesan positif bagi para pengguna yang secara teratur masuk ke situs. (Plus, itu dianggap sebagai praktik terbaik keamanan WordPress untuk memindahkan halaman ke URL yang sedikit kurang jelas!) Meskipun biasanya bukan bagian dari pengaturan tema WordPress, cukup mudah untuk membuat penyesuaian ke halaman login WordPress.

Cara mengakses halaman login WordPress

Anda mungkin sangat akrab dengan mengakses halaman ini, apa pun tanggung jawab situs Anda. Tetapi untuk berjaga-jaga jika sudah lama, biasanya ditemukan di direktori root situs web. Halaman login biasanya seperti www.mysite.com/wp-login.php . Seperti yang Anda lihat, yang ini belum ditata.

Dalam beberapa kasus, mungkin ada instalasi WordPress di subdirektori sendiri. Kemudian akan menjadi seperti www.mysite.com/directory-name/wp-login.php .

Cara menyesuaikan halaman login WordPress

Pada langkah-langkah berikut, CSS akan digunakan untuk tujuan penataan. Juga, akan ada kode khusus tema yang ditambahkan ke file functions.php untuk membuat halaman kustom terjadi.

Seperti kebanyakan tutorial, Anda akan ingin mencoba ini di lingkungan pengujian Anda terlebih dahulu. Jika Anda mencari alat lingkungan pengujian yang baik, Anda pasti ingin mengenal Lokal. Anda dapat secara efisien menguji hal-hal baru di situs Anda sebelum ditayangkan.

Kami akan membuat modifikasi pada file functions.php dalam tutorial ini sehingga Anda dapat melihat bagaimana perubahan itu bekerja. Namun, ada juga opsi untuk menggunakan konsep ini untuk membuat plugin dan menambahkan potensi modifikasi apa pun di sana daripada di file functions.php . Untuk tutorial ini, perubahan desain untuk halaman login sangat spesifik untuk tema, itulah sebabnya saya memilih untuk menambahkannya ke tema daripada membuat plugin.

Buat folder baru untuk penyesuaian

Menjadi teratur adalah kunci saat menambahkan penyesuaian ke tema. Anda akan ingin membuat folder baru khusus untuk perubahan ini. Untuk melakukan itu, temukan tema aktif Anda saat ini dan kemudian buat folder bernama "login."

Selanjutnya, file CSS diperlukan untuk mereferensikan gaya login khusus. Di folder login baru, buat file CSS kosong dan beri nama yang mudah diingat. Dalam hal ini, ini adalah login-styles.css .

Bagaimana stylesheet ini akan terhubung? Ini perlu dirujuk dalam file functions.php tema. Buka file functions.php dan rekatkan cuplikan berikut. (Pastikan Anda menyertakan penamaan file CSS Anda sendiri, jika Anda menggunakan sesuatu yang berbeda dari login-styles.css .)

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . 'login/login-styles.css" />';
}
add_action('login_head', 'custom_login');


Mengubah logo
Ini adalah perubahan yang cukup mudah dilakukan, dan memiliki banyak dampak pada peningkatan branding. Alat pemeriksa browser sangat membantu dalam menentukan struktur halaman. Dalam contoh ini, Alat Pengembang Chrome digunakan. Untuk mengubah logo WordPress menjadi milik Anda, Anda perlu mengubah gaya CSS yang terkait dengan judul ini:
		


<h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1>



Kami ingin membuat CSS spesifik sehingga menargetkan div dengan kelas .login akan memungkinkan kami untuk menata judul dan tautan di dalam div itu.

Untuk menjaga semuanya tetap teratur, saya telah membuat folder gambar terpisah. Ini opsional dan Anda dapat mereferensikan file di lokasi lain jika Anda mau. Pastikan jalur file benar untuk gambar yang ingin Anda gunakan.
		


.login h1 a {
  background-image: url('images/login-logo.png');
}



Kami melakukan ini menggunakan ketinggian 84px yang ditentukan dalam gaya default. Jika Anda ingin membuatnya lebih besar atau lebih kecil, Anda dapat menentukannya di lembar gaya CSS ini. Ada peluang untuk menentukan margin dan padding yang berbeda juga.

Mengapa logo asli tidak dapat ditukar? Alasannya adalah ketika WordPress memperbarui, itu mungkin dihapus.
Dengan gaya sederhana ini, kita sekarang dapat mengucapkan selamat tinggal pada logo WordPress generik. Pertukaran logo ini membuatnya terasa lebih personal dan bermerek.
		



Menata latar belakang khusus
Latar belakang bisa berupa warna solid, pola, atau sesuatu yang berbasis gambar. Dalam contoh ini, kita akan menambahkan foto hitam putih, abstrak, "techy" ke latar belakang.

Menggunakan alat pengembang browser, strukturnya dapat dipelajari. Saat memeriksa, Anda akan melihat bahwa gaya latar belakang telah disetel untuk badan. Hal-hal yang cukup umum, jadi membuat hal-hal yang lebih spesifik akan memastikan Anda tidak membuat perubahan global yang tidak Anda inginkan. Ada kelas yang diterapkan pada badan yang disebut .login yang akan sangat berguna (inilah yang kami gunakan untuk logo pada contoh di atas, karena ini adalah bagian dari pemilih).
		



body.login {
  background-image: url('images/example-image.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}


Jika gambar tidak muncul (saya pernah mengalami ini beberapa kali, lebih dari yang ingin saya akui), periksa kembali apakah jalur ke gambar sudah benar.

Hal-hal mulai terbentuk di sini; bahkan hanya dengan perubahan kecil ini, halaman login terlihat jauh lebih bermerek dan lebih menarik daripada default.
Menyesuaikan tautan logo
Ini tentu saja bukan showstopper, tetapi sekarang Anda memiliki logo Anda sendiri di halaman login, logo tersebut harus tertaut ke situs web Anda yang sebenarnya. Saat ini, ia pergi ke wordpress.org . Itu semua bagus dan bagus, karena wordpress.org adalah tempat yang populer dan bermanfaat, tetapi menurut saya, memiliki bookmark browser untuk itu sudah lebih dari cukup. Itu tidak harus menjadi bagian dari halaman login karena tampaknya lebih berguna memiliki cara cepat untuk sampai ke situs proyek.
		


Untuk mengubah nilai tautan sehingga logo tertaut ke situs WordPress Anda, gunakan fungsi ini (dan ingat untuk memasukkan URL situs web Anda sendiri):
function login_logo_url() {
    return 'https://www.mysite.com';
}
add_filter('login_headerurl', 'login_logo_url');


Jika Anda bertanya-tanya dari mana filter itu berasal, saya harus melihat referensi fungsi untuk menemukan login_headerurl dan login_headertitle .
Jadi sekarang tautannya menuju ke tempat yang benar, tetapi bagaimana dengan teks judul? Jika Anda mengarahkan kursor ke logo, Anda akan melihat "Diberdayakan oleh WordPress" sebagai tag judul. Ini benar-benar baik-baik saja, tetapi ini tidak sepenuhnya deskriptif ke mana tautannya pergi. Ini cukup cepat dan mudah untuk diperbaiki, jadi itu sepadan dengan waktu ekstra. Untuk judul yang lebih akurat, tambahkan fungsi sederhana ini.
		


function login_logo_text() {
    return 'The Title';
}
add_filter('login_headertitle', 'login_logo_text');


Opsi gaya lainnya
Jangan ragu untuk menjadi gila CSS dan memperluas apa yang telah kami lakukan di sini. Anda dapat menata setiap elemen HTML di halaman login WordPress dengan CSS. Contoh-contoh di atas baru saja menggores permukaan. Tombol, tautan, dan latar belakang formulir semuanya dapat disesuaikan. Dan jangan lupa tentang tipografi, karena itu juga bisa disesuaikan.

Jika Anda telah mengembangkan gaya formulir, itu akan menjadi pengalaman yang mulus untuk membawa gaya tersebut ke halaman login. Hal yang sama berlaku untuk tombol. Ini menjadikannya pengalaman yang konsisten dan tidak akan membuat pengguna kecewa dengan memiliki tombol yang sama sekali berbeda dari yang digunakan di situs sebenarnya. Jika Anda telah membuat panduan gaya web, ini akan sangat membantu dalam menentukan cara menerapkan desain yang konsisten ke halaman login.
Dan jika CSS bukan milik Anda, ada plugin WordPress yang ada yang akan membantu Anda membuat halaman login WordPress kustom. Berikut adalah beberapa opsi yang patut dicoba:

Tema Login Saya
Masuk Kustom
Penyesuai Halaman Masuk Kustom

Halaman login seringkali dilupakan, namun dengan mengetahui potensi yang dimiliki halaman ini, maka dapat dengan mudah menjadi bagian dari proses desain. Dengan beberapa modifikasi sederhana, Anda dapat dengan mudah mempersonalisasi halaman login WordPress Anda agar sesuai dengan tampilan dan nuansa situs Anda.