Hướng dẫn tạo trang 404 riêng cho WordPress

8

404 là một lỗi truyền kỳ trên mọi webstie. Lỗi 404 thường được gặp khi người dùng đi tới các link bị hỏng , đã bị xóa hoặc đôi khi không phải do các webmaster gây ra mà do người dùng đi nhầm đường vào bài viết, chuyên mục hoặc trang trên website của bạn.

Với WordPress, trừ Genesis FrameWork thì tất cả các giao diện đều có sẵn một file 404.php và có sẵn nội dung báo lỗi. Như hình dưới đây là nội dung trang báo lỗi 404 trên giao diện tôi đang sử dụng.

Hướng dẫn tạo trang 404 riêng cho WordPress trang 404 riêng cho WordPress - Hướng dẫn tạo trang 404 riêng cho WordPress
Hướng dẫn tạo trang 404 riêng cho WordPress

Hướng dẫn tạo trang 404 riêng cho WordPress

 

Bạn có nhiều cách để khắc phục lỗi 404 này và thông thường chúng ta hay chuyển lỗi 404 về trang chủ. Nếu bạn muốn áp dụng cách này thì chúng ta sẽ có hai cách để khắc phục.

Cách 1: Chèn đoạn Code dưới đây vào file 404.php:

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".get_bloginfo('url'));
exit();
?>

Cách 2: cách này thường được áp dụng cho các bạn sử dụng Genesis FrameWork vì không có file 404.php. Bạn hãy cho đoạn Code bên dưới vào File functions.php :

add_action('wp', 'redirect_404_to_homepage', 1);
function redirect_404_to_homepage() {
    global $wp_query;
    if ($wp_query->is_404) {
        wp_redirect(get_bloginfo('url'),301)
        ;exit;
    }
}

Hoặc bạn có thể sử dụng Plugin All 404 Redirect to Homepage. Plugin này sử dụng SEO 301 redirection để điều hướng trang 404 về trang chủ. Download tại: https://wordpress.org/plugins/all-404-redirect-to-homepage/

Code một trang 404 riêng cho WordPress

Nếu như bên trên chúng ta che giấu trang 404 thì bây giờ hãy cùng tôi khoe trang 404 của bạn với mọi người bằng cách tự tạo cho mình một trang báo lỗi thật ấn tượng. Cách làm rất đơn giản, bạn chỉ cần có một nội dung HTML để thực hiện. Ở đây tôi đã chuẩn bị sẵn cho bạn một trang 404 rất phong cách. Xem Demo ngay bên dưới:

Bây giờ chúng ta sẽ lấy nội dung này để thực hiện. Bạn cũng sẽ có 2 cách để chỉnh sửa File 404.php

Cách 1: Trong Dashboard bạn truy cập Appearance >Editor > sau đó chọn file 404.php như hình bên dưới.

Hướng dẫn tạo trang 404 riêng cho WordPress trang 404 riêng cho WordPress - Hướng dẫn tạo trang 404 riêng cho WordPress

Cách 2: Bạn truy cập vào Hosting của bạn bằng các phần mềm FTP như FileZlla. Tìm đến Theme đang sử dụng bằng đường dẫn sau: /public_html/wp-content/themes/ten-theme-dang-dung/ mở file 404.php ra để chỉnh sửa như hình bên dưới.

Hướng dẫn tạo trang 404 riêng cho WordPress trang 404 riêng cho WordPress - Hướng dẫn tạo trang 404 riêng cho WordPress

Khi đã tiếp cận được File 404, bạn hãy xóa hết những gì có trong đó và dán đoạn Code này vào. Nhớ thay link trang web của bạn vào thẻ href và thêm các thẻ author, keywords, description cho chuẩn Seo luôn.

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en"> <!--<![endif]-->
<head>
<head>
    <meta charset="utf-8" />
    <title>Trang 404 - Blog Lại Văn Đức</title>
    <meta name="author" content="Laivanduc" />
    <meta name="keywords" content="keywords của bạn" />
    <meta name="description" content="description của bạn" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style>
 
@import url(http://fonts.googleapis.com/css?family=opensans:500);
body{
                background: #33cc99;
                color:#fff;
                font-family: 'Open Sans', sans-serif;
                max-height:700px;
                overflow: hidden;
            }
            .c{
                text-align: center;
                display: block;
                position: relative;
                width:80%;
                margin:100px auto;
            }
            ._404{
                font-size: 220px;
                position: relative;
                display: inline-block;
                z-index: 2;
                height: 250px;
                letter-spacing: 15px;
            }
            ._1{
                text-align:center;
                display:block;
                position:relative;
                letter-spacing: 12px;
                font-size: 4em;
                line-height: 80%;
            }
            ._2{
                text-align:center;
                display:block;
                position: relative;
                font-size: 20px;
            }
            .text{
                font-size: 70px;
                text-align: center;
                position: relative;
                display: inline-block;
                margin: 19px 0px 0px 0px;
                /* top: 256.301px; */
                z-index: 3;
                width: 100%;
                line-height: 1.2em;
                display: inline-block;
            }
           

            .btn{
                background-color: rgb( 255, 255, 255 );
                position: relative;
                display: inline-block;
                width: 358px;
                padding: 5px;
                z-index: 5;
                font-size: 25px;
                margin:0 auto;
                color:#33cc99;
                text-decoration: none;
                margin-right: 10px
            }
            .right{
                float:right;
                width:60%;
            }
            
            hr{
                padding: 0;
                border: none;
                border-top: 5px solid #fff;
                color: #fff;
                text-align: center;
                margin: 0px auto;
                width: 420px;
                height:10px;
                z-index: -10;
            }
            
            hr:after {
                content: "\2022";
                display: inline-block;
                position: relative;
                top: -0.75em;
                font-size: 2em;
                padding: 0 0.2em;
                background: #33cc99;
            }
            
            .cloud {
                width: 350px; height: 120px;

                background: #FFF;
                background: linear-gradient(top, #FFF 100%);
                background: -webkit-linear-gradient(top, #FFF 100%);
                background: -moz-linear-gradient(top, #FFF 100%);
                background: -ms-linear-gradient(top, #FFF 100%);
                background: -o-linear-gradient(top, #FFF 100%);

                border-radius: 100px;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;

                position: absolute;
                margin: 120px auto 20px;
                z-index:-1;
                transition: ease 1s;
            }

            .cloud:after, .cloud:before {
                content: '';
                position: absolute;
                background: #FFF;
                z-index: -1
            }

            .cloud:after {
                width: 100px; height: 100px;
                top: -50px; left: 50px;

                border-radius: 100px;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
            }

            .cloud:before {
                width: 180px; height: 180px;
                top: -90px; right: 50px;

                border-radius: 200px;
                -webkit-border-radius: 200px;
                -moz-border-radius: 200px;
            }
            
            .x1 {
                top:-50px;
                left:100px;
                -webkit-transform: scale(0.3);
                -moz-transform: scale(0.3);
                transform: scale(0.3);
                opacity: 0.9;
                -webkit-animation: moveclouds 15s linear infinite;
                -moz-animation: moveclouds 15s linear infinite;
                -o-animation: moveclouds 15s linear infinite;
            }
            
            .x1_5{
                top:-80px;
                left:250px;
                -webkit-transform: scale(0.3);
                -moz-transform: scale(0.3);
                transform: scale(0.3);
                -webkit-animation: moveclouds 17s linear infinite;
                -moz-animation: moveclouds 17s linear infinite;
                -o-animation: moveclouds 17s linear infinite; 
            }

            .x2 {
                left: 250px;
                top:30px;
                -webkit-transform: scale(0.6);
                -moz-transform: scale(0.6);
                transform: scale(0.6);
                opacity: 0.6; 
                -webkit-animation: moveclouds 25s linear infinite;
                -moz-animation: moveclouds 25s linear infinite;
                -o-animation: moveclouds 25s linear infinite;
            }

            .x3 {
                left: 250px; bottom: -70px;

                -webkit-transform: scale(0.6);
                -moz-transform: scale(0.6);
                transform: scale(0.6);
                opacity: 0.8; 

                -webkit-animation: moveclouds 25s linear infinite;
                -moz-animation: moveclouds 25s linear infinite;
                -o-animation: moveclouds 25s linear infinite;
            }

            .x4 {
                left: 470px; botttom: 20px;

                -webkit-transform: scale(0.75);
                -moz-transform: scale(0.75);
                transform: scale(0.75);
                opacity: 0.75;

                -webkit-animation: moveclouds 18s linear infinite;
                -moz-animation: moveclouds 18s linear infinite;
                -o-animation: moveclouds 18s linear infinite;
            }

            .x5 {
                left: 200px; top: 300px;

                -webkit-transform: scale(0.5);
                -moz-transform: scale(0.5);
                transform: scale(0.5);
                opacity: 0.8; 

                -webkit-animation: moveclouds 20s linear infinite;
                -moz-animation: moveclouds 20s linear infinite;
                -o-animation: moveclouds 20s linear infinite;
            }

            @-webkit-keyframes moveclouds {
                0% {margin-left: 1000px;}
                100% {margin-left: -1000px;}
            }
            @-moz-keyframes moveclouds {
                0% {margin-left: 1000px;}
                100% {margin-left: -1000px;}
            }
            @-o-keyframes moveclouds {
                0% {margin-left: 1000px;}
                100% {margin-left: -1000px;}
            }
 
</style>
</head>
<body>
 
 <div id="clouds">
            <div class="cloud x1"></div>
            <div class="cloud x1_5"></div>
            <div class="cloud x2"></div>
            <div class="cloud x3"></div>
            <div class="cloud x4"></div>
            <div class="cloud x5"></div>
        </div>
        <div class='c'>
            <div class='_404'>404</div>
            <hr>
            <div class='_1'>THE PAGE</div>
            <div class='_2'>WAS NOT FOUND</div>
            <a class='btn' href='http://www.laivanduc.com/'>Trang Chủ</a>
        </div>
 
</body>
</html>

Xong rồi đấy. Bạn lưu lại và truy cập vào website của bạn với một đường dẫn mà bạn biết chắc sẽ không có và xem thành quả.

Thế thôi

Bên trên là cách để bạn tự tạo cho mình một trang 404 riêng cho WordPress. Cách làm rất đơn giản, chỉ cần bạn có kiến thức về HTML và CSS thì bạn có thể tự tạo cho mình những trang báo lỗi thật độc đáo. Cho mọi người xem thành quả của bạn nhé.

8 Comments
  1. máy trợ giảng nói

    Mình đang nghiên cứu WordPress để làm blog. Cám ơn AD nhế. Bài viết rất hay

  2. iSempai nói

    Có thấy site laivanduc khoe trang 404 ra đâu? 😀

    1. Lại Văn Đức nói

      Bữa trước có làm cơ mà từ hôm update lên phiên bản mới em dẹp luôn. he he

  3. Trang 404 mình điều hướng về trang chủ được không bạn? Mình mới đang tìm hiểu về wordpress nên chưa biết. 

    1. Lại Văn Đức nói

      Được nhé bạn

  4. trang phục biểu diễn nói

    Bợ nguyên si sài luôn, code của theme củ chuối quá, cám ơn anh Đức

  5. AToan nói

    Cám ơn bài viết của bạn, mình đã làm trên trang mình đã thấy rất đẹp

  6. hieu nói

    k dc share đoạn code trong cách 1 nhỉ, cách 1 làm đơn giản hơn

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.