วิธีแก้ไขหน้า 404 ใน WordPress (คู่มือการปรับแต่ง) | บัฟ WP

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

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

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

404 หน้าคืออะไร

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

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

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

กายวิภาคของเพจ 404 ที่ดี

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

● ข้อความแสดงข้อผิดพลาด – ผู้ใช้ควรตระหนักถึงปัญหาตั้งแต่เข้าสู่หน้า 404 ให้ชัดเจนเพื่อให้ทุกคนเข้าใจ

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

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

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

วิธีแก้ไขหน้า 404 ใน WordPress

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

แก้ไขหน้า 404 ผ่านไคลเอนต์ FTP

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

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

เทมเพลตหน้า 404

 <?php /** * The template for displaying 404 pages (Not Found) * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ get_header(); ?> <div class="content-area"> <div class="site-content" role="main"> <header class="page-header"> <h1 class="page-title"><?php _e( 'Not Found', 'twentythirteen' ); ?></h1> </header> <div class="page-wrapper"> <div class="page-content"> <h2><?php _e( 'This is somewhat embarrassing, isn't it?', 'twentythirteen' ); ?></h2> <p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p> <?php get_search_form(); ?> </div><!-- .page-content --> </div><!-- .page-wrapper --> </div><!-- #content --> </div><!-- #primary --> <?php get_footer(); ?>

ที่มา : การสร้างหน้าข้อผิดพลาด 404 บน WordPress Codex

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

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

• แสดงชื่อบทความเจ็ดโพสต์ล่าสุด - สิ่งที่คุณต้องทำคือวางส่วนย่อยของโค้ดนี้ลงในไฟล์ 404.php:

 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 7, 'format' => 'custom', 'before' => '<span class="my-post-title">', 'after' => '</span>, ' ) ); ?>

• แสดงหัวข้อสุ่มเจ็ดโพสต์ วางรหัสต่อไปนี้เพื่อแสดงเจ็ดโพสต์สุ่ม:

 <ul> <?php $rand_posts = get_posts( array( 'posts_per_page' => 5, 'orderby' => 'rand' ) ); if ( $rand_posts ) { foreach ( $rand_posts as $post ) : setup_postdata( $post ); ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; wp_reset_postdata(); } ?> </ul>

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

 https://example.com/dfdfddfd

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

ErrorDocument 404 /index.php?error=404

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

แก้ไข 404 หน้าผ่านตัวแก้ไขธีม (ไม่แนะนำ)

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

แก้ไข 404 เพจผ่านตัวสร้างเพจ

วิธีนี้ปลอดภัย ง่าย และมีประสิทธิภาพ คุณอาจคุ้นเคยกับเครื่องมือสร้างเพจ เช่น Elementor, Divi Builder, Beaver Builder, SeedProd หรือ Themify Builder สิ่งที่คุณเลือกไม่เกี่ยวข้อง ตราบใดที่คุณเข้าใจมันดี เครื่องมือสร้างเหล่านี้ช่วยให้คุณสร้างหน้า 404 ที่ยอดเยี่ยมโดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว นี่เป็นทางออกที่ดีที่สุดหากคุณกังวลเกี่ยวกับการวางข้อมูลโค้ดลงในไฟล์ไซต์ของคุณ

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

ปลั๊กอิน WordPress 404 หน้า

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

404page  

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

ติดตั้งและเปิดใช้งานปลั๊กอิน ถัดไป สร้างหน้า 404 เหมือนกับที่คุณทำกับหน้าที่เหลือในไซต์ของคุณ จากแดชบอร์ดผู้ดูแลระบบ WordPress ของคุณ ให้ไปที่ Appearance > 404 Error Page และเลือกหน้าที่คุณเพิ่งสร้างขึ้นเพื่อเป็นหน้าข้อผิดพลาด 404 แบบกำหนดเองของไซต์ของคุณ

ปลั๊กอินนี้ไม่อนุญาตให้เปลี่ยนเส้นทางหน้าเว็บ มันแค่บอกบอทการค้นหาว่าหน้าเว็บหายไป 404page เป็นโครงการส่วนบุคคลของนักพัฒนา ดังนั้นจึงไม่มีหน่วยงานใดอยู่เบื้องหลังปลั๊กอินนี้ พิจารณาว่าปลั๊กอินมีการติดตั้งที่ใช้งานอยู่ 100,000 ครั้งและคะแนนเกือบสมบูรณ์แบบ – 4.9 ดาวจาก 5 ดาว ภายใต้สถานการณ์เหล่านี้ ผู้พัฒนาปลั๊กอินสมควรได้รับความชื่นชมจากเรา!

404 Redirect ทั้งหมดไปยังโฮมเพจ & การเปลี่ยนเส้นทางรูปภาพที่ใช้งานไม่ได้  

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

ตัวปรับแต่ง Colorlib 404  

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

ใช้ตัวสร้างเพจหรือทำผ่านธีมของคุณ

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

● สดชื่น

● องค์ประกอบ

● ตัวสร้างบีเวอร์

● ตัวสร้าง Divi

● ที่มาของเว็บไซต์

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

ในด้านที่สดใส Astra, OceanWP และธีมอื่นๆ ที่มีผู้ใช้มากกว่า 500.000 คนขยายไลบรารีไซต์เริ่มต้นมากขึ้นทุกเดือน

ไปยังคุณ

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