วิธีสร้างหน้าเข้าสู่ระบบใน WordPress โดยไม่ต้องใช้ปลั๊กอิน

เผยแพร่แล้ว: 2022-01-03

วิธีสร้างหน้าเข้าสู่ระบบใน WordPress โดยไม่ต้องใช้ปลั๊กอิน คุณกำลังมองหาวิธีที่ดีที่สุดในการสร้างหน้าเข้าสู่ระบบใน WordPress โดยไม่ต้องใช้ปลั๊กอินและไม่ปรับแต่งหน้าเข้าสู่ระบบ WordPress เริ่มต้นหรือไม่? หากคุณต้องการสร้างหน้าเข้าสู่ระบบใน WordPress โดยไม่ต้องใช้ปลั๊กอินการเข้าสู่ระบบ WordPress ยอดนิยม คุณสามารถทำได้โดยเพิ่มรหัสเข้าสู่ระบบในรหัสย่อหรือในเทมเพลตหน้าแบบกำหนดเอง

ในบทช่วยสอนนี้ ฉันจะสาธิตวิธีสร้างหน้าเข้าสู่ระบบใน WordPress โดยใช้ฟังก์ชันรหัสย่อ และวิธีสร้างหน้าเข้าสู่ระบบใน WordPress โดยใช้ฟังก์ชันเข้าสู่ระบบในเทมเพลตหน้าแบบกำหนดเอง

แต่ละวิธีควรทำงานได้อย่างราบรื่นกับธีม WordPress หรือสภาพแวดล้อมการโฮสต์ WordPress ใดๆ

สร้างหน้าเข้าสู่ระบบใน WordPress โดยไม่ต้องใช้ปลั๊กอิน

เป้าหมายของบทช่วยสอนนี้คือช่วยคุณสร้างหน้าเข้าสู่ระบบ เช่น การเข้าสู่ระบบ WordPress เริ่มต้นที่ให้คุณเข้าถึงแดชบอร์ด WordPress หลังจากเข้าสู่ระบบ

ตามหลักการแล้ว หน้าเข้าสู่ระบบแบบกำหนดเองนี้ควรเป็นหน้าเข้าสู่ระบบส่วนหน้าซึ่งผู้ใช้เว็บไซต์ของคุณเข้าสู่ระบบ ดังที่ได้กล่าวไว้ในบทนำ มีสองวิธีที่เราจะกล่าวถึงในบทช่วยสอนนี้

รหัสย่อหน้าเข้าสู่ระบบ
เข้าสู่ระบบเทมเพลตหน้าแบบกำหนดเอง

สร้างรหัสย่อหน้าเข้าสู่ระบบ

ขั้นตอนแรกเมื่อเราต้องการสร้างหน้าเข้าสู่ระบบที่ใดก็ได้บน WordPress คือการใช้รหัสย่อ คุณสามารถเพิ่มรหัสย่อในหน้าใด ๆ หรือโพสต์ใด ๆ หรือแม้แต่วิดเจ็ตและเทมเพลตหน้าที่กำหนดเองได้เช่นกัน

ในขั้นตอนนี้ เราจะสร้างรหัสย่อสำหรับแบบฟอร์มการเข้าสู่ระบบ ซึ่งจะใช้เพื่อเผยแพร่แบบฟอร์มการเข้าสู่ระบบบนหน้าใดก็ได้ใน WordPress หรือในโพสต์ วิธีนี้ทำให้ผู้ใช้มีความยืดหยุ่นในการสร้างหน้าเข้าสู่ระบบในส่วนใดก็ได้ของไซต์ของตน

ในการสร้างรหัสย่อ เราจะใช้รหัสต่อไปนี้:

 // สร้างรหัสย่อแบบฟอร์มเข้าสู่ระบบ

ฟังก์ชัน njengah_add_login_shortcode () {

                add_shortcode( 'njengah-เข้าสู่ระบบ-แบบฟอร์ม', 'njengah_login_form_shortcode' );

}

เราได้เพิ่มรหัสย่อในฟังก์ชันเพื่อให้เราสามารถเริ่มต้นได้ในภายหลัง ฟังก์ชัน add_shortcode สร้างรหัสย่อใน WordPress นิพจน์ทั่วไปของฟังก์ชัน add_shortcode() มีดังนี้:

 add_shortcode( สตริง $tag, $callback ที่เรียกได้)

ดังที่คุณเห็นฟังก์ชันนี้มีพารามิเตอร์สองตัวดังนี้:

พารามิเตอร์	คำอธิบาย
$tag	นี่คือข้อความที่จะใช้ในตัวแก้ไขบทความหรือหน้าเพื่อเผยแพร่รหัสย่อ ตัวอย่างเช่น ในกรณีนี้ เรามีเป็น 'njengah-login-form' เมื่อเราเพิ่มลงในเพจ เราจะใส่ไว้ในวงเล็บเหลี่ยม : [njengah-login-form]
$โทรกลับ	นี่คือฟังก์ชันเรียกกลับที่จะแสดงฟังก์ชันของรหัสย่อ ตัวอย่างเช่น ในกรณีนี้ เราจะเพิ่มรหัสเพื่อแสดงแบบฟอร์มการเข้าสู่ระบบในฟังก์ชันเรียกกลับนี้ตามที่แชร์ไว้ในรหัสด้านล่าง

 //ขั้นตอนที่ 2: การโทรกลับแบบสั้น
ฟังก์ชัน njengah_login_form_shortcode () {
	
	ถ้า (is_user_logged_in())
		
	กลับ '<p>ยินดีต้อนรับ คุณเข้าสู่ระบบ!</p>'; ?> 
		
<div class ="njengah-login-tutorial" >  
		
	<?php ส่งคืน wp_login_form( 
		อาร์เรย์ ( 
			'echo' => เท็จ ,
			'label_username' => __( 'ชื่อผู้ใช้ของคุณ' ),
			'label_password' => __( 'รหัสผ่านของคุณ' ),
			'label_remember' => __( 'จดจำฉัน' )
			        )
	); ?> 
		
            </div>
  <?php 
   }

หากคุณตรวจสอบรหัสอย่างถี่ถ้วน คุณจะสังเกตเห็นว่าเราใช้ฟังก์ชันนี้เพื่อตรวจสอบว่าผู้ใช้เข้าสู่ระบบตามที่ฉันอธิบายไว้ในโพสต์เกี่ยวกับ วิธีตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้ใน WordPress หรือไม่

หากผู้ใช้ไม่ได้เข้าสู่ระบบ เราใช้ฟังก์ชัน wp_login_form() เพื่อแสดงแบบฟอร์มการเข้าสู่ระบบ หากผู้ใช้เข้าสู่ระบบ เราจะแสดงข้อความต้อนรับตามเงื่อนไขในหน้านั้นแทนที่จะแสดงแบบฟอร์มการเข้าสู่ระบบ

ฟังก์ชัน WP wp_login_form()

wp_login_form() เป็นฟังก์ชันของ WordPress ที่ช่วยให้นักพัฒนาธีมสามารถแสดงแบบฟอร์ม WordPress ได้ทุกที่ โดยทั่วไปฟังก์ชันนี้สามารถแสดงได้ดังนี้:

 wp_login_form( array $args = array() )

$args สามารถเป็นอาร์เรย์ของตัวเลือกที่ควบคุมวิธีการแสดงแบบฟอร์ม

ต่อไปนี้เป็นอาร์กิวเมนต์ที่คุณสามารถใช้ในอาร์เรย์เพื่อเปลี่ยนวิธีการแสดงแบบฟอร์ม

อาร์กิวเมนต์ $arg	คำอธิบาย
เสียงก้อง	หากจะแสดงแบบฟอร์มการเข้าสู่ระบบหรือส่งคืนรหัส HTML ของแบบฟอร์ม ค่าเริ่มต้น จริง (เอคโค)
เปลี่ยนเส้นทาง	URL ที่จะเปลี่ยนเส้นทางไปที่ ต้องเป็นค่าสัมบูรณ์ เช่นเดียวกับใน “<a href=”https://example.com/mypage/”>https://example.com/mypage/</a>” ค่าเริ่มต้นคือการเปลี่ยนเส้นทางกลับไปที่ URI คำขอ
form_id	ค่าแอตทริบิวต์ ID สำหรับแบบฟอร์ม 'เข้าสู่ระบบ' เริ่มต้น
label_username	ป้ายกำกับสำหรับช่องชื่อผู้ใช้หรือที่อยู่อีเมล 'ชื่อผู้ใช้หรือที่อยู่อีเมล' เริ่มต้น
label_รหัสผ่าน	ป้ายกำกับสำหรับฟิลด์รหัสผ่าน 'รหัสผ่าน' เริ่มต้น
label_remember	ป้ายกำกับสำหรับฟิลด์จดจำ ค่าเริ่มต้น 'จดจำฉัน'
label_login	ป้ายกำกับสำหรับปุ่มส่ง 'เข้าสู่ระบบ' เริ่มต้น
id_username	ค่าแอตทริบิวต์ ID สำหรับฟิลด์ชื่อผู้ใช้ ค่าเริ่มต้น 'user_login'
id_password	ค่าแอตทริบิวต์ ID สำหรับฟิลด์รหัสผ่าน ค่าเริ่มต้น 'user_pass'
id_remember	ค่าแอตทริบิวต์ ID สำหรับฟิลด์การจดจำ 'จดจำ' เริ่มต้น
id_submit	ค่าแอตทริบิวต์ ID สำหรับปุ่มส่ง ค่าเริ่มต้น 'wp-submit'
จดจำ	ตรวจสอบว่าจะแสดงช่องกาเครื่องหมาย “จดจำ” ในแบบฟอร์มหรือไม่
value_username	ค่าเริ่มต้นสำหรับฟิลด์ชื่อผู้ใช้
value_remember	ตรวจสอบว่าควรเลือกช่องทำเครื่องหมาย "จดจำฉัน" โดยค่าเริ่มต้นหรือไม่ ค่าเริ่มต้นเท็จ (ไม่ได้เลือก)

ตัวอย่างเช่น คุณสามารถตั้งค่าอาร์เรย์อาร์กิวเมนต์และส่งผ่านไปยังฟังก์ชันนี้ได้ดังนี้:

 <?php 

wp_login_form( 

	 อาร์เรย์ (
			'echo' => จริง
			// ค่า 'เปลี่ยนเส้นทาง' เริ่มต้นจะนำผู้ใช้กลับไปที่ URI คำขอ
			'redirect' => ( is_ssl() ? 'https://' : 'http://' ) $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
			'form_id' => 'เข้าสู่ระบบ',
			'label_username' => __( 'ชื่อผู้ใช้ของคุณ' ),
			'label_password' => __( 'รหัสผ่านของคุณ' ),
			'label_remember' => __( 'จดจำฉัน' ),
			'label_log_in' => __( 'เข้าสู่ระบบ' ),
			'id_username' => 'user_login',
			'id_password' => 'user_pass',
			'id_remember' => 'จดจำ',
			'id_submit' => 'wp-ส่ง',
			'จำไว้' => จริง
			'value_username' => '',
			// ตั้งค่า 'value_remember' เป็น true เพื่อเริ่มต้นช่องทำเครื่องหมาย "Remember me" เพื่อทำเครื่องหมาย
			'value_remember' => เท็จ
		);
		
); ?>

แบบฟอร์มจะแสดงพร้อมกับป้ายกำกับใหม่ที่คุณเพิ่มลงในอาร์เรย์ ซึ่งต่างจากป้ายกำกับฟอร์มเริ่มต้นของ WordPress สำหรับการเข้าสู่ระบบ ในรหัสด้านบน ฉันได้เปลี่ยนชื่อผู้ใช้เป็นชื่อผู้ใช้ของคุณและรหัสผ่านเป็นรหัสผ่านของคุณ

สร้างหน้าเข้าสู่ระบบใน WordPress โดยไม่ต้องใช้ปลั๊กอิน เทมเพลตหน้าเข้าสู่ระบบ

หลังจากสร้างรหัสย่อและฟังก์ชันการโทรกลับแล้ว เราจำเป็นต้องเริ่มต้นเพื่อให้สามารถใช้รหัสสั้นได้ทุกที่บนบทความหรือหน้า WordPress เพื่อเพิ่มแบบฟอร์มการเข้าสู่ระบบที่กำหนดเอง

ต่อไปนี้เป็นรหัสที่จะเริ่มต้นรหัสย่อของแบบฟอร์มการเข้าสู่ระบบ:

 // ขั้นตอนที่ 3: เริ่มต้นฟังก์ชันรหัสย่อ

add_action( 'init', 'njengah_add_login_shortcode' );

ข้อมูลโค้ดแบบเต็มเพื่อสร้างรหัสย่อแบบฟอร์มเข้าสู่ระบบใน WordPress

ตอนนี้ เราสามารถรวมข้อมูลโค้ดเหล่านี้ทั้งหมดไว้ในข้อมูลโค้ดเดียว และเพิ่มโค้ดลงใน functions.php ของธีม WordPress ที่ใช้งานอยู่ จากนั้นแสดงแบบฟอร์มการเข้าสู่ระบบ WordPress โดยใช้รหัสย่อ – [ njengah-login-form]

ต่อไปนี้คือข้อมูลโค้ดแบบเต็มที่คุณควรเพิ่มลงในไฟล์ functions.php เพื่อเพิ่มรหัสย่อของแบบฟอร์มการเข้าสู่ระบบ WordPress:

 /**
 * สร้างแบบฟอร์มเข้าสู่ระบบ WordPress ที่กำหนดเองโดยไม่ต้องใช้ปลั๊กอิน [รหัสย่อแบบฟอร์มเข้าสู่ระบบ WordPress ] 
 * @ผู้เขียน Joe Njengah 
 * @ ส่วนสำคัญ - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 */ 


// ขั้นตอนที่ 1: สร้างรหัสย่อ
ฟังก์ชัน njengah_add_login_shortcode () {
	add_shortcode( 'เจย์-ล็อกอิน-ฟอร์ม', 'njengah_login_form_shortcode' );
}

//ขั้นตอนที่ 2: การโทรกลับแบบสั้น
ฟังก์ชัน njengah_login_form_shortcode () {
	
	ถ้า (is_user_logged_in())
		
		กลับ '<p>ยินดีต้อนรับ คุณเข้าสู่ระบบ!</p>'; ?> 
		
		<div class ="njengah-login-tutorial" >  
		
			<?php ส่งคืน wp_login_form( 
							อาร์เรย์ ( 
								'echo' => เท็จ ,
								'label_username' => __( 'ชื่อผู้ใช้ของคุณ' ),
								'label_password' => __( 'รหัสผ่านของคุณ' ),
								'label_remember' => __( 'จดจำฉัน' )
			              )
			); ?> 
		
		</div>
  <?php 
   }

// ขั้นตอนที่ 3: เริ่มต้นฟังก์ชันรหัสย่อ
add_action( 'init', 'njengah_add_login_shortcode' );

//ขั้นตอนที่ 4 : ใช้รหัสย่อ [njengah-login-form] เพื่อฝังแบบฟอร์มการเข้าสู่ระบบบนหน้าหรือโพสต์

เมื่อคุณเพิ่มรหัสนี้ใน functions.php คุณควรสร้างหน้าเข้าสู่ระบบและเพิ่มรหัสย่อ [ njengah-login-form] เพื่อเผยแพร่แบบฟอร์มการเข้าสู่ระบบ แบบฟอร์มการเข้าสู่ระบบควรปรากฏตามภาพด้านล่าง:

การออกแบบแบบฟอร์มเข้าสู่ระบบ WordPress

ฉันได้เพิ่มสไตล์ต่อไปนี้เพื่อทำให้แบบฟอร์มการเข้าสู่ระบบน่าสนใจและออกแบบธีมที่ฉันใช้:

 .njengah-เข้าสู่ระบบ-กวดวิชา {
    พื้นหลัง: #6379a4;
    ช่องว่างภายใน: 20px;
    ความกว้างสูงสุด: 70%;
    ระยะขอบ: 0 อัตโนมัติ;
    สี: #fff;
}

.login-ป้ายรหัสผ่าน {
    ระยะขอบขวา: 120px;
}

.login-ชื่อผู้ใช้ {
    ช่องว่างภายใน: 30px;
}

สร้างเทมเพลตหน้าแบบกำหนดเองของแบบฟอร์มการเข้าสู่ระบบ

อีกวิธีหนึ่งในการสร้างหน้าเข้าสู่ระบบใน WordPress โดยไม่ต้องใช้ปลั๊กอินคือการสร้างเทมเพลตหน้าที่กำหนดเองและใช้ฟังก์ชัน wp_login_form() เพื่อเผยแพร่แบบฟอร์มการเข้าสู่ระบบในหน้านั้น

ต่อไปนี้เป็นรหัสสำหรับสร้างหน้าเข้าสู่ระบบแบบกำหนดเองที่อยู่ในแม่แบบของหน้าแบบกำหนดเอง:

 <?php
/**
 * ชื่อเทมเพลต: หน้าเข้าสู่ระบบ 
 */
 
 get_header(); 
 
 
 ถ้า (is_user_logged_in()){
	 
	     echo '<p>ยินดีต้อนรับ คุณเข้าสู่ระบบ!</p>'; 
		 
 }อื่น{ 
	 
	 wp_login_form( 

		 อาร์เรย์ (
				'echo' => จริง
				// ค่า 'เปลี่ยนเส้นทาง' เริ่มต้นจะนำผู้ใช้กลับไปที่ URI คำขอ
				'redirect' => ( is_ssl() ? 'https://' : 'http://' ) $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
				'form_id' => 'เข้าสู่ระบบ',
				'label_username' => __( 'ชื่อผู้ใช้ของคุณ' ),
				'label_password' => __( 'รหัสผ่านของคุณ' ),
				'label_remember' => __( 'จดจำฉัน' ),
				'label_log_in' => __( 'เข้าสู่ระบบ' ),
				'id_username' => 'user_login',
				'id_password' => 'user_pass',
				'id_remember' => 'จดจำ',
				'id_submit' => 'wp-ส่ง',
				'จำไว้' => จริง
				'value_username' => '',
				// ตั้งค่า 'value_remember' เป็น true เพื่อเริ่มต้นช่องทำเครื่องหมาย "Remember me" เพื่อทำเครื่องหมาย
				'value_remember' => เท็จ
			)
						
		);
    }			
	
get_footer();

บันทึกรหัสนี้ในไฟล์และตั้งชื่อว่า login-page.php และตรวจสอบให้แน่ใจว่าได้บันทึกไว้ในโฟลเดอร์รูทของธีม WordPress ของคุณ

สร้างหน้าใหม่และคุณจะเห็นเทมเพลตการเข้าสู่ระบบพร้อมใช้งานในตัวเลือกเทมเพลตแอตทริบิวต์ของหน้าดังที่แสดงด้านล่าง:

เลือกเทมเพลตและเผยแพร่หน้า เมื่อคุณตรวจสอบส่วนหน้า คุณจะเห็นแบบฟอร์มการเข้าสู่ระบบปรากฏขึ้นสำหรับผู้ใช้ที่ไม่ได้เข้าสู่ระบบ และข้อความต้อนรับจะปรากฏขึ้นสำหรับผู้ใช้ที่เข้าสู่ระบบ

วิธีสร้างเทมเพลตหน้าล็อกอิน wordpress

บทสรุป

ในบทความนี้ ฉันได้สรุปสองวิธีที่คุณสามารถเพิ่มแบบฟอร์มการเข้าสู่ระบบในหน้า WordPress คุณสามารถใช้ฟังก์ชันรหัสย่อเพื่อสร้างรหัสย่อแบบฟอร์มการเข้าสู่ระบบ WordPress หรือคุณสามารถใช้เทมเพลตหน้าแบบกำหนดเองเพื่อสร้างหน้าเข้าสู่ระบบใน WordPress โดยไม่ต้องใช้ปลั๊กอิน ฉันหวังว่าตอนนี้คุณสามารถใช้วิธีใดวิธีหนึ่งเหล่านี้เพื่อสร้างแบบฟอร์มการเข้าสู่ระบบส่วนหน้าที่กำหนดเองบนไซต์ WordPress ของคุณ

บทความที่คล้ายกัน

วิธีสร้างการแบ่งหน้า WordPress สำหรับประเภทโพสต์ที่กำหนดเอง
30 สุดยอดปลั๊กอินความปลอดภัย WordPress เพื่อปกป้องเว็บไซต์ของคุณ
วิธีสร้างหน้าใน WordPress โดยทางโปรแกรม
วิธีเข้าถึงแดชบอร์ดผู้ดูแลระบบ WordPress หรือเข้าสู่ระบบแดชบอร์ด WordPress ของคุณ
วิธีสร้างหน้ารับคำสั่งซื้อที่กำหนดเอง WooCommerce
วิธีเชื่อมต่อ Printful กับ WooCommerce
วิธีอัปเดตส่วนขยาย WooCommerce
วิธีเพิ่มช่องค้นหาที่ด้านบนของหน้าธีมหน้าร้าน
40+ ปลั๊กอินแบบฟอร์มการติดต่อ WordPress ที่ดีที่สุดสำหรับการติดต่อง่าย
วิธีลบหมวดหมู่ที่ไม่มีหมวดหมู่ใน WordPress WooCommerce
วิธีลบแถบด้านข้างออกจากหน้า WordPress หรือซ่อนแถบด้านข้างของ WordPress
วิธีสร้างการแบ่งหน้าแบบสอบถามแบบกำหนดเองใน WordPress ด้วยตัวอย่าง
WooCommerce vs Magento: แพลตฟอร์ม E-Commerce ใดดีที่สุด?
วิธีสำรองฐานข้อมูล WooCommerce
ปลั๊กอินฟอร์ม WordPress ที่ดีที่สุด 30 อันดับแรก » ปลั๊กอินฟอร์ม WordPress ที่ดีที่สุด
วิธีสร้างหน้าเข้าสู่ระบบและลงทะเบียนแยกต่างหากใน WooCommerce
35+ สุดยอดปลั๊กอินฟรีฟอร์ม WordPress
วิธีการโยกย้ายจาก Shopify ไปยัง WooCommerce