วิธีปรับปรุงเทมเพลตหน้า 404 ของคุณใน WordPress (2 วิธี)

คุณต้องการปรับปรุงเทมเพลตหน้า 404 ของคุณใน WordPress หรือไม่?

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

ในบทความนี้ เราจะแสดงวิธีปรับแต่งเทมเพลตหน้า 404 ของคุณใน WordPress ทีละขั้นตอน

ทำไมต้องปรับปรุงเทมเพลตหน้า 404 ของคุณใน WordPress?

ผู้เข้าชมส่วนใหญ่ที่เข้าสู่หน้าเริ่มต้นของ WordPress 404 จะออกจากเว็บไซต์ WordPress ของคุณอย่างรวดเร็ว

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

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

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

นอกจากนี้ยังสามารถปรับปรุง WordPress SEO ของคุณได้ ดังนั้นคุณจะได้รับปริมาณการใช้เครื่องมือค้นหามากขึ้น

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

สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำเกี่ยวกับวิธีติดตามหน้า 404 และเปลี่ยนเส้นทางบน WordPress อย่างง่ายดาย

จากที่กล่าวมา มาดูกันว่าคุณจะปรับปรุงเทมเพลตหน้า 404 ของคุณใน WordPress ได้อย่างไร

วิดีโอสอน

หากคุณต้องการคำแนะนำที่เป็นลายลักษณ์อักษร ให้อ่านต่อไป

วิธีที่ 1 สร้างหน้า 404 แบบกำหนดเองใน WordPress โดยไม่มีรหัส

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

SeedProd เป็นเครื่องมือสร้างหน้า Landing Page ที่ดีที่สุดสำหรับ WordPress ช่วยให้คุณสร้าง แก้ไข และปรับแต่งหน้า WordPress โดยไม่ต้องเขียนโค้ดใดๆ

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

สิ่งแรกที่คุณต้องทำคือติดตั้งปลั๊กอิน SeedProd สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress

หมายเหตุ: มี SeedProd เวอร์ชันฟรีให้บริการ แต่เราจะใช้เวอร์ชัน Pro เนื่องจากมีเทมเพลตหน้า 404 ที่เราต้องการ

เมื่อเปิดใช้งาน คุณต้องไปที่ SeedProd » การตั้งค่า และป้อนรหัสใบอนุญาตของคุณ คุณสามารถค้นหาข้อมูลนี้ได้ในหน้าบัญชีของคุณบนเว็บไซต์ SeedProd

หลังจากนั้น ไปที่ SeedProd » Pages และคลิกปุ่ม 'ตั้งค่าหน้า 404' ในกล่องเมตา '404 Page'

ซึ่งจะนำคุณไปยังหน้าที่คุณสามารถเลือกเทมเพลตหน้า 404 ของคุณได้

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

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

หลังจากเลือกเทมเพลตแล้ว คุณจะเข้าสู่เครื่องมือสร้างการลากและวาง ซึ่งคุณสามารถเริ่มปรับแต่งหน้า 404 ของคุณได้

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

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

ในการดำเนินการนี้ ให้ลากบล็อก "ข้อความ" ไปที่หน้าเว็บของคุณ แล้วคลิกเพื่อเปลี่ยนข้อความ

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

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

ขั้นแรก ลากเหนือบล็อก 'พาดหัว' และเพิ่มพาดหัวใหม่ของคุณ

จากนั้นลากบล็อก 'ข้อความ' อื่นแล้วป้อนข้อความที่อธิบายบทความของคุณ

หลังจากนั้นให้คลิกที่ปุ่มเพื่อเปิดหน้าจอตัวแก้ไขปุ่ม

คุณสามารถปรับแต่งข้อความ สี ขนาด และอื่นๆ ได้ที่นี่

เพิ่มโพสต์ยอดนิยมของคุณไปยังหน้า WordPress 404 ของคุณ

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

วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการใช้ปลั๊กอิน MonsterInsights เป็นโซลูชันการวิเคราะห์ที่ดีที่สุดสำหรับ WordPress ที่ใช้โดยเว็บไซต์มากกว่า 3 ล้านแห่ง

ด้วยปลั๊กอินนี้ คุณสามารถเพิ่มบทความยอดนิยมได้ทุกที่บนเว็บไซต์ WordPress ของคุณ

สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำเกี่ยวกับวิธีแสดงบทความยอดนิยมตามจำนวนการดูใน WordPress

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

ในการดำเนินการนี้ เพียงลากบล็อก 'Shortcode' ไปที่หน้าของคุณ

จากนั้นป้อนรหัสย่อต่อไปนี้เพื่อแสดงบทความยอดนิยมของคุณ

ส่วน theme=“beta” หมายถึงการแสดงโพสต์ยอดนิยมของคุณ หากคุณต้องการดูว่าธีมต่างๆ เป็นอย่างไร ให้ไปที่ Insights » โพสต์ยอดนิยม แล้วคลิก 'วิดเจ็ตโพสต์ยอดนิยม'

ในส่วน 'เลือกธีม' คุณสามารถดูแต่ละธีมและชื่อได้

คุณยังสามารถเพิ่มพาดหัวเหนือโพสต์ยอดนิยมของคุณโดยทำตามขั้นตอนเดียวกับด้านบน

เพิ่มแบบฟอร์มการติดต่อในหน้า WordPress 404 ของคุณ

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

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

สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีสร้างแบบฟอร์มติดต่อใน WordPress

เมื่อเปิดใช้งานและตั้งค่าปลั๊กอินแล้ว คุณสามารถลากบล็อก 'แบบฟอร์มติดต่อ' ไปที่หน้าของคุณ

จากนั้น สิ่งที่คุณต้องทำคือเลือกแบบฟอร์มติดต่อจากรายการแบบเลื่อนลง

คุณต้องสร้างแบบฟอร์มติดต่อก่อนจึงจะเพิ่มลงในหน้า 404 ได้

คุณยังสามารถเพิ่มบล็อค 'พาดหัว' หรือ 'ข้อความ' เหนือแบบฟอร์มการติดต่อของคุณ

ทำตามขั้นตอนเดียวกับด้านบนเพื่อเพิ่มบล็อกเหล่านั้น

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

หากคุณต้องการเผยแพร่หน้าเว็บของคุณแบบสด ให้เลือกลูกศรแบบเลื่อนลงถัดจาก "บันทึก" แล้วคลิก "เผยแพร่"

คุณยังสามารถเปลี่ยนโลโก้และเมนูการนำทางได้ด้วยการคลิกและทำการเปลี่ยนแปลงด้วยแผงทางด้านซ้าย จากนั้นทำตามขั้นตอนการแก้ไขเดียวกันกับด้านบน

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

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

ในการทำให้หน้า 404 ใหม่ของคุณใช้งานได้ ให้กลับไปที่ SeedProd » Pages แล้วสลับการสลับ '404 Page' เป็น 'Active'

ตอนนี้ ผู้เยี่ยมชมของคุณจะเห็นหน้า 404 ที่มีการแปลงสูงของคุณ แทนที่จะเป็นตัวเลือกเริ่มต้น

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

วิธีที่ 2 สร้างหน้า 404 ที่กำหนดเองใน WordPress โดยการเพิ่มโค้ด

วิธีนี้ไม่เหมาะกับมือใหม่เพราะคุณจะต้องเพิ่มโค้ดและแก้ไขไฟล์ธีมของ WordPress

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

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

ในการแก้ไขไฟล์นี้ คุณต้องเชื่อมต่อกับบัญชีโฮสติ้ง WordPress ของคุณด้วยไคลเอนต์ FTP หรือเครื่องมือจัดการไฟล์

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

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

แสดงโพสต์ยอดนิยมในหน้า 404

สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน WordPress Popular Posts ฟรี เป็นหนึ่งในปลั๊กอินโพสต์ยอดนิยมที่ดีที่สุดสำหรับ WordPress

สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress

เมื่อเปิดใช้งาน คุณจะต้องเพิ่มแท็กเทมเพลตนี้ลงในไฟล์ 404.php ของคุณ ซึ่งคุณต้องการแสดงโพสต์ยอดนิยม

<?php wpp_get_mostpopular(); ?>

แสดงโพสต์ที่มีความคิดเห็นมากที่สุดใน 404 หน้า

ในการเพิ่มบทความที่มีความคิดเห็นมากที่สุดในหน้า WordPress 404 ของคุณ เราจะใช้ปลั๊กอินเดียวกับที่คุณเปิดใช้งานด้านบน

เพียงเพิ่มแท็กเทมเพลตต่อไปนี้ที่คุณต้องการแสดงโพสต์ที่มีความคิดเห็นมากที่สุด

<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>

คุณยังสามารถดูคำแนะนำของเราเกี่ยวกับวิธีแสดงบทความที่มีความคิดเห็นส่วนใหญ่ใน WordPress

แสดงกระทู้ล่าสุดบน 404 หน้า

มีหลายวิธีในการแสดงโพสต์ล่าสุดบน WordPress

วิธีที่ง่ายที่สุดคือการเพิ่มแท็กเทมเพลตนี้ในเทมเพลต 404 เพื่อแสดงโพสต์ล่าสุดของคุณ

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>

แสดงโพสต์แบบสุ่มใน 404 หน้า

หากคุณต้องการแสดงรายการโพสต์แบบสุ่มใน WordPress คุณสามารถเพิ่มโค้ดนี้ในเทมเพลต 404 ที่คุณต้องการแสดงรายการโพสต์แบบสุ่มจากไซต์ของคุณ

<ul>
<?php 
$posts = get_posts('orderby=rand&numberposts=5'); 
   foreach($posts as $post)  ?>
        <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </li>
   <?php  ?>
</ul>

เพิ่มคลังข้อมูลรายเดือนด้วยคลังข้อมูลขนาดกะทัดรัด

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

ที่ WPBeginner เราแสดงไฟล์เก็บถาวรรายเดือนของเราในหน้า 404 ของเราโดยใช้ปลั๊กอิน Compact Archives ปลั๊กอินนี้ได้รับการพัฒนาและดูแลโดยทีมงานของเรา

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

เมื่อเปิดใช้งานและตั้งค่าปลั๊กอินแล้ว เพียงเพิ่มรหัสต่อไปนี้ในไฟล์ 404.php ของคุณ

<p><strong>By Date</strong></p>
<ul>
<?php compact_archive($); ?>
</ul>

เมื่อผู้ใช้เข้าสู่หน้า 404 ของคุณ พวกเขาจะเห็นคลังบทความของคุณ

นี่คือลักษณะที่ปรากฏในหน้า 404 ของเรา

เทมเพลตตัวอย่าง 404 สำหรับ WordPress

นี่คือตัวอย่างไฟล์ 404.php ที่อิงตามเทมเพลตหน้า 404 หน้า 404 ของธีม WordPress ที่เป็นค่าเริ่มต้น

<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();
?>

	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->

	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
			
			<h4>While you're here, check out some of our popular content:</h4>
 
<div class="col1">
<div class="col-header">          
<strong>Popular</strong>
</div>
<?php wpp_get_mostpopular(); ?>
</div>
 
<div class="col2">
<div class="col-header">          
<strong>Comments</strong>
</div>
 <?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
</div>
 
<div class="col3">
<div class="col-header">          
<strong>Recent</strong>
</div>
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 5, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
</div>
			
		</div><!-- .page-content -->
	</div><!-- .error-404 -->

<?php
get_footer();

เปรียบเทียบเทมเพลต 404 นี้กับเทมเพลตเริ่มต้นใน Twenty Twenty-One

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

หลังจากนั้น เราได้เพิ่ม CSS ที่กำหนดเองลงในสไตล์ชีตของธีม WordPress เพื่อแบ่งออกเป็นคอลัมน์ต่างๆ

สำหรับรายละเอียดเพิ่มเติม โปรดดูคำแนะนำในการเพิ่ม CSS ที่กำหนดเองลงในไซต์ WordPress ของคุณอย่างง่ายดาย

.col1, .col2, .col3  
width:30%;
float:left;
padding:0px 10px 10px 10px;
margin:0px;

.col3:after
clear:both;

.col-header  
background:#28303D;
color:#D1E3DD;
margin:0px;
padding:1px;
text-align:center;

นี่คือผลลัพธ์สุดท้ายหลังจากเพิ่มโค้ดเพจ 404 ที่กำหนดเองด้านบน

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

หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลจากบทแนะนำวิดีโอ YouTube Channel สำหรับ WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook