การสร้างแบบฟอร์มเข้าสู่ระบบ WordPress แบบกำหนดเองด้วย Flat UI

ปรับปรุงล่าสุด - 8 กรกฎาคม 2021

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

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

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

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

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

เริ่มต้นด้วยการสร้างโฟลเดอร์ชื่อ “เข้าสู่ระบบ” ในโฟลเดอร์ธีมของคุณ และเพิ่มไฟล์ .txt ที่มีชื่อเป็น custom -login-style.css จากนั้น คุณสามารถดำเนินการแก้ไขพื้นฐานบางอย่างเพื่อปรับแต่งและเพิ่มเอกลักษณ์ให้กับหน้าเข้าสู่ระบบ

เปลี่ยนพื้นหลัง

ในการอัปเดตสีพื้นหลังของหน้าหรือปุ่มเฉพาะ คุณจะต้องเลือก สีพื้นหลัง: #222222 และเปลี่ยนรหัส hexa เป็นสีที่คุณต้องการ ใช้จานสีเพื่อเลือกสีที่เข้ากับสุนทรียศาสตร์ของธุรกิจของคุณและดึงดูดสายตา

นอกจากนี้ หากคุณต้องการเปลี่ยนภาพพื้นหลังของหน้าเข้าสู่ระบบของคุณ ให้เลือกบรรทัดโค้ด background-image: url(logo_login.png') และแทนที่ logo_login.png ซึ่งเป็นชื่อไฟล์ด้วย URL ไฟล์รูปภาพที่อัปเดต .

ธุรกิจที่ต้องการให้ลูกค้าจดจำแบรนด์ของตนสามารถเปลี่ยนโลโก้ WordPress เป็นโลโก้ที่กำหนดเองได้ หลังจากบันทึกไฟล์ภาพโลโก้ที่กำหนดเองลงในโฟลเดอร์เข้าสู่ระบบแล้ว ให้แทนที่ชื่อไฟล์ด้วยโลโก้ที่กำหนดเองของคุณใน โค้ด background-image: url('logo_login')

การปรับแต่งแบบฟอร์มการเข้าสู่ระบบโดยการปรับช่องว่างภายในและระยะขอบ

นักพัฒนาสามารถปรับแบบฟอร์มการเข้าสู่ระบบเพื่อทำให้หน้าของพวกเขาน่าสนใจและเหมาะสมกับรูปลักษณ์ของเว็บไซต์ ตั้งแต่การเติมปุ่มไปจนถึงสีและขนาดตัวอักษรของป้ายกำกับ ฯลฯ คุณสามารถเพิ่มพื้นที่ว่างภายในปุ่มเพื่อให้ข้อความไม่ดูถูกบีบอัดโดยการเพิ่มช่องว่างภายใน เพียงเพิ่มตัวเลขในการเติมโค้ด : 12px 12px 12px 12px หากคุณต้องการสร้างพื้นที่เพิ่มเติมนอกปุ่มโดยที่องค์ประกอบโดยรอบไม่แน่นหนา คุณสามารถทำได้โดยเพิ่มพื้นที่ขอบในโค้ด ระยะขอบ: 12px 12px 12px 12px แม้แต่บางสิ่งที่ง่าย เช่น การเพิ่มพื้นที่สีขาวบางส่วนก็สามารถส่งผลกระทบต่อรูปลักษณ์สุดท้ายของหน้าการเข้าสู่ระบบของคุณโดยรวม และทำให้ดูรวมเข้าด้วยกันมากขึ้น

การเปลี่ยนขนาดตัวอักษรและสี

คุณสามารถเปลี่ยนขนาดฟอนต์ของข้อความในย่อหน้า ลิงก์ หรือฟิลด์ในแบบฟอร์มได้โดยใช้โค้ด ขนาดฟอนต์: 15px โดยการปรับตัวเลขให้เป็นขนาดที่คุณต้องการ สามารถทำได้เช่นเดียวกันสำหรับสีแบบอักษรโดยการอัปเดตสีในรหัส สี: #222222 และแทนที่สี

การแก้ไขข้อความแสดงข้อผิดพลาดในการเข้าสู่ระบบ

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

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

ปลั๊กอินปรับแต่งการเข้าสู่ระบบ

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

ตัวปรับแต่งการเข้าสู่ระบบ Colorlib

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

สรุป

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