Tạo Trang 404 Tùy Chỉnh Đẹp Mắt Cho Website WordPress Của Bạn (Hướng Dẫn 2024)

Code trang 404

Bạn có bao giờ gặp phải trang “Lỗi 404: Không tìm thấy” nhàm chán trên một website không? Chắc hẳn là có rồi! Trang 404 mặc định của WordPress không chỉ gây thất vọng cho người dùng mà còn có thể khiến họ rời bỏ website của bạn mãi mãi. May mắn thay, việc tạo một trang 404 tùy chỉnh, thân thiện và hữu ích trong WordPress là vô cùng dễ dàng. Bài viết này sẽ hướng dẫn bạn từng bước, từ việc hiểu rõ trang 404 là gì đến cách thiết kế và tối ưu hóa nó để giữ chân khách truy cập và cải thiện trải nghiệm người dùng.

Trang 404 Là Gì Và Tại Sao Nó Quan Trọng?

Trang 404 là trang hiển thị khi người dùng cố gắng truy cập một URL không tồn tại trên website của bạn. Điều này có thể xảy ra vì nhiều lý do: liên kết bị hỏng, URL bị gõ sai, hoặc trang đã bị xóa. Thay vì hiển thị một thông báo lỗi khô khan, một trang 404 tùy chỉnh được thiết kế tốt sẽ:

  • Giữ chân khách truy cập: Cung cấp các liên kết hữu ích, thanh tìm kiếm, hoặc thông tin liên hệ để giúp họ tìm thấy những gì họ cần.
  • Tăng tính chuyên nghiệp: Thể hiện sự quan tâm đến trải nghiệm người dùng và xây dựng hình ảnh thương hiệu tích cực.
  • Cải thiện SEO: Giúp bot tìm kiếm hiểu rõ hơn về cấu trúc website của bạn và tránh bị phạt vì các liên kết hỏng.

Các Cách Tạo Trang 404 Tùy Chỉnh Trong WordPress

Có nhiều cách để tạo trang 404 tùy chỉnh trong WordPress, từ việc sử dụng code (cho những người am hiểu kỹ thuật) đến sử dụng plugin hoặc trình tạo trang (page builder) kéo thả. Chúng ta sẽ khám phá từng phương pháp:

1. Tạo Trang 404 Tùy Chỉnh Bằng Code (functions.php)

Phương pháp này phù hợp với những người có kiến thức về PHP và muốn kiểm soát hoàn toàn thiết kế trang 404.

Bước 1: Tạo file 404.php trong thư mục theme của bạn.

Nếu theme của bạn chưa có file 404.php, hãy tạo một file mới với tên đó trong thư mục theme (ví dụ: /wp-content/themes/ten-theme-cua-ban/404.php).

Bước 2: Thêm code HTML và PHP vào file 404.php.

Bạn có thể bắt đầu bằng code HTML cơ bản và sau đó tùy chỉnh theo ý muốn:

<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package Your_Theme_Name
 */

get_header();
?>



            <h1><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'your-theme-name' ); ?></h1>




                <?php
                esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'your-theme-name' );
                ?>


                <?php
                get_search_form();

                the_widget( 'WP_Widget_Recent_Posts' );
                ?>


                    <?php
                    /* translators: %1$s: smiley */
                    $archive_content = '<p>' . sprintf( esc_html__( 'Try looking in the monthly archives. %1$s', 'your-theme-name' ), convert_smilies( ':)' ) ) . '</p>';
                    the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_widget=</div>$archive_content" );

                    the_widget( 'WP_Widget_Tag_Cloud' );
                    ?>






<?php
get_footer();

Lưu ý: Thay thế your-theme-name bằng tên theme của bạn.

Bước 3: Tùy chỉnh code HTML và CSS.

Bạn có thể tùy chỉnh code HTML để thêm hình ảnh, video, hoặc bất kỳ nội dung nào bạn muốn. Sử dụng CSS để tạo kiểu cho trang 404 cho phù hợp với thiết kế tổng thể của website.

Ví dụ:

<div class="error-404-container">
    <img src="<?php echo get_template_directory_uri(); ?>/images/404-image.png" alt="Trang 404">
    <h1>Không Tìm Thấy Trang</h1>
    <p>Có vẻ như trang bạn đang tìm kiếm không tồn tại. Vui lòng sử dụng thanh tìm kiếm bên dưới hoặc chọn một trong các liên kết phổ biến:</p>
    <?php get_search_form(); ?>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">Về Trang Chủ</a>
</div>

Code trang 404Code trang 404

Nguyễn Thị Lan Anh, Trưởng nhóm Phát triển WordPress tại DevWidgets Inc. chia sẻ:

“Sử dụng code để tạo trang 404 cho phép bạn kiểm soát hoàn toàn thiết kế và chức năng. Tuy nhiên, hãy cẩn thận khi chỉnh sửa file theme trực tiếp. Luôn tạo bản sao lưu trước khi thực hiện bất kỳ thay đổi nào!”

2. Sử Dụng Plugin Để Tạo Trang 404 Tùy Chỉnh

Đây là cách đơn giản và nhanh chóng nhất, đặc biệt phù hợp với người mới bắt đầu. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn tạo trang 404 tùy chỉnh mà không cần viết code.

Các plugin phổ biến:

  • 404page – your smart custom 404 error page: Plugin này cho phép bạn chọn bất kỳ trang nào đã tạo trong WordPress làm trang 404.
  • Custom 404 Pro: Plugin trả phí với nhiều tính năng nâng cao, bao gồm khả năng theo dõi các lỗi 404 và tạo chuyển hướng (redirect).

Hướng dẫn sử dụng plugin “404page”:

  1. Cài đặt và kích hoạt plugin “404page – your smart custom 404 error page”.
  2. Tạo một trang mới trong WordPress (Pages > Add New) và thiết kế trang 404 của bạn.
  3. Trong Dashboard, đi đến Appearance > 404 Error Page.
  4. Chọn trang bạn vừa tạo từ danh sách thả xuống “Page to display as 404 page”.
  5. Nhấn “Save Changes”.

Plugin trang 404Plugin trang 404

3. Sử Dụng Page Builder Để Tạo Trang 404 Tùy Chỉnh

Nếu bạn đang sử dụng một page builder như Elementor, Beaver Builder, hoặc Divi, bạn có thể dễ dàng tạo trang 404 tùy chỉnh bằng cách sử dụng giao diện kéo thả.

Ví dụ với Elementor:

  1. Tạo một trang mới trong WordPress (Pages > Add New) và đặt tên là “404”.
  2. Nhấn “Edit with Elementor”.
  3. Thiết kế trang 404 của bạn bằng cách sử dụng các widget của Elementor. Bạn có thể thêm hình ảnh, văn bản, nút, thanh tìm kiếm, v.v.
  4. Xuất bản trang.
  5. Sử dụng plugin “404page” như đã hướng dẫn ở trên để chọn trang Elementor bạn vừa tạo làm trang 404.

Trần Minh Khang, Chuyên gia Tư vấn Bảo mật WordPress, nhấn mạnh:

“Dù bạn sử dụng phương pháp nào, hãy đảm bảo trang 404 của bạn được thiết kế thân thiện với người dùng và cung cấp thông tin hữu ích. Điều này giúp giảm thiểu tỷ lệ thoát trang và giữ chân khách truy cập.”

Elementor trang 404Elementor trang 404

Các Yếu Tố Quan Trọng Của Một Trang 404 Tùy Chỉnh Hiệu Quả

Dù bạn chọn phương pháp nào, hãy đảm bảo trang 404 của bạn bao gồm các yếu tố sau:

  • Thông báo rõ ràng: Giải thích rằng trang không tìm thấy một cách thân thiện và không gây khó chịu.
  • Hình ảnh hoặc đồ họa: Sử dụng hình ảnh hoặc đồ họa liên quan để làm cho trang trở nên hấp dẫn hơn.
  • Thanh tìm kiếm: Cho phép người dùng tìm kiếm nội dung trên website của bạn.
  • Liên kết điều hướng: Cung cấp các liên kết đến trang chủ, trang liên hệ, hoặc các trang phổ biến khác.
  • Thông tin liên hệ: Nếu người dùng vẫn không thể tìm thấy những gì họ cần, hãy cung cấp thông tin liên hệ để họ có thể liên hệ trực tiếp với bạn.
  • Thiết kế responsive: Đảm bảo trang 404 hiển thị tốt trên mọi thiết bị, từ máy tính để bàn đến điện thoại di động.

Thiết kế trang 404Thiết kế trang 404

Tối Ưu Hóa SEO Cho Trang 404 Tùy Chỉnh

Mặc dù trang 404 không nên được lập chỉ mục (index) bởi các công cụ tìm kiếm, bạn vẫn có thể tối ưu hóa nó để cải thiện SEO tổng thể của website:

  • Sử dụng thẻ 404 trong tiêu đề trang. Điều này giúp công cụ tìm kiếm hiểu rằng đây là trang 404.
  • Thêm liên kết nội bộ (internal links). Liên kết đến các trang quan trọng khác trên website của bạn để giúp bot tìm kiếm khám phá nội dung của bạn.
  • Theo dõi các lỗi 404. Sử dụng Google Search Console hoặc một plugin SEO để theo dõi các lỗi 404 và sửa chúng (ví dụ: tạo chuyển hướng nếu trang đã được chuyển sang URL khác).

Kết Luận

Tạo một trang 404 tùy chỉnh trong WordPress là một việc đơn giản nhưng có thể tạo ra sự khác biệt lớn trong trải nghiệm người dùng và SEO của website. Bằng cách làm theo các bước hướng dẫn trong bài viết này, bạn có thể tạo một trang 404 đẹp mắt, thân thiện và hữu ích, giúp giữ chân khách truy cập và cải thiện hình ảnh thương hiệu của bạn. Hãy bắt đầu ngay hôm nay và biến những trang “Lỗi 404: Không tìm thấy” nhàm chán thành cơ hội để tạo ấn tượng tốt với khách truy cập của bạn!

Lời kêu gọi hành động: Bạn đã tạo trang 404 tùy chỉnh cho website WordPress của mình chưa? Hãy chia sẻ kinh nghiệm và mẹo của bạn trong phần bình luận bên dưới!

Câu Hỏi Thường Gặp (FAQ)

  • Câu hỏi: Trang 404 có ảnh hưởng đến SEO không?

    • Trả lời: Trang 404 không nên được lập chỉ mục bởi các công cụ tìm kiếm. Tuy nhiên, một trang 404 được thiết kế tốt có thể cải thiện trải nghiệm người dùng và giúp bot tìm kiếm khám phá nội dung của bạn, gián tiếp cải thiện SEO.
  • Câu hỏi: Tôi nên sử dụng plugin nào để tạo trang 404 tùy chỉnh?

    • Trả lời: “404page – your smart custom 404 error page” là một plugin miễn phí và dễ sử dụng, rất phù hợp cho người mới bắt đầu.
  • Câu hỏi: Làm thế nào để theo dõi các lỗi 404 trên website của tôi?

    • Trả lời: Bạn có thể sử dụng Google Search Console hoặc một plugin SEO như Yoast SEO hoặc Rank Math để theo dõi các lỗi 404.
  • Câu hỏi: Tôi có nên tạo chuyển hướng (redirect) cho các trang 404 không?

    • Trả lời: Nếu một trang đã được chuyển sang URL khác, bạn nên tạo chuyển hướng 301 để chuyển hướng người dùng và bot tìm kiếm đến URL mới.
Đánh giá bài đăng post

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *