วิธีสร้างหน้าล็อกอินที่กำหนดเองอย่างเหมาะสมใน WordPress (ทีละขั้นตอน)

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


เคยสงสัยไหมว่าคุณสามารถสร้างหน้าเข้าสู่ระบบแบบกำหนดเองใน WordPress ได้ไหม?

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

ในบทความนี้เราจะแสดงวิธีสร้างหน้าเข้าสู่ระบบแบบกำหนดเองใน WordPress.

Contents

การสร้างหน้าเข้าสู่ระบบ WordPress แบบกำหนดเอง – สารบัญ

ทำไมต้องสร้างหน้าเข้าสู่ระบบที่กำหนดเอง?

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

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

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

การเลือกปลั๊กอินที่เหมาะสมสำหรับการสร้างหน้าเข้าสู่ระบบที่กำหนดเอง

ในที่เก็บปลั๊กอิน WordPress อย่างเป็นทางการคุณสามารถค้นหาปลั๊กอินที่แตกต่างกันจำนวนมากที่ช่วยให้คุณสร้างหน้าเข้าสู่ระบบแบบกำหนดเองได้อย่างง่ายดาย ในบทความนี้เราจะดู 2 ปลั๊กอินที่แตกต่างกัน: WPForms และ ธีมเข้าสู่ระบบของฉัน.

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

ข้อดีของ WPForms คือ:

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

เลือกธีมเข้าสู่ระบบของฉัน หากคุณต้องการสร้างหน้าเข้าสู่ระบบแบบง่าย ๆ ได้อย่างง่ายดาย.

ด้านล่างเป็นคุณสมบัติบางประการของ Theme My Login:

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

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

วิธีที่ 1: การใช้ WPForms เพื่อสร้างหน้าเข้าสู่ระบบ

WPForms

ลองมาดูวิธีการสร้างหน้าเข้าสู่ระบบด้วย WPForms.

ขั้นตอนที่ 1: ติดตั้ง WPForms บนเว็บไซต์ของคุณ

สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งาน ปลั๊กอิน WPForms. ตรวจสอบให้แน่ใจเพื่อตรวจสอบรหัสใบอนุญาตของคุณโดยไปที่ WPForms »การตั้งค่า. คุณสามารถรับรหัสใบอนุญาตจากบัญชีของคุณบนเว็บไซต์ WPForms.

เพื่อให้สามารถสร้างหน้าเข้าสู่ระบบแบบกำหนดเองด้วย WPForms คุณจะต้องติดตั้ง addon การลงทะเบียนผู้ใช้ โดยไปที่ WPForms » Addons. คลิก ติดตั้ง Addon ถัดจาก Addon ลงทะเบียนผู้ใช้แล้วคลิกเปิดใช้งาน.

เมื่อเปิดใช้งาน addon แล้วคุณสามารถไปข้างหน้าและสร้างแบบฟอร์มการเข้าสู่ระบบของผู้ใช้ด้วย WPForms.

ขั้นตอนที่ 2: สร้างฟอร์มเข้าสู่ระบบที่กำหนดเอง

ด้วยเครื่องมือสร้างการลากและวางที่ทรงพลังของ WPForms คุณสามารถสร้างแบบฟอร์มเข้าสู่ระบบในเวลาเพียงไม่กี่นาทีไม่ใช่ชั่วโมงโดยไม่ต้องเขียนโค้ดบรรทัดเดียว.

หากต้องการสร้างแบบฟอร์มการเข้าสู่ระบบโปรดไปที่ WPForms »เพิ่มใหม่. ในหน้าการตั้งค่าแบบฟอร์มคุณจะต้องเลือก แบบฟอร์มการเข้าสู่ระบบของผู้ใช้ แม่แบบเพื่อสร้างแบบฟอร์มเข้าสู่ระบบ.

แม่แบบฟอร์มล็อกอินของผู้ใช้

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

แบบฟอร์มเข้าสู่ระบบของผู้ใช้ใน wordpress

คุณสามารถปรับแต่งฟิลด์ใดก็ได้โดยคลิกที่มันในเครื่องมือสร้างเพจ จากนั้นคุณสามารถกำหนดเองได้ตามต้องการในแผงด้านซ้าย.

ขั้นตอนที่ 3: การกำหนดค่าแบบฟอร์ม

หากต้องการกำหนดการตั้งค่าทั่วไปคุณสามารถไปที่ การตั้งค่า»ทั่วไป. ในหน้านี้คุณสามารถปรับแต่งชื่อฟอร์มคำอธิบายส่งข้อความปุ่ม ฯลฯ.

แบบฟอร์มเข้าสู่ระบบการตั้งค่าทั่วไป

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

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

ยืนยันการตั้งค่าหน้าเข้าสู่ระบบที่กำหนดเอง

ขั้นตอนที่ 4: เผยแพร่แบบฟอร์ม WordPress ของคุณ

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

ลองมาดูวิธีการเผยแพร่ฟอร์มของคุณในโพสต์หรือหน้า.

สร้างโพสต์หรือหน้าใหม่ใน WordPress แล้วคลิกที่ + ไอคอนในเครื่องมือแก้ไขบล็อก Gutenberg คุณสามารถค้นหาบล็อก WPForms และคลิกที่มัน.

เพิ่มแบบฟอร์ม

จากนั้นเลือกแบบฟอร์มการเข้าสู่ระบบในบล็อก WPForms และจะโหลดโดยอัตโนมัติในโพสต์ / หน้า.

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

หลังจากเพิ่มแบบฟอร์มคุณสามารถเผยแพร่โพสต์ / หน้าของคุณ.

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

วิดเจ็ตแบบฟอร์มเข้าสู่ระบบ

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

วิธีที่ 2: การใช้ชุดรูปแบบการเข้าสู่ระบบของฉันเพื่อสร้างหน้าเข้าสู่ระบบ

ธีมปลั๊กอินเข้าสู่ระบบของฉัน

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

ปลั๊กอินทำงานนอกกรอบโดยไม่มีการกำหนดค่าเพิ่มเติมใด ๆ.

อย่างไรก็ตามหากคุณต้องการปรับแต่งการตั้งค่าปลั๊กอินคุณสามารถคลิกเมนูธีมเข้าสู่ระบบของฉันในแผงควบคุม WordPress ของคุณ.

ธีมการตั้งค่าการเข้าสู่ระบบของฉัน

จากนั้นคุณสามารถเปลี่ยนประเภทการเข้าสู่ระบบและการลงทะเบียน นอกจากนี้คุณยังสามารถปรับทาก URL สำหรับการเข้าสู่ระบบออกจากระบบการลงทะเบียนรหัสผ่านที่หายไปและรีเซ็ตหน้ารหัสผ่าน.

วิธีที่ 3: กำหนดหน้าเข้าสู่ระบบ WordPress ที่มีอยู่โดยไม่มีปลั๊กอิน

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

เพียงเพิ่มรหัสนี้ลงในไฟล์ functions.php ของธีมของคุณหรือในปลั๊กอินเฉพาะไซต์:

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

// หน้าเข้าสู่ระบบที่กำหนดเอง
ฟังก์ชัน clp_login_head () {

echo ”; // เริ่มต้นสไตล์ที่กำหนดเอง
echo ‘.login #nav a, .login #backtoblog a {color: #! important; } ‘; // สีลิงค์ของหน้าเข้าสู่ระบบ
echo ‘.login h1 a {background: url ("’ get_bloginfo (‘stylesheet_directory’) ‘/ images / IMAGE ไปที่นี่"); ความกว้าง: px; ความสูง: px; } ‘; // โลโก้หน้าเข้าสู่ระบบ
echo ‘.login .button-primary {background: #; border-color: #; } ‘; // สีปุ่มของหน้าเข้าสู่ระบบ
echo ”; // สิ้นสุดสไตล์ที่กำหนดเอง

}
add_action (‘login_head’, ‘clp_login_head’);

คุณสามารถเปลี่ยน CSS และ URL รูปภาพในรหัสด้านบนเพื่อเพิ่มสไตล์ที่กำหนดเองสำหรับหน้าเข้าสู่ระบบ WordPress.

วิธีที่ 4: แสดงฟอร์มเข้าสู่ระบบ WordPress ทุกที่ไม่มีปลั๊กอิน

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

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

<?PHP
wp_login_form ();
?>

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

<?php $ args = array (
‘echo’ => จริง,
‘redirect’ => ‘http://wpsnipp.com’,
‘form_id’ => ‘แบบฟอร์มเข้าสู่ระบบ’,
‘label_username’ => __ (‘ชื่อผู้ใช้’),
‘label_password’ => __ (‘รหัสผ่าน’),
‘label_remember’ => __( ‘จดจำฉัน’ ),
‘label_log_in’ => __( ‘เข้าสู่ระบบ’ ),
‘id_username’ => ‘USER_LOGIN’,
‘id_password’ => ‘user_pass’,
‘id_remember’ => ‘จดจำฉัน’,
‘id_submit’ => ‘WP-submit’,
‘จดจำ’ => จริง,
‘value_username’ => โมฆะ,
‘value_remember’ => เท็จ);
wp_login_form ($ args);
?>

แค่นั้นแหละ!

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map