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

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

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

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

(นอกจากนี้ยังถือเป็นแนวทางปฏิบัติที่ดีที่สุดในการรักษาความปลอดภัย WordPress ในการย้ายหน้าไปยัง URL ที่ไม่ค่อยชัดเจนนัก!) แม้ว่าโดยทั่วไปจะไม่ได้เป็นส่วนหนึ่งของการตั้งค่าธีม WordPress แต่การปรับแต่งหน้าเข้าสู่ระบบ WordPress นั้นค่อนข้างง่าย

วิธีเข้าถึงหน้าเข้าสู่ระบบ WordPress

คุณคงคุ้นเคยกับการเข้าถึงหน้านี้เป็นอย่างดี ไม่ว่าความรับผิดชอบของไซต์ของคุณจะรวมถึงอะไรก็ตาม แต่ในกรณีที่ใช้เวลานาน โดยทั่วไปจะพบได้ในไดเร็กทอรีรากของเว็บไซต์ โดยทั่วไปแล้วหน้าเข้าสู่ระบบจะเป็นเช่น www.mysite.com/wp-login.php อย่างที่คุณเห็น ตัวนี้ยังไม่ได้จัดสไตล์

ในบางกรณี อาจมีการติดตั้ง WordPress ในไดเร็กทอรีย่อยของตัวเอง จากนั้นจะเป็น www.mysite.com/directory-name/wp-login.php

วิธีปรับแต่งหน้าเข้าสู่ระบบ WordPress

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

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

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

สร้างโฟลเดอร์ใหม่สำหรับการปรับแต่ง

การจัดระเบียบเป็นกุญแจสำคัญในการเพิ่มการปรับแต่งให้กับธีม คุณจะต้องสร้างโฟลเดอร์ใหม่สำหรับการเปลี่ยนแปลงเหล่านี้โดยเฉพาะ ในการทำเช่นนั้น ให้ค้นหาธีมที่ใช้งานอยู่ในปัจจุบันและสร้างโฟลเดอร์ชื่อ “ล็อกอิน”

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

สไตล์ชีตนี้จะเชื่อมต่อได้อย่างไร จะต้องมีการอ้างอิงในไฟล์ functions.php ของธีม เปิดไฟล์ functions.php และวางส่วนย่อยต่อไปนี้ลงไป (อย่าลืมตั้งชื่อไฟล์ CSS ของคุณเอง หากคุณใช้ชื่ออื่นที่ไม่ใช่ login-styles.css )

 function custom_login() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . 'login/login-styles.css" />'; } add_action('login_head', 'custom_login');

การเปลี่ยนโลโก้

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

 <h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1>

เราต้องการทำให้ CSS เฉพาะเจาะจง ดังนั้นการกำหนดเป้าหมาย div ด้วยคลาส .login จะทำให้เราสามารถจัดรูปแบบหัวเรื่องและลิงก์ภายใน div นั้นได้

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

 .login h1 a { background-image: url('images/login-logo.png'); }

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

ทำไมถึงเปลี่ยนโลโก้เดิมไม่ได้? เหตุผลก็คือเมื่อ WordPress อัปเดต มันอาจถูกลบทิ้ง

ด้วยรูปแบบที่เรียบง่ายนี้ เราสามารถบอกลาโลโก้ WordPress ทั่วไปได้แล้ว การเปลี่ยนโลโก้นี้ทำให้รู้สึกเป็นส่วนตัวและมีแบรนด์มากขึ้น

จัดรูปแบบพื้นหลังที่กำหนดเอง

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

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

 body.login { background-image: url('images/example-image.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; }

หากรูปภาพไม่ปรากฏขึ้น ให้ตรวจสอบอีกครั้งว่าเส้นทางไปยังรูปภาพนั้นถูกต้อง

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

การปรับลิงค์โลโก้

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

หากต้องการเปลี่ยนค่าลิงก์เพื่อให้โลโก้เชื่อมโยงไปยังไซต์ WordPress ของคุณ ให้ใช้ฟังก์ชันนี้ (และอย่าลืมใส่ URL ของเว็บไซต์ของคุณเอง):

 function login_logo_url() { return 'https://www.mysite.com'; } add_filter('login_headerurl', 'login_logo_url');

หากคุณสงสัยว่าตัวกรองมาจากไหน เราต้องดูการอ้างอิงฟังก์ชันเพื่อค้นหา login_headerurl และ login_headertitle

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

 function login_logo_text() { return 'The Title'; } add_filter('login_headertitle', 'login_logo_text');

ตัวเลือกสไตล์เพิ่มเติม

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

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

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

• ธีม การเข้าสู่ระบบของฉัน
• เข้าสู่ระบบที่กำหนดเอง
• เครื่องมือปรับแต่งหน้าเข้าสู่ระบบแบบกำหนดเอง

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