1/ 404 error là gì?

Nếu như bạn thay đổi cấu trúc website mới, những URL cũ khi khách hàng truy cập vào sẽ bị lỗi 404 error not found.
Nếu website của bạn có rất nhiều link, bạn không kiểm soát hết các link bị lỗi, thì làm thế nào để người dùng không thất vọng khi cứ nhìn thấy các trang bị lỗi.
Vâng có rất nhiều các lý do khác nhau, và một trang web có trang 404 error là điều không thể tránh khỏi, chúng ta phải sống chung với nó, chỉ còn cách khắc phục và điều hướng nó mà thôi. Vậy lỗi 404 error là gì?

Lỗi 404 Không tìm thấy trang (404 error Page not found) là một lỗi xảy ra khi liên kết của trang đó đã không còn tồn tại, có thể trang đã bị xóa hoặc liên kết (đường link) của trang đó đã thay đổi hoặc nhập sai địa chỉ liên kết

2/ Làm thế nào để tạo trang 404 chuyên nghiệp

Hầu hết website ngày nay đều có mặc định file 404.php, tuy nhiên vì đã mặc định nên giao diện người dùng không được ấn tượng, đặc biệt dễ gây hiểu nhầm cho người dùng, chính vì vậy bạn nên tạo lại trang Error 404 một cách thân thiện hơn để còn giữ người dùng ở lại, tiếp tục tìm đến đọc những bài viết khác.

Bạn chỉ cần chỉnh sửa một trang html sau đó bạn vào theme tìm đến 404.php để xử lý, bạn chỉ cần copy nguyên đoạn code dưới đây, và mở file 404.php để thay thế là được, bạn nhớ thay đổi domain của bạn lại cho phù hợp:

<!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 BMM Digital</title>
<meta name="author" content="bmmdigital" />
<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.bmmdigital.com/'>Trang Chủ</a>
</div>

</body>
</html>

3/ Làm thế nào để redirect trang bị lỗi 404 về trang chủ hoặc một trang khác?

Sau khi bạn đã biết cách tạo trang 404 error ấn tượng chuyên nghiệp rồi, thì tiếp theo là cách để chuyển tiếp trang 404 về một trang có nội dung, mà cụ thể ở đây là chuyển về trang chủ của website. Để thực hiện việc này bạn có 4 cách khác nhau để làm việc này: sử dụng code PHP và sử dụng plugin, thêm code file funtion.php, chỉnh sửa file .htaccess. Tùy vào khả năng về kỹ thuật của bạn để lựa chọn phương án phù hợp nhất.

Cách 1: Redirect trang bị lỗi 404 bằng code

Tạo 1 file 404.php trong thư mục theme mà bạn đang sử dụng với nội dung như sau ( thường wordpress đã có sẵn file 404.php), Tìm file 404.php ở đâu? bạn có thể vào theme wordpress – > editor – 404.php, hoặc bạn cũng có thể lên hosting để tìm kiếm, cái này cũng không khó khăn gì cả, nên mình cũng k cần phải hướng dẫn chi tiết.

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

Cách 2 : Dùng file .htaccess để chuyển hướng báo lỗi 404 về tùy chỉnh

Để làm được điều này ta mở file .htaccess và thêm vào dòng sau và lưu lại:

ErrorDocument 404 /404.html

Nếu website của bạn chưa có file .htaccess thì bạn có thể tạo và lưu ở thư mục gốc, ngang hàng với file index.
Bây giờ mỗi khi độc giả truy cập website của bạn khi gặp lỗi 404 đều sẽ được chuyển về trang chủ.

Cách 3 : Redirect trang bị lỗi 404 bằng plugin

Bước 1 : Đầu tiên, các bạn cần phải cài đặt và kích hoạt plugin All 404 Redirect to Homepage. Đây là một trong những plugins được đánh giá là tốt nhất để redirect các trang bị lỗi 404 về trang chủ.
Bước 2: Truy cập vào Settings => All 404 Redirect to Homepage. Tại đây, tiến hành thiết lập các tùy chọn cho plugin.
Trong đó:
404 Redirection Status: Chọn Enabled để kích hoạt, Disabled để vô hiệu hóa plugin.
Redirect all 404 pages to: Thiết lập trang mà bạn muốn redirect tới khi gặp lỗi 404. Bạn có thể để mặc định là trang chủ hoặc thiết lập một trang bất kỳ.
Bước 3 : Sau khi hoàn tất, click vào nút “Update Options” để lưu lại các thiết lập.
Lưu ý: Nếu bạn sử dụng plugin tạo cache, nhớ xóa cache sau khi thiết lập để đảm bảo plugin hoạt động một cách chính xác nhất.

Cách 4: Sửa file functions.php

Bạn chèn đoạn code sau 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;
}
}

Nếu bạn muốn chuyển hướng đến một trang khác (không phải trang chủ) thì bạn thay url trong hàm get_bloginfo(‘url’) thành link của trang bạn muốn chuyển hướng đến.