Cara Membuat Halaman Log Masuk WordPress Kustom (Panduan Utama)

Adakah anda ingin membuat halaman log masuk WordPress khas untuk laman web anda?


Sekiranya anda menjalankan laman web keahlian WordPress atau kedai dalam talian, maka banyak pengguna anda akan sering melihat halaman log masuk. Menyesuaikan halaman log masuk WordPress lalai membolehkan anda menawarkan pengalaman pengguna yang lebih baik.

Dalam panduan utama ini, kami akan menunjukkan kepada anda pelbagai cara untuk membuat halaman log masuk WordPress tersuai. Anda juga boleh menggunakan tutorial ini untuk membuat halaman masuk WooCommerce tersuai juga.

Cara membuat halaman log masuk WordPress khas untuk laman web anda dengan mudah

Inilah yang akan anda pelajari dari panduan ini.

    Mengapa Membuat Halaman Log Masuk WordPress Tersuai?

    WordPress dilengkapi dengan sistem pengurusan pengguna yang kuat. Ini membolehkan pengguna membuat akaun di kedai eCommerce, laman web keahlian, atau di blog.

    Secara lalai, halaman log masuk menunjukkan penjenamaan dan logo WordPress. Ini baik jika anda menjalankan blog kecil, atau anda satu-satunya orang yang mempunyai akses pentadbir.

    Skrin log masuk WordPress lalai

    Namun, jika laman web anda membenarkan pengguna mendaftar dan log masuk, maka halaman log masuk khusus menawarkan pengalaman pengguna yang lebih baik.

    Dengan menggunakan logo dan reka bentuk anda sendiri membuatkan pengguna berasa selesa di rumah. Walaupun mengalihkannya ke skrin log masuk WordPress lalai yang tidak kelihatan seperti laman web anda mungkin kelihatan mencurigakan pengguna anda.

    Terakhir, skrin log masuk lalai tidak mengandungi apa-apa kecuali borang log masuk. Dengan membuat halaman log masuk tersuai, anda dapat menggunakannya untuk mempromosikan halaman lain atau promosi khas.

    Oleh itu, mari kita lihat beberapa contoh reka bentuk halaman log masuk WordPress tersuai.

    Contoh Reka Bentuk Halaman Log Masuk WordPress

    Pemilik laman web dapat menyesuaikan halaman masuk WordPress menggunakan gaya dan teknik yang berbeza.

    Ada yang membuat halaman masuk tersuai yang menggunakan tema dan warna laman web mereka. Yang lain, ubah halaman log masuk lalai dengan menambahkan latar belakang, warna, dan logo mereka sendiri.

    1. WPForms

    WPForms

    WPForms adalah pemalam bentuk hubungan WordPress terbaik di pasaran. Secara kebetulan, plugin mereka juga termasuk add-on untuk membuat borang masuk dan pendaftaran WordPress yang indah, yang akan kami tunjukkan kemudian dalam artikel ini.

    Halaman log masuk tersuai mereka menggunakan susun atur dua lajur. Lajur kiri mengandungi borang log masuk dan lajur kanan digunakan untuk menonjolkan promosi dan ajakan bertindak yang lain. Dalam contoh di atas, mereka menggunakan halaman log masuk untuk berkongsi laporan tahunan mereka. Ia menggunakan penjenamaan tersuai, ilustrasi latar, dan warna jenama untuk mencipta pengalaman masuk yang unik.

    2. Rock Perkahwinan Saya

    Rock Perkahwinan Saya

    Laman web Rock My Wedding menggunakan mod timbul untuk memaparkan borang masuk dan pendaftaran. Kelebihan menggunakan pop timbul ialah pengguna boleh log masuk tanpa meninggalkan halaman. Ini menyelamatkan mereka dari pemuatan halaman baru dan menawarkan pengalaman pengguna yang lebih cepat.

    3. Jacquelynne Steves

    Jacquelynne Steves

    Jacquelynne Steeves adalah laman web seni dan kraf di mana pengarang menerbitkan kandungan mengenai menghias rumah, membuat selimut, corak, sulaman, dan banyak lagi. Halaman log masuk mereka menggunakan gambar latar belakang yang disesuaikan dengan tema laman web mereka dengan borang log masuk di sebelah kanan.

    4. Grafik Gerakan Gereja

    Grafik Gerakan Gereja

    Halaman log masuk syarikat reka bentuk grafik ini menggunakan latar belakang berwarna-warni yang menggambarkan perniagaan mereka. Ia menggunakan tajuk header, footer, dan menu navigasi yang sama di skrin log masuk. Borang log masuk sendiri cukup ringkas dengan latar belakang gelap.

    5. Kajian Pengurusan MITSLoan

    Tinjauan Pengurusan MITSLoan

    Laman web MITSLoan Management Review menggunakan skrin log masuk WordPress lalai. Ia menggunakan CSS tersuai dengan logo mereka sendiri untuk menyembunyikan penjenamaan WordPress.

    Membuat Halaman Log masuk Custom Depan di WordPress

    Terdapat beberapa plugin WordPress yang boleh anda gunakan untuk membuat halaman log masuk khas front-end di WordPress. Kami akan menunjukkan kepada anda dua pemalam yang berbeza, dan anda boleh memilih yang paling sesuai untuk anda.

    Membuat Halaman Log Masuk WordPress menggunakan Tema Log Masuk Saya

    Perkara pertama yang perlu anda lakukan ialah memasang dan mengaktifkan plugin Tema My Login. Untuk maklumat lebih lanjut, lihat panduan langkah demi langkah kami mengenai cara memasang pemalam WordPress.

    Setelah diaktifkan, Tema Log Masuk Saya secara automatik membuat URL untuk log masuk tersuai, log keluar, pendaftaran, kata laluan terlupa, dan menetapkan semula tindakan kata laluan.

    Anda boleh menyesuaikan URL masuk WordPress ini dengan melawati Tema Log Masuk Saya »Umum halaman. Tatal ke bawah ke bahagian ‘Slug’ untuk mengubah URL ini yang digunakan oleh pemalam untuk tindakan log masuk.

    Tema Halaman Log Masuk Saya

    Tema Login Saya juga membolehkan anda menggunakan kod pendek untuk membuat halaman masuk dan pendaftaran tersuai. Anda hanya boleh membuat halaman untuk setiap tindakan dan kemudian menambahkan slug halaman di sini, sehingga plugin dapat mencari dan mengarahkan pengguna dengan betul.

    Mari mulakan dengan halaman log masuk.

    Kepala ke Halaman »Tambah Baru untuk membuat laman WordPress baru. Anda perlu memberi tajuk pada halaman anda dan kemudian memasukkan kod pendek berikut [[tema-masuk-saya] “di dalam kawasan kandungan.

    Menambah kod pendek

    Anda kini dapat menerbitkan halaman anda dan melihatnya untuk melihat halaman login tersuai anda beraksi.

    Halaman log masuk WordPress tersuai

    Ulangi proses untuk membuat halaman lain dengan menggunakan kod pendek berikut.

    [theme-my-login action = “register”] untuk borang pendaftaran.

    [theme-my-login action = “lostpassword”] untuk halaman kata laluan yang hilang.

    [theme-my-login action = “resetpass”] menggunakannya di halaman reset kata laluan.

    Membuat Halaman Log Masuk WordPress Khusus Menggunakan WPForms

    WPForms adalah plugin pembangun bentuk WordPress terbaik di pasaran. Ini membolehkan anda membuat borang log masuk dan pendaftaran khusus untuk laman web anda dengan mudah.

    WPForms adalah plugin WordPress premium, dan anda memerlukan sekurang-kurangnya rancangan pro mereka untuk mengakses add-on pendaftaran pengguna. Pengguna WPBeginner dapat potongan 50% dengan menggunakan kod kupon WPForms kami: JIMAT50

    Perkara pertama yang perlu anda lakukan ialah memasang dan mengaktifkan plugin WPForms. Untuk maklumat lebih lanjut, lihat panduan langkah demi langkah kami mengenai cara memasang pemalam WordPress.

    Setelah diaktifkan, anda perlu melawat WPForms »Tetapan halaman untuk memasukkan kunci lesen anda. Anda boleh mendapatkan maklumat ini di bawah akaun anda di laman web WPForms.

    Lesen WPForms

    Setelah memasukkan kunci lesen, anda akan dapat memasang alat tambah. Teruskan dan lawati WPForms »Addons halaman dan cari Addon Pendaftaran Pengguna.

    Pasang addon pendaftaran pengguna

    Seterusnya, klik pada butang Pasang Addon untuk memuat turun dan mengaktifkan addon. Anda kini bersedia untuk membuat borang log masuk tersuai anda sendiri.

    Kepala ke WPForms »Tambah Baru halaman dan tatal ke bawah ke templat ‘Borang Masuk Pengguna’. Anda perlu mengklik butang ‘Buat Borang Masuk Pengguna’ untuk meneruskan.

    Buat borang log masuk

    WPForms akan memuatkan Borang Login Pengguna dengan medan yang diperlukan. Anda boleh mengklik medan untuk menambahkan keterangan atau teks anda sendiri di sekitarnya.

    Pembangun borang WPForms

    Anda juga boleh menukar tetapan lain. Sebagai contoh, ia secara automatik menambahkan ‘Kirim’ sebagai tajuk butang. Anda boleh mengkliknya dan kemudian menukarnya ke Login sebagai gantinya.

    Tetapan borang

    Anda juga dapat menentukan apa yang berlaku setelah pengguna berjaya log masuk. Pergi ke Tetapan »Pengesahan tab dan pilih tindakan.

    Ubah hala masuk pengguna

    Anda boleh mengalihkan pengguna ke URL lain, mengalihkan mereka ke laman utama, atau hanya menunjukkan kepada mereka mesej bahawa mereka sekarang masuk.

    Setelah anda berpuas hati dengan tetapan borang, klik pada butang Simpan di sudut kanan atas skrin dan tutup pembentuk borang.

    Menambah Borang Log Masuk Kustom Anda ke Halaman WordPress

    WPForms menjadikannya sangat mudah untuk menambahkan borang log masuk tersuai anda di mana-mana pos atau halaman WordPress.

    Cukup edit halaman di mana anda ingin menambah borang log masuk atau buat yang baru. Pada skrin edit halaman, tambahkan blok WPForms ke kawasan kandungan anda.

    Menambah blok WPForms pada siaran

    Seterusnya, pilih borang log masuk yang anda buat sebelumnya dan blok WPForms akan memuatkannya secara automatik ke dalam kawasan kandungan.

    Pratonton borang log masuk

    Anda kini boleh terus mengedit halaman borang masuk, atau menyimpan dan menerbitkan perubahan anda.

    Menyesuaikan reka bentuk halaman borang log masuk WordPress anda

    Secara lalai, halaman borang log masuk WordPress tersuai anda akan menggunakan templat dan gaya halaman tema anda. Ini akan mempunyai menu navigasi, header, footer, dan widget bar sisi tema anda.

    Sekiranya anda ingin mengambil alih keseluruhan halaman dan merancang sesuatu dari awal, maka anda boleh menggunakan plugin pembangun halaman WordPress.

    Dengan plugin pembangun halaman, anda boleh membuat susun atur halaman tersuai dan kemudian menambahkan widget borang log masuk yang disediakan oleh Tema Login Saya atau WPForms.

    Dalam tangkapan skrin di bawah, kami telah menggunakan pemalam Beaver Builder yang popular. Kami menggunakan gambar latar pada susun atur skrin penuh dan kemudian menambahkan dua lajur. Dalam satu lajur kami menambahkan beberapa teks dan butang. Di lajur lain, kami menambahkan widget WPForms.

    Membuat halaman log masuk tersuai menggunakan plugin pembina halaman

    Manfaat Beaver Builder ialah penyelesaian drag and drop 100%.

    Nota: Oleh kerana anda sudah log masuk, kedua-dua plugin Theme My Login dan WPForms mungkin tidak menunjukkan pratonton langsung borang log masuk. Plugin WPForms mempunyai pilihan di mana anda boleh mematikannya dalam tetapan borang.

    Sekiranya pemalam pembangun halaman WordPress bukan perkara anda, anda boleh menggunakan CSS khusus untuk menggayakan borang dan halaman log masuk itu sendiri. Sebagai alternatif, anda juga boleh menggunakan pemalam CSS Hero untuk menambahkan gaya CSS tersuai dengan mudah.

    Tukar Logo dan URL Log Masuk WordPress

    Anda tidak perlu membuat halaman log masuk WordPress sepenuhnya untuk laman web anda. Sebenarnya, banyak laman web hanya menggantikan URL logo dan logo sementara masih menggunakan halaman log masuk lalai.

    Sekiranya anda ingin mengganti logo WordPress di skrin log masuk dengan logo anda sendiri, maka anda boleh melakukannya dengan mudah menggunakan pemalam WordPress atau dengan menambahkan kod tersuai. Kami akan menunjukkan kepada anda kedua-dua kaedah yang boleh anda gunakan dengan kaedah yang paling sesuai dengan anda.

    Tukar Logo dan URL Log Masuk WordPress menggunakan Plugin

    Perkara pertama yang perlu anda lakukan ialah memasang dan mengaktifkan Colorlib Login Customizer. pasangkan. Untuk maklumat lebih lanjut, lihat panduan langkah demi langkah kami mengenai cara memasang pemalam WordPress.

    Setelah diaktifkan, plugin menambah item menu baru yang berlabel ‘Login Customizer’ ke bar sisi admin WordPress. Mengkliknya akan melancarkan penyesuai log masuk.

    Penyesuai log masuk

    Penyesuai log masuk akan memuatkan skrin masuk WordPress lalai anda dengan pilihan penyesuaian di sebelah kiri dan pratonton langsung di sebelah kanan.

    Untuk mengganti logo WordPress dengan logo anda sendiri, klik pada tab ‘Pilihan logo’ di sebelah kanan. Dari sini anda boleh menyembunyikan logo WordPress, memuat naik logo tersuai anda sendiri, menukar URL logo dan teks.

    Muat naik logo tersuai ke halaman log masuk

    Plugin ini juga membolehkan anda menyesuaikan sepenuhnya halaman log masuk WordPress lalai. Anda boleh menambah lajur, gambar latar, menukar warna borang log masuk dan banyak lagi.

    Pada dasarnya, anda boleh membuat halaman log masuk WordPress tersuai tanpa mengubah URL log masuk WordPress lalai.

    Setelah selesai, cukup klik butang terbitkan untuk menyimpan perubahan anda. Anda kini boleh mengunjungi halaman log masuk WordPress untuk melihat bentuk log masuk tersuai anda.

    Halaman log masuk WordPress khusus dengan logo tersuai

    Tukar Logo dan URL Log Masuk WordPress tanpa Plugin (Kod)

    Kaedah ini membolehkan anda mengganti logo WordPress secara manual di skrin log masuk dengan logo tersuai anda sendiri.

    Pertama, anda perlu memuat naik logo tersuai anda ke perpustakaan media. Pergi ke Media »Tambah Baru halaman dan muat naik logo tersuai anda.

    Setelah memuat naik gambar, klik pada pautan ‘Edit’ di sebelahnya. Ini akan membuka halaman media edit di mana anda perlu menyalin URL fail dan menampalnya dalam fail teks kosong di komputer anda.

    Seterusnya, anda perlu menambahkan kod berikut ke fail functions.php tema anda atau pemalam khusus laman web.

    fungsi wpb_login_logo () { ?>

    #login h1 a, .login h1 a {
    latar belakang-gambar: url (http: //path/to/your/custom-logo.png);
    tinggi: 100px;
    lebar: 300px;
    ukuran latar: 300px 100px;
    latar-ulangan: tidak-ulangan;
    padding-bottom: 10px;
    }

    <?php}
    add_action (‘login_enqueue_scripts’, ‘wpb_login_logo’);

    Jangan lupa untuk mengganti URL gambar latar dengan URL fail yang anda salin sebelumnya. Anda juga dapat menyesuaikan sifat CSS lain agar sesuai dengan gambar logo tersuai anda.

    Anda kini boleh mengunjungi halaman log masuk WordPress untuk melihat logo tersuai anda beraksi.

    Halaman log masuk WordPress dengan logo tersuai

    Kod ini hanya menggantikan logo WordPress. Ia tidak mengubah pautan logo yang menunjuk ke laman web WordPress.org.

    Mari kita ubah ini.

    Cukup tambahkan kod berikut ke fail functions.php tema anda atau pemalam khusus laman web. Anda boleh menambahkan kod ini tepat di bawah kod yang anda tambahkan sebelumnya.

    fungsi wpb_login_logo_url () {
    pulang ke rumah_url ();
    }
    add_filter (‘login_headerurl’, ‘wpb_login_logo_url’);

    fungsi wpb_login_logo_url_title () {
    kembalikan ‘Nama dan Maklumat Laman Web Anda’;
    }
    add_filter (‘login_headertitle’, ‘wpb_login_logo_url_title’);

    Jangan lupa ganti ‘Nama dan Maklumat Tapak Anda’ dengan nama sebenar laman web anda. Logo khusus di skrin log masuk anda sekarang akan menunjuk ke laman utama laman web anda.

    Itu sahaja. Kami harap artikel ini membantu anda mempelajari pelbagai cara untuk membuat halaman log masuk WordPress untuk laman web anda. Anda mungkin juga ingin melihat panduan keselamatan WordPress utama kami untuk petua meningkatkan keselamatan log masuk WordPress anda.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me