Cách tạo trang 404 tùy chỉnh trong WordPress (+ Ví dụ)

Trang 404 hiển thị khi người dùng cố truy cập tài nguyên không tồn tại.

Chẳng hạn như URL bị đánh sai.

Hoặc một trang đã bị xóa.

Và bạn có thể tạo trang 404 tùy chỉnh trong WordPress (dù không biết code).

Tại sao bạn cần trang 404 tùy chỉnh trong WordPress

Trang 404 tùy chỉnh Trang 404 tùy chỉnh có thể cải thiện trải nghiệm người dùng bằng cách giúp họ tìm thấy những gì cần.

Bạn cũng có thể thiết kế trang 404 phản ánh thương hiệu qua các yếu tố như nội dung và hình ảnh cá nhân hóa.

Hãy xem trang 404 mặc định này:

Trang này không hữu ích và không hướng người dùng đi đúng hướng qua các yếu tố như liên kết hữu ích hay hộp tìm kiếm.

Điều này có thể khiến người dùng rời trang và tìm đến nơi khác, làm tăng Bounce Rate.

Giải pháp là gì?

Tạo trang 404 tùy chỉnh phản ánh thương hiệu và giúp người dùng dễ dàng di chuyển trên trang của bạn.

Mẹo chuyên nghiệp

Bạn có thể dễ dàng tìm và sửa lỗi 404 bằng công cụ Site Audit của Semrush.

Cách tạo trang 404 tùy chỉnh trong WordPress

Dưới đây là ba cách để bạn tự tạo trang 404 trong WordPress:

Cách 1: Theme File Editor

Nhiều theme WordPress đã có sẵn trang 404.

Tuy nhiên, nếu bạn không quen làm việc với PHP — một ngôn ngữ scripting — hãy cân nhắc cách khác để tạo trang 404, như dùng page builder.

Nhưng nếu bạn muốn làm theo cách này, bạn có thể chỉnh sửa trang 404 có sẵn bằng theme file editor. Theme file editor của WordPress là trình soạn thảo văn bản cho phép bạn chỉnh sửa các file của theme.

Để làm vậy, đăng nhập vào trang của bạn. Nhấn “Appearance” rồi chọn “Theme File Editor.”

Theme file editor có menu thả xuống để bạn chọn theme muốn chỉnh sửa.

Nó cũng chứa các file của theme và hộp văn bản với mã code từng file.

Lưu ý quan trọng

Bạn nên tạo child theme trước khi chỉnh sửa file theme. Child theme là theme con giữ nguyên thiết kế và chức năng của theme cha (theme chính).

Các thay đổi qua child theme vẫn giữ nguyên khi cập nhật theme cha. Vì vậy, tạo child theme để giữ mọi thay đổi cho trang 404.

Bạn có thể dùng plugin như Child Theme Configurator để tạo child theme chỉ với vài cú nhấp. Hoặc làm theo hướng dẫn của WordPress để tạo child theme mà không cần plugin.

Khi bạn đã có child theme, hãy dùng FTP client hoặc trình quản lý file của nhà cung cấp hosting để thêm file vào child theme của bạn.

Hướng dẫn sau sẽ chỉ bạn cách thêm file bằng trình quản lý file của trang web.

Đầu tiên, đăng nhập vào host và tìm trình quản lý file.

Tìm file trang 404 của bạn. Nó thường nằm trong thư mục gốc (thường gọi là “/” hoặc “public_html”). Sau đó vào “wp-content” > “themes” > “your theme.”

Ví dụ của chúng tôi có hai file trang 404:

• Một file tên là 404.php dùng cho định dạng tổng thể của trang 404
• Một file tên là content-404.php chứa nội dung của trang 404 (như văn bản và hình ảnh)

Trong ví dụ này, chúng tôi sẽ sao chép file content-404.php để chỉnh sửa văn bản và hình ảnh cho trang này.

Nhấp đúp vào file này để mở file trang 404 của bạn.

Sau đó sao chép nội dung vào trình soạn thảo văn bản thuần như notepad trên máy tính.

Tiếp theo, nhấp vào thư mục child theme và tạo file mới trong đó. Đặt tên file giống tên file trang 404 (trong ví dụ là “content-404.php”).

Dán mã từ trình soạn thảo văn bản vào file mới và lưu lại.

Tiếp theo, chỉnh sửa nội dung trang 404 của bạn.

Ví dụ, bạn có thể thay đổi đoạn văn bản được tô sáng (dưới đây) sao cho phù hợp hơn với brand voice.

Sau khi lưu thay đổi, trang 404 tùy chỉnh của bạn sẽ hiển thị khi ai đó truy cập trang không tồn tại.

Lựa chọn 2: Page Builder

Các page builder như Elementor, Beaver Builder, và Divi Builder là giải pháp không cần code để tạo trang 404 tùy chỉnh.

Mặc dù các page builder thường có bản miễn phí, bạn có thể cần nâng cấp lên bản trả phí để tạo trang 404 tùy chỉnh.

Dưới đây là cách tạo trang 404 tùy chỉnh với Elementor.

Đầu tiên, cài đặt và kích hoạt Elementor Pro.

Nhấp vào “Templates” và “Theme Builder.”

Sau đó nhấp vào nút “Add new”.

Một cửa sổ sẽ bật lên. Chọn “Error 404” trong menu thả xuống, đặt tên cho template của bạn. Nhấp “Create Template.”

Bạn có thể chọn từ các template có sẵn hoặc thiết kế mới từ đầu.

Thêm các phần tử như văn bản, hình ảnh và hộp tìm kiếm trang vào trang 404 để người dùng dễ dàng điều hướng.

Xuất bản trang khi bạn đã sẵn sàng. Đảm bảo menu “Include” chọn “404 Page.” Sau đó nhấp “Save & Close.”

Trang 404 tùy chỉnh của bạn sẽ hiển thị khi ai đó truy cập URL không tồn tại.

Lựa chọn 3: Plugin trang 404

Plugin là lựa chọn khác để tạo trang 404 tùy chỉnh trên WordPress mà không cần code.

Một số plugin bạn có thể cân nhắc là 404page (còn gọi là “Smart Custom 404”) và Colorlib 404 Customizer.

Chúng tôi sẽ dùng plugin 404page cho ví dụ này.

Cài đặt và kích hoạt plugin. Sau đó tạo trang 404 error bằng cách nhấn “Pages” > “Add New Page.”

Tạo trang của bạn bằng trình tạo trang. Chúng tôi đã tạo trang lỗi dưới đây với Gutenberg, trình tạo trang mặc định của WordPress.

Cập nhật URL slug—phần cuối của URL—thành một cái gì đó như “404.”

Xuất bản trang của bạn. Sau đó nhấn “Appearance” và “404 Error Page.”

Vào tab “General” và chọn trang 404 của bạn trong danh sách thả xuống. Nhấn “Save Changes.”

Website của bạn giờ sẽ hiển thị trang 404 tùy chỉnh khi ai đó truy cập vào trang không tồn tại.

Ví dụ trang 404 tùy chỉnh

Dưới đây là bốn ví dụ trang 404 error tùy chỉnh để bạn lấy cảm hứng:

Netflix

Netflix thiết kế trang 404 dựa trên các show nổi bật với hình nền bắt mắt. Điều này giúp họ quảng bá sản phẩm đồng thời hướng người dùng về trang chủ.

Wendy’s

Wendy’s thêm một trò chơi đơn giản trên trang 404. Giúp trang bớt nhàm chán và gây khó chịu khi người dùng vô tình truy cập.

Ngoài ra, trang 404 này còn có các liên kết ngay dưới trò chơi để giúp người dùng tìm được thứ họ cần.

Ryanair

Ryanair tận dụng thương hiệu du lịch của họ cho trang 404 với hình nền phù hợp. Họ cũng thêm các liên kết giúp người dùng tiếp tục hành trình.

Cadbury

Cadbury thêm liên kết về trang chủ trên trang 404, kèm thông điệp vui nhộn “Oh, Crumbs!” phù hợp với thương hiệu. Đồng thời khuyến khích người dùng liên hệ nếu gặp sự cố tiếp tục.

Các thực hành tốt nhất cho trang 404

Những mẹo này sẽ giúp bạn tạo trang 404 tuyệt vời cho website, cải thiện trải nghiệm người dùng và có thể giảm Bounce Rate.

Giải thích lý do xảy ra

Một lời giải thích ngắn gọn giúp người dùng hiểu tại sao họ gặp lỗi, để họ có thể tự xử lý.

Ví dụ, trang 404 của Microsoft giải thích rằng URL có thể bị viết sai hoặc trang không còn tồn tại:

Giữ đúng phong cách thương hiệu

Trang 404 của bạn không nên cảm thấy tách biệt với website. Hãy thể hiện thương hiệu và cá tính của bạn trong trang 404.

Tripadvisor dùng ngôn ngữ thông minh phản ánh thương hiệu trên trang 404 của họ:

Giúp người dùng tìm thứ họ cần

Giữ người dùng tiếp tục trên site bằng cách thêm các thành phần như thanh tìm kiếm vào trang 404 tùy chỉnh. Hoặc liên kết tới các trang phổ biến, hoặc sản phẩm nổi bật.

Như vậy, người dùng có thể tiếp tục hành trình của họ.

Amazon thêm thanh tìm kiếm và liên kết về trang chủ trong trang 404 (cùng hình ảnh một trong nhiều chú chó có thể xuất hiện):

Cách kiểm tra website của bạn có lỗi 404

Dùng Semrush’s Site Audit để kiểm tra và theo dõi website của bạn xem có 404 Error không mong muốn.

Mở Site Audit, nhập domain của bạn và nhấn “Start Audit.”

Cấu hình site audit. (Hướng dẫn cấu hình của chúng tôi có thể giúp bạn nếu bị mắc kẹt.) Nhấn “ có thể giúp nếu bạn bị kẹt.) Nhấn vào “Start Site Audit” khi bạn đã sẵn sàng.

Bạn sẽ nhận được báo cáo tóm tắt tình trạng sức khỏe website cùng tổng quan các vấn đề, cảnh báo và thông báo.

Trong báo cáo, nhấn “Issues.”

Dưới mục “Errors”, tìm “# pages returned 4XX status code.” Nhấn vào phần “# pages” để xem những trang nào trên website hiển thị lỗi 4XX.

Tìm các trang bị lỗi 404. Nhấn “View broken links” để xem những trang nào liên kết đến trang bị lỗi 404.

Xóa hoặc thay đổi những broken links sang liên kết phù hợp (và hoạt động). Để người dùng không bị dẫn đến trang 404 khi nhấn vào. Và để công cụ tìm kiếm không gặp phải các crawl errors tiềm ẩn..

Sau đó, bạn quyết định cách xử lý trang bị lỗi 404. Có hai lựa chọn:

Giữ nguyên lỗi

404 errors có thể hữu ích vì chúng báo hiệu một số trang không còn tồn tại. Bạn có thể muốn truyền đạt điều này đến người dùng.

Ví dụ, nếu bạn xóa trang sản phẩm vì không còn bán sản phẩm đó nữa, bạn nên giữ lỗi 404 để người dùng biết trang sản phẩm đã không còn.

Chuyển hướng traffic sang trang mới

Redirects—như 301 permanent redirect—có thể tự động chuyển người dùng từ trang cũ sang trang mới khi họ truy cập liên kết. Bạn làm vậy nếu đã thay thế trang cũ bằng trang mới và muốn dẫn người dùng từ trang cũ sang trang mới.

Giả sử bạn đổi trang about từ example.com/about sang example.com/about-us. Bạn sẽ muốn redirect traffic từ /about sang /about-us vì trang vẫn tồn tại nhưng đã chuyển vị trí. Do đó bạn không muốn giữ trang 404.

Cải thiện trải nghiệm website với trang 404 tùy chỉnh

Tạo trang 404 tùy chỉnh giúp người dùng tìm được thông tin họ cần mà không bị gián đoạn.

Sau đó, dùng công cụ Site Audit của Semrush để theo dõi lỗi 404 và đảm bảo người dùng không bị kẹt khi duyệt website.

Hãy thử Site Audit miễn phí ngay hôm nay.