วิธีสร้างหน้าเข้าสู่ระบบ 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 ทั่วไปได้แล้ว การสลับโลโก้นี้ทำให้รู้สึกเป็นส่วนตัวและเป็นแบรนด์มากขึ้น

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

การใช้เครื่องมือพัฒนาเบราว์เซอร์ ทำให้สามารถศึกษาโครงสร้างได้ เมื่อตรวจสอบ คุณจะเห็นว่ามีการตั้งค่ารูปแบบพื้นหลังสำหรับเนื้อหาแล้ว สิ่งต่าง ๆ ค่อนข้างเป็นเรื่องทั่วไป ดังนั้นการทำสิ่งต่าง ๆ ให้เฉพาะเจาะจงมากขึ้นจะช่วยให้แน่ใจว่าคุณจะไม่ทำการเปลี่ยนแปลงทั่วโลกที่คุณไม่ต้องการ มีคลาสที่ใช้กับเนื้อหาที่เรียกว่า .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
ตอนนี้ลิงก์กำลังไปยังตำแหน่งที่ถูกต้อง แล้วข้อความชื่อล่ะ หากคุณวางเมาส์เหนือโลโก้ คุณจะเห็น “ขับเคลื่อนโดย WordPress” เป็นแท็กชื่อ นี่เป็นเรื่องปกติ แต่นี่ไม่ได้อธิบายอย่างครบถ้วนว่าลิงก์จะไปที่ใด วิธีนี้ค่อนข้างเร็วและง่ายต่อการแก้ไข ดังนั้นจึงคุ้มกับเวลาที่เหลือ สำหรับชื่อที่แม่นยำยิ่งขึ้น ให้เพิ่มฟังก์ชันง่ายๆ นี้
function login_logo_text() {
    return 'The Title';
}
add_filter('login_headertitle', 'login_logo_text');


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

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

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

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