วิธีสร้างหน้าข้อผิดพลาด WordPress 404 แบบกำหนดเอง

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

ทำไมต้องสร้างหน้า 404 แบบกำหนดเองสำหรับ WordPress?

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

อันดับแรก ให้ดูที่หน้าทั่วไปที่เราพยายามหลีกเลี่ยง

หน้า 404 ทั่วไป

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

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

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

ตัวอย่างหน้า 404 ที่กำหนดเอง

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

1. Google

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

2. WordPress.org

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

3. WordPress.com

หน้า 404 ของ WordPress.com ลบส่วนหัวและส่วนท้าย โดยจะแสดงกราฟิก ชื่อ คำอธิบายพร้อมลิงก์ที่คลิกได้ ช่องค้นหา และโลโก้ WordPress.com ลิงค์มีประโยชน์

4. ธีมที่หรูหรา

หน้า 404 ของธีมที่สง่างาม (เพราะฉันรู้ว่าคุณกำลังจะดูอยู่ดี) แสดงส่วนหัว ET ชื่อขนาดใหญ่พร้อมคำอธิบายเล็กน้อย และปุ่มเป็น CTA คุณสามารถเข้าถึงเกือบทุกอย่างได้จากที่นี่

5. ยี่สิบยี่สิบเอ็ด

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

6. ยี่สิบยี่สิบ

ธีม Twenty Twenty ของ WordPress แสดงส่วนหัวและส่วนท้าย เนื้อหาจะแสดงชื่อเรื่องขนาดใหญ่ตรงกลาง คำอธิบาย และช่องค้นหา ทั้งหมดใช้สีของธีม

7. หย่อน

หน้า 404 ของ Slack (ไม่ใช่ WordPress) แสดงช่องตรงกลางพร้อมข้อมูลเกี่ยวกับข้อผิดพลาดพร้อมลิงก์ไปยังศูนย์ช่วยเหลือ ทุกเมนูอยู่ที่นี่ด้วย ส่วนที่น่าสนใจคือพื้นหลัง เป็นพื้นหลังการ์ตูนที่เลื่อนไปทางขวาหรือซ้ายเพื่อตามเมาส์ของคุณ สัตว์เคลื่อนไหวเคลื่อนที่ผ่านหน้าจอ

8. อเมซอน

หน้า 404 ของ Amazon (ไม่ใช่ WordPress) ประกอบด้วยโลโก้ Amazon พร้อมช่องค้นหา ข้อความขนาดใหญ่ ข้อความขนาดเล็กที่มีลิงก์ไปยังหน้าแรก และรูปภาพของสัตว์พร้อมลิงก์เพื่อเรียนรู้เพิ่มเติม ประกอบด้วยรูปภาพต่างๆ มากมายที่สามารถแสดงได้ พวกเขาถูกสุ่มเลือก

404 หน้าเนื้อหา

ดังนั้นหน้า 404 ต้องการอะไร? เราเห็นองค์ประกอบทั่วไปสองสามอย่างในตัวอย่างด้านบน

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

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

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

มันง่ายมาก 404 หน้าไม่ต้องการเนื้อหาจำนวนมาก แค่พอจะช่วยได้บ้าง

ตัวอย่างข้างต้นรวมถึง:

• สีพื้นหลังและลวดลายที่เข้ากับเว็บไซต์/
• ชื่อที่มีข้อความสั้นๆ เกี่ยวกับข้อผิดพลาด
• ข้อความขนาดใหญ่แสดงว่าเป็นหน้า 404
• ปุ่มบางปุ่มให้ทิศทางแก่ผู้เยี่ยมชม

เรียบง่ายแต่มีสไตล์และมีประโยชน์ นั่นคือทั้งหมดที่คุณต้องการ

มาดูวิธีสร้างหน้า 404 แบบกำหนดเองสำหรับ WordPress โดยใช้แนวคิดเนื้อหาที่เราเพิ่งพูดถึงกัน

วิธีสร้างหน้า 404 แบบกำหนดเองใน WordPress ด้วยตัวสร้างธีม Divi

Divi Theme Builder ทำให้ง่ายต่อการสร้างและกำหนดหน้า 404 ธีมที่หรูหรามีหน้า 404 ที่สร้างไว้ล่วงหน้าหลายหน้าซึ่งคุณสามารถดาวน์โหลดได้ฟรี คุณสามารถปรับแต่งได้ตามต้องการ เป็นวิธีที่ดีในการเริ่มต้นออกแบบหน้า 404 หากคุณต้องการ คุณสามารถสร้างมันขึ้นมาใหม่ได้

ตัวอย่างข้างต้นมาจากแพ็กเลย์เอาต์ของตัวสร้างธีมที่สี่ มี 404 หน้ามากมายในบล็อก ET หากต้องการค้นหา ให้ค้นหา "ชุดรูปแบบตัวสร้างชุดรูปแบบ" หรือตรวจสอบได้ที่นี่:

• ดาวน์โหลด Theme Builder Pack ฟรีชุดแรกสำหรับ Divi
• ดาวน์โหลด Theme Builder Pack ฟรีชุดที่สองสำหรับ Divi
• ดาวน์โหลด Theme Builder Pack ฟรีชุดที่สามสำหรับ Divi
• ดาวน์โหลด Theme Builder Pack ฟรีชุดที่สี่สำหรับ Divi
• ดาวน์โหลด Theme Builder Pack ฟรีชุดที่ 5 สำหรับ Divi
• ดาวน์โหลดชุดตัวสร้างธีมฟรีชุดที่หกสำหรับ Divi

การนำเข้าหน้า 404 แบบกำหนดเองไปยังตัวสร้างธีม Divi

คุณจะพบ Divi Theme Builder ในแดชบอร์ด WordPress โดยไปที่ Divi > Theme Builder ซึ่งจะเปิดหน้าที่คุณสามารถสร้างหรือนำเข้าเทมเพลตและกำหนดได้ ที่มุมขวาบน คุณจะเห็นไอคอนนำเข้า คลิกไอคอนนี้เพื่อนำเข้าเทมเพลตหน้า 404 ของคุณ

หมายเหตุ – สำหรับบทช่วยสอนเกี่ยวกับการใช้ Divi Theme Builder ให้ค้นหา “ตัวสร้างธีม” ที่นี่ในบล็อกของ Elegant Themes

โมดอลจะเปิดขึ้นซึ่งคุณสามารถนำเข้าเทมเพลตของคุณได้ เลือก นำเข้า และนำทางไปยังไฟล์ของคุณภายใต้ เลือกไฟล์ ตัวเลือกในการแทนที่ค่าเริ่มต้นและการมอบหมายจะถูกเลือกตามค่าเริ่มต้น ฉันขอแนะนำให้ปล่อยให้พวกเขาเลือก คลิกเพื่อนำเข้าเทมเพลตที่ด้านล่างของโมดอล ฉันกำลังนำเข้าหน้า 404 สำหรับ Crowdfunding Layout Pack

โดยการนำเข้าหน้า 404 หน้าจะถูกกำหนดโดยอัตโนมัติ ถัดไป คลิกที่ไอคอนแก้ไขเพื่อเปิดตัวสร้าง

ตอนนี้ ทำการแก้ไขภายในแต่ละโมดูลโดยเพิ่มลิงก์ รูปภาพ สี ข้อความ ฯลฯ บันทึกเลย์เอาต์แล้วคลิก x ที่มุมขวาบนเพื่อปิดตัวสร้าง

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

การสร้างหน้า 404 แบบกำหนดเองด้วยตัวสร้างธีม Divi

ในตัวสร้างธีม ให้เลือกเพื่อเพิ่มเทมเพลตใหม่

ซึ่งจะเปิดการตั้งค่าเทมเพลต เลื่อนไปที่ด้านล่างและเลือก 404 Page ภายใต้ Other จากนั้น คลิก สร้างเทมเพลต การตั้งค่าเทมเพลตจะปิดลง

ตอนนี้คุณสามารถสร้างหน้า 404 ได้แล้ว ส่วนใหญ่ไม่ใช้ส่วนหัวหรือส่วนท้าย เลือก เพิ่มเนื้อหาที่กำหนดเอง

ซึ่งจะแสดงการเลือกสองรายการเพื่อให้คุณสร้างเนื้อหาแบบกำหนดเองหรือเพิ่มจากไลบรารีได้ เลือก สร้างเนื้อหาที่กำหนดเอง

สร้างหน้า 404 ด้วย Divi Builder ตามปกติ บันทึกและออก.

สุดท้าย บันทึกการเปลี่ยนแปลงของคุณ คุณทำเสร็จแล้ว

จบความคิดเกี่ยวกับการสร้างหน้า 404 แบบกำหนดเองสำหรับ WordPress

นั่นคือรูปลักษณ์ของเราในการสร้างหน้า 404 แบบกำหนดเองสำหรับ WordPress 404 หน้าต้องมีประโยชน์ ขออภัย หน้า WordPress 404 ทั่วไปไม่มีประโยชน์ และมอบประสบการณ์การใช้งานที่ไม่ดีแก่ผู้ใช้ โชคดีที่คุณสามารถสร้างหน้า 404 ของคุณเองได้โดยใช้ Divi Theme Builder

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

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

รูปภาพเด่นผ่าน Letters-Shmetters / shutterstock.com