Cara Membuat Halaman Login Di WordPress Tanpa Menggunakan Plugin

Apakah Anda mencari cara terbaik untuk membuat halaman login di WordPress tanpa plugin dan tanpa menyesuaikan halaman login WordPress default? Jika Anda ingin membuat halaman login di WordPress tanpa menggunakan plugin login WordPress yang populer, Anda dapat melakukannya dengan menambahkan kode login di shortcode atau di template halaman kustom.

Dalam tutorial ini, saya akan menunjukkan bagaimana Anda dapat membuat halaman login di WordPress menggunakan fungsi shortcode dan juga bagaimana Anda dapat membuat halaman login di WordPress menggunakan fungsi login di template halaman kustom.

Masing-masing cara ini harus bekerja dengan mulus dengan tema WordPress apa pun atau lingkungan hosting WordPress apa pun.

Buat Halaman Login di WordPress tanpa Plugin

Tujuan dari tutorial ini adalah untuk membantu Anda membuat halaman login seperti login WordPress default yang memungkinkan Anda mengakses dashboard WordPress setelah login.

Idealnya, halaman login kustom ini harus menjadi halaman login frontend tempat pengguna situs Anda login. Seperti yang telah saya sebutkan di pendahuluan, ada dua cara yang akan kita bahas dalam tutorial ini;

1. Kode pendek halaman login
2. Login templat halaman khusus

Buat Kode Pendek Halaman Masuk

Langkah pertama ketika kita ingin membuat halaman login di mana saja di WordPress adalah dengan menggunakan shortcode. Kode pendek dapat ditambahkan ke halaman mana pun atau posting apa pun atau bahkan widget dan templat halaman khusus juga.

Pada langkah ini, kita akan membuat kode pendek untuk form login yang akan digunakan untuk mempublikasikan form login pada halaman manapun di WordPress atau pada sebuah posting. Pendekatan ini memberi pengguna fleksibilitas untuk membuat halaman login di bagian mana pun di situs mereka.

Untuk membuat shortcode kita akan menggunakan kode berikut:

 // Buat kode pendek formulir login

fungsi njengah_add_login_shortcode() {

                add_shortcode( 'njengah-login-form', 'njengah_login_form_shortcode' );

}

Kami telah menambahkan kode pendek dalam suatu fungsi sehingga kami dapat menginisialisasinya nanti. Fungsi add_shortcode membuat kode pendek di WordPress. Ekspresi umum fungsi add_shortcode() adalah sebagai berikut:

 add_shortcode( string $tag, dapat dipanggil $callback )

Seperti yang Anda lihat, fungsi ini memiliki dua parameter yaitu sebagai berikut:

 //Langkah 2: Panggilan balik kode pendek
fungsi njengah_login_form_shortcode() {
	
	jika (is_user_logged_in())
		
	kembali '<p>Selamat datang. Anda telah masuk!</p>'; ?> 
		
<div class ="njengah-login-tutorial" >  
		
	<?php mengembalikan wp_login_form( 
		Himpunan( 
			'echo' => salah ,
			'label_username' => __( 'Nama Pengguna Anda ' ),
			'label_password' => __( 'Kata Sandi Anda' ),
			'label_remember' => __( 'Ingat Saya' )
			        )
	); ?> 
		
            </div>
  <?php 
   }

Jika Anda memeriksa kode dengan cermat, Anda akan melihat kami telah menggunakan fungsi untuk memeriksa apakah pengguna masuk seperti yang saya jelaskan di posting tentang cara memeriksa apakah pengguna masuk di WordPress .

Jika user belum login kita menggunakan fungsi wp_login_form() untuk menampilkan form login. Jika pengguna masuk, kami secara kondisional menampilkan pesan selamat datang di halaman itu alih-alih menampilkan formulir masuk.

Fungsi WP wp_login_form()

wp_login_form() adalah fungsi WordPress yang menyediakan cara bagi pengembang tema untuk menampilkan formulir WordPress di mana saja. Fungsi ini secara umum dapat dinyatakan sebagai berikut:

 wp_login_form( array $args = array() )

$args dapat berupa larik opsi yang mengontrol bagaimana formulir ditampilkan.

Berikut ini adalah argumen yang dapat Anda gunakan dalam array untuk mengubah cara formulir ditampilkan.

Misalnya, Anda dapat mengatur array argumen dan meneruskannya ke fungsi ini sebagai berikut:

 <?php 

wp_login_form( 

	 Himpunan(
			'gema' => benar,
			// Nilai 'pengalihan' default membawa pengguna kembali ke URI permintaan.
			'redirect' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
			'form_id' => 'loginform',
			'label_username' => __( 'Nama Pengguna Anda' ),
			'label_password' => __( 'Kata Sandi Anda' ),
			'label_remember' => __( 'Ingat Saya' ),
			'label_log_in' => __( 'Masuk' ),
			'id_namapengguna' => 'pengguna_login',
			'id_password' => 'user_pass',
			'id_remember' => 'ingat saya',
			'id_kirim' => 'wp-kirim',
			'ingat' => benar,
			'nilai_namapengguna' => '',
			// Setel 'value_remember' ke true ke default kotak centang "Ingat saya" untuk dicentang.
			'nilai_ingat' => salah,
		);
		
); ?>

Formulir akan ditampilkan dengan label baru yang Anda tambahkan ke array sebagai lawan dari label formulir login WordPress default. Pada kode di atas, saya telah mengubah nama pengguna menjadi Nama Pengguna Anda dan kata sandi menjadi Kata Sandi Anda.

Setelah membuat kode pendek dan fungsi panggilan balik, kita perlu menginisialisasinya sehingga sekarang kita dapat menggunakan kode pendek di mana saja di posting atau halaman WordPress untuk menambahkan formulir login khusus.

Berikut ini adalah kode yang akan menginisialisasi shortcode form login:

 // Langkah 3: Init fungsi kode pendek

add_action( 'init', 'njengah_add_login_shortcode' );

Cuplikan Kode Lengkap untuk Membuat Shortcode form Login di WordPress

Sekarang kita dapat menggabungkan semua potongan kode ini menjadi satu potongan kode dan menambahkan kode ke functions.php dari tema WordPress yang aktif kemudian menampilkan formulir login WordPress menggunakan kode pendek – [ njengah-login-form].

Berikut ini adalah cuplikan kode lengkap yang harus Anda tambahkan ke file functions.php untuk menambahkan shortcode formulir login WordPress:

 /**
 * Buat formulir login WordPress Kustom tanpa plugin [WordPress Login form Shortcode] 
 * @penulis Joe Njengah 
 * @ intisari - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 */ 


// Langkah 1: Buat kode pendek
fungsi njengah_add_login_shortcode() {
	add_shortcode( 'jay-login-form', 'njengah_login_form_shortcode' );
}

//Langkah 2: Panggilan balik kode pendek
fungsi njengah_login_form_shortcode() {
	
	jika (is_user_logged_in())
		
		kembali '<p>Selamat datang. Anda telah masuk!</p>'; ?> 
		
		<div class ="njengah-login-tutorial" >  
		
			<?php mengembalikan wp_login_form( 
							Himpunan( 
								'echo' => salah ,
								'label_username' => __( 'Nama Pengguna Anda ' ),
								'label_password' => __( 'Kata Sandi Anda' ),
								'label_remember' => __( 'Ingat Saya' )
			              )
			); ?> 
		
		</div>
  <?php 
   }

// Langkah 3: Init fungsi kode pendek
add_action( 'init', 'njengah_add_login_shortcode' );

//Langkah 4 : Gunakan shortcode [njengah-login-form] untuk menyematkan form login pada halaman atau postingan 

Ketika Anda menambahkan kode ini ke functions.php Anda harus membuat halaman login dan menambahkan kode pendek [ njengah-login-form] untuk mempublikasikan form login. Form login akan muncul seperti pada gambar di bawah ini:

Gaya Formulir Masuk WordPress

Saya telah menambahkan gaya berikut untuk membuat formulir login menarik dan mengambil desain tema yang saya gunakan:

 .njengah-login-tutorial {
    latar belakang: #6379a4;
    bantalan: 20 piksel;
    lebar maksimum: 70%;
    margin: 0 otomatis;
    warna: #ff;
}

.label kata sandi masuk {
    margin-kanan: 120px;
}

.login-nama pengguna {
    padding-top: 30px;
}

Buat Template Halaman Kustom Formulir Login

Cara alternatif untuk membuat halaman login di WordPress tanpa plugin adalah dengan membuat template halaman kustom dan menggunakan fungsi wp_login_form() untuk memublikasikan formulir login di halaman tersebut.

Berikut adalah kode untuk membuat halaman login kustom yang terletak di template halaman kustom:

 <?php
/**
 * Nama Template: Halaman Login 
 */
 
 get_header(); 
 
 
 if (is_user_logged_in()){
	 
	     echo '<p>Selamat datang. Anda telah masuk!</p>'; 
		 
 }kalau tidak{ 
	 
	 wp_login_form( 

		 Himpunan(
				'gema' => benar,
				// Nilai 'pengalihan' default membawa pengguna kembali ke URI permintaan.
				'redirect' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
				'form_id' => 'loginform',
				'label_username' => __( 'Nama Pengguna Anda' ),
				'label_password' => __( 'Kata Sandi Anda' ),
				'label_remember' => __( 'Ingat Saya' ),
				'label_log_in' => __( 'Masuk' ),
				'id_namapengguna' => 'pengguna_login',
				'id_password' => 'user_pass',
				'id_remember' => 'ingat saya',
				'id_kirim' => 'wp-kirim',
				'ingat' => benar,
				'nilai_namapengguna' => '',
				// Setel 'value_remember' ke true ke default kotak centang "Ingat saya" untuk dicentang.
				'nilai_ingat' => salah,
			)
						
		);
    }			
	
get_footer();		
				

Simpan kode ini dalam file dan beri nama login-page.php dan pastikan itu disimpan di folder root tema WordPress Anda.

Buat halaman baru dan Anda akan melihat template login sekarang tersedia pada opsi template atribut halaman seperti yang ditunjukkan di bawah ini:

Pilih template dan publikasikan halaman. Saat Anda memeriksa frontend, Anda akan melihat formulir login ditampilkan untuk pengguna yang tidak masuk dan pesan selamat datang ditampilkan untuk pengguna yang masuk.

Kesimpulan

Dalam posting ini, saya telah menguraikan dua cara Anda dapat menambahkan formulir login di halaman WordPress. Anda dapat menggunakan fungsi kode pendek untuk membuat kode pendek formulir login WordPress atau Anda dapat menggunakan templat halaman khusus untuk membuat halaman login di WordPress tanpa plugin. Saya harap Anda sekarang dapat menerapkan salah satu metode ini untuk membuat formulir login frontend kustom di situs WordPress Anda.

Artikel Serupa

1. Cara Membuat Pagination WordPress untuk Jenis Posting Kustom
2. 30 Plugin Keamanan WordPress Terbaik untuk Melindungi Situs Anda
3. Cara Membuat Halaman Di WordPress Secara Terprogram
4. Cara Mengakses Dasbor Admin WordPress atau Masuk ke Dasbor WordPress Anda
5. Cara Membuat Halaman Penerimaan Pesanan Khusus WooCommerce
6. Cara Menghubungkan Printful ke WooCommerce
7. Cara Memperbarui Ekstensi WooCommerce
8. Cara Menambahkan Kotak Pencarian di Tema Halaman Atas Etalase
9. 40+ Plugin Formulir Kontak WordPress Terbaik untuk Kontak Mudah
10. Cara Menghapus Kategori Tidak Berkategori Di WordPress WooCommerce
11. Cara Menghapus Sidebar dari Halaman WordPress atau Menyembunyikan Sidebar WordPress
12. Cara Membuat Pagination Kueri Kustom Di WordPress Dengan Contoh
13. WooCommerce vs Magento: Manakah Platform E-Commerce Terbaik?
14. Cara Mencadangkan Basis Data WooCommerce
15. Top 30+ Plugin Formulir WordPress Terbaik » Plugin Formulir WordPress Terbaik
16. Cara Membuat Halaman Login dan Registrasi Terpisah Di WooCommerce
17. 35+ Plugin WordPress Bentuk Gratis Terbaik
18. Cara Bermigrasi dari Shopify ke WooCommerce