วิธีสร้างหน้าเข้าสู่ระบบ WordPress แบบกำหนดเอง

ใช่แล้ว หน้าเข้าสู่ระบบ WordPress – หนึ่งในหน้ารู้จักมากที่สุดใน WordPress – ใช่ไหม

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

ทำไม? - คุณถาม.

นี่คือคำตอบ:

ทำไมคุณถึงต้องการหน้าเข้าสู่ระบบ WordPress แบบกำหนดเอง?

ปัญหามีสามเท่า:

1. การจราจร . ยิ่งคุณได้รับการเข้าชมมากเท่าใด คุณก็จะได้รับการเข้าชมที่ "แย่" จากผลลัพธ์โดยตรงมากขึ้นเท่านั้น การเข้าชมที่ไม่ดี ฉันหมายถึงสคริปต์และบอทที่เป็นอันตราย นักส่งสแปม และผู้ใช้ทุกประเภทที่มายังไซต์ของคุณโดยมีเจตนาไม่ดี การปรับแต่งหน้าเข้าสู่ระบบ WordPress ของคุณทำให้ไซต์ของคุณปลอดภัยยิ่งขึ้น
2. ไซต์ผู้ใช้หลาย คน หากไซต์ของคุณมีการจัดการโดยบุคคลหลายคน ไม่ว่าจะเป็นผู้ดูแลระบบหรือผู้เขียน/บล็อก การเข้าสู่ระบบหลายครั้งจะเกิดขึ้น การให้แบบฟอร์มการเข้าสู่ระบบที่กำหนดเองจะทำให้กระบวนการโดยรวมดีขึ้น
3. การสร้างแบรนด์ หน้าเข้าสู่ระบบเริ่มต้นนั้นดี แต่มีโลโก้ WordPress ขนาดใหญ่อยู่ตรงกลาง การเปลี่ยนสิ่งนี้และทำให้หน้าเข้าสู่ระบบดูเหมือนของคุณเองมากขึ้นอาจเป็นการสร้างแบรนด์ที่ดี สิ่งนี้ใช้ได้โดยเฉพาะหากคุณกำลังสร้างเว็บไซต์สำหรับลูกค้า การให้ประสบการณ์ที่สอดคล้องกันแก่ลูกค้าของคุณเป็นสิ่งที่พวกเขาจะประทับใจอย่างแน่นอน

หากข้อใดข้อหนึ่งข้างต้นน่าสนใจสำหรับคุณ คุณควรพิจารณาเปลี่ยนหน้าเข้าสู่ระบบเป็นหน้าที่กำหนดเอง โดยใช้วิธีดังนี้:

วิธีสร้างหน้าเข้าสู่ระบบ WordPress แบบกำหนดเอง

มีสองวิธีหลักที่คุณสามารถดำเนินการได้:

• วิธีการด้วย ตนเอง ,
• วิธี ปลั๊กอิน

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

ขอครอบคลุมทั้งสอง

การสร้างหน้าเข้าสู่ระบบแบบกำหนดเองด้วยตนเอง

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

ความสนุกเริ่มต้นด้วยการสร้างสำเนาของไฟล์ page.php และไฟล์ content-page.php

เปลี่ยนชื่อสำเนาใหม่เหล่านั้นเป็น page-login.php และ content-login.php ตามลำดับ

เปิด page-login.php และเปลี่ยนเพียงบรรทัดเดียว จากนี้:

 get_template_part( 'content', 'page' );

สำหรับสิ่งนี้:

 get_template_part( 'content', 'login' );

ตอนนี้ มาแก้ไข content-login.php และเพิ่มหนึ่งบรรทัดด้านล่าง <?php the_content(); ?> <?php the_content(); ?> . ชอบดังนั้น:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

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

ตอนนี้ มาสร้างหน้าใหม่ใน wp-admin แล้วเรียกง่ายๆ ว่า "เข้าสู่ระบบ" ตรวจสอบให้แน่ใจว่าลิงก์ถาวรคือ "เข้าสู่ระบบ" ด้วย:

การทำเช่นนี้จะช่วยให้ WordPress ใช้ไฟล์เทมเพลต page-login.php ของคุณโดยอัตโนมัติ

หากคุณเยี่ยมชมหน้าใหม่ของคุณตอนนี้ หน้าควรมีลักษณะดังนี้:

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

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(ข้อมูลโค้ดที่สร้างจาก: [1][2].)

ขณะนี้ หน้าเข้าสู่ระบบเดียวที่เข้าถึงได้คือหน้าใหม่ที่คุณสร้างขึ้น สิ่งที่ยอดเยี่ยมคือคุณสามารถแก้ไขได้โดยอิสระผ่านตัวแก้ไขหน้าเริ่มต้นของ WordPress (เช่นเดียวกับที่คุณแก้ไขหน้าอื่นๆ)

การสร้างหน้าเข้าสู่ระบบ WordPress แบบกำหนดเองด้วยปลั๊กอิน

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

ขั้นแรก ปลั๊กอินที่เราจะใช้คือ: ตัวปรับแต่งหน้าเข้าสู่ระบบแบบกำหนดเอง

หลังจากติดตั้งและเปิดใช้งาน เพียงไปที่ Appearance > Login Customizer ซึ่งคุณสามารถเปิดแผงเครื่องมือปรับแต่งได้

ตัวเลือกของปลั๊กอินนี้ค่อนข้างดี และช่วยให้คุณสามารถปรับเปลี่ยนสิ่งต่างๆ เช่น:

• ตั้งค่าโลโก้ให้ปรากฏแทนโลโก้ WordPress เริ่มต้น
• ตั้งค่าพื้นหลังสำหรับหน้าเข้าสู่ระบบทั้งหมด
• กำหนดพื้นหลังของแบบฟอร์มเอง
• ปรับสไตล์ของแบบฟอร์มและทุกรายละเอียดเล็กๆ น้อยๆ เกี่ยวกับแบบฟอร์ม (แบบอักษร ขนาด สี ฟิลด์)
• ติดตั้งส่วนเสริมความปลอดภัยเพื่อรับฟิลด์ captcha เพิ่มเติมในแบบฟอร์ม (เหมาะสำหรับป้องกันการเข้าสู่ระบบสแปม / บอท)

ตัวอย่างเช่น ใช้งานปลั๊กอินเพียงไม่กี่นาที และฉันได้ผลลัพธ์นี้:

ตัวเลือกปลั๊กอินอื่น

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

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

ดูวิดีโอนี้เพื่อดูภาพรวมวิธีการทำงานของปลั๊กอิน

คู่มือ หรือ ผ่านทางปลั๊กอิน ?

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