วิธีสร้างหน้า 404 ที่กำหนดเองในธีมลูกของ WordPress

ไม่ว่าเว็บไซต์ของคุณจะได้รับการออกแบบและออกแบบอย่างดีเพียงใด ผู้ใช้จะพบหน้า 404 ในบางจุด อาจเป็นเรื่องง่ายๆ เหมือนกับการพิมพ์ URL ที่มีการสะกดผิด ตัวอย่างเช่น หากคุณมีหน้าติดต่อที่ www.website.com/contact และมีคนพยายามเข้าสู่ www.website.com/contacts มีความเป็นไปได้สูงที่พวกเขาจะถูกเปลี่ยนเส้นทางไปยังหน้า 404 นอกจากนี้ การปรับเนื้อหาเว็บไซต์อาจไม่ครอบคลุมถึงหน้าที่สามารถย้ายได้โดยไม่ต้องเปลี่ยนเส้นทางเสมอไป หวังว่าประสบการณ์นี้จะไม่เกิดขึ้นกับผู้ใช้ของคุณบ่อยเกินไป แต่เมื่อเกิดขึ้น ก็เป็นโอกาสที่จะให้ความช่วยเหลือและสร้างสิ่งที่มีเอกลักษณ์ให้กับแบรนด์ของคุณ

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

ด้านล่างนี้เป็นรายการโปรดของฉัน เป็นตัวอย่างที่ดีของวิธีการใช้ความคิดสร้างสรรค์ในการออกแบบหน้า

ฟิกม่า

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

Airbnb

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

MailChimp

การออกแบบนั้นสนุกเสมอบนไซต์ MailChimp โดยเฉพาะอย่างยิ่งกับการออกแบบใหม่ล่าสุด มีอารมณ์ขันทั้งข้อความและภาพประกอบ

รับธีม Genesis Framework & StudioPress ฟรี!

เมื่อคุณโฮสต์ไซต์ของคุณบน Flywheel คุณจะสามารถเข้าถึงธีม WordPress ระดับพรีเมียมกว่า 30 ธีม (รวมถึง Genesis!) ได้จากแดชบอร์ดที่สวยงามของเรา นั่นคือมูลค่ามากกว่า $2,000 ที่คุณสามารถเริ่มต้นได้ด้วยเงินเพียง $15/เดือน! เรียนรู้เพิ่มเติมที่นี่

การสร้างหน้า 404 แบบกำหนดเอง

สิ่งแรกก่อน: การปรับแต่งทั้งหมดควรทำในธีมย่อย วิธีนี้จะทำให้การแก้ไขต่างๆ ไม่ถูกแทนที่ด้วยการอัปเดตธีมปกติ หน้า 404 นี้จะเป็นไฟล์ในธีมลูก ไฟล์ชื่อ 404.php เป็นไฟล์ที่ถูกต้อง

วิธีเพิ่มตัวแปร CSS เพื่อปรับแต่งธีมลูกของ WordPress

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

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

1. สร้างไฟล์ใหม่

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

2. แก้ไขไฟล์

ตัวอย่างพื้นฐาน

ตัวอย่างนี้กล่าวถึงหน้าที่มีข้อความและรูปภาพ แนวคิดในการออกแบบที่นี่คือการสร้างบางสิ่งที่เรียบง่ายซึ่งต้องใช้กราฟิกที่มีภาพประกอบ

วางรหัสต่อไปนี้ลงในหน้า 404.php เป็นการเริ่มต้นขั้นพื้นฐาน คุณสามารถแก้ไขสิ่งต่าง ๆ เป็นโครงสร้างที่แตกต่างกันเพื่อให้เป็นของคุณเองได้ (เช่น หากคุณไม่ต้องการแถบด้านข้าง ก็สามารถลบออกได้)

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>

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

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

แนวทางวิดเจ็ต

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

การเพิ่มวิดเจ็ต

ในการเพิ่มวิดเจ็ตลงใน 404.php file คุณจะต้องสร้างพื้นที่วิดเจ็ตใหม่ ธีมลูกต้องการไฟล์ functions.php ดังนั้นถึงเวลาตรวจสอบอีกครั้งว่าธีมย่อยมีไฟล์เดียว

ในไฟล์ functions.php จำเป็นต้องมีข้อมูลโค้ดเพื่อเพิ่มวิดเจ็ตใหม่ในหน้า

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

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

คัดลอกและวางโค้ดต่อไปนี้ในตำแหน่งที่คุณต้องการแสดงวิดเจ็ตใหม่ (เช่น หลังชื่อและข้อความ):

<?php dynamic_sidebar( '404' ); ?>

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

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

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

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