Cara Mengubah Tampilan Halaman Error 404 Menjadi Popular Post dan Random Post

Info Menarik – Pada umumnya tampilan halaman error 404 itu menyajikan informasi yang kurang menarik. Biasanya yang tampil adalah sebuah informasi bahwa halaman atau artikel yang kita cari tidak ada ata Page Not Found. Nah, agar halaman error 404 ini dapat bermanfaat bagi pengunjung maka kita ubah tampilannya menjadi tersedianya widget Popular Post dan Random Post. Dengan begitu ketika pengunjung masuk ke halaman error 404 maka kemungkinan akan klik widget-widget tersebut. Dan berikut cara mengubah tampilan halaman error 404 menjadi Popular Post dan Random Post.

Baca Juga: Cara Membuat Halaman Error 404 di WordPress Lengkap Dengan Kode Daftar Isi

Apa itu Halaman Error 404?

Halaman error 404 adalah pesan yang muncul ketika pengguna mencoba mengakses halaman web yang tidak pengunjung temukan atau tidak tersedia di server. Pesan tersebut mengindikasikan bahwa server tidak dapat menemukan sumber daya yang diminta, biasanya karena alamat URL yang salah, halaman telah tidak ada, atau terjadi kesalahan teknis lainnya.

Selanjutnya angka 404 merupakan kode status HTTP yang dikirim oleh server sebagai tanggapan terhadap permintaan yang gagal. Kode status HTTP adalah cara standar untuk berkomunikasi antara server dan klien, dan setiap kode memiliki arti spesifik. Kode 404 menunjukkan bahwa sumber daya yang diminta tidak dapat pengunjung temukan.

Kemudian ketika pengguna melihat halaman error 404, itu berarti mereka tidak dapat mengakses halaman yang mereka cari. Umumnya, halaman error 404 memiliki pesan yang memberitahu pengguna bahwa halaman tidak pengguna temukan dan memberikan beberapa petunjuk atau tautan alternatif untuk membantu mereka menemukan apa yang mereka cari.

Penting bagi pengelola situs web untuk mengelola dan menangani dengan benar halaman error 404. Beberapa praktik umum termasuk memberikan pesan yang jelas dan informatif kepada pengguna, menyediakan tautan balik ke halaman beranda atau halaman lain yang relevan, dan memastikan bahwa tautan internal di situs web berfungsi dengan baik.

Agar pengunjung tidak lari ketika masuk ke halaman error 404, maka coba Kamu tampilkan sejumlah informasi alternatif seperti link widget Popular Post atau Random Post. Dengan begitu kemungkinan pengunjung akan bertahan di situs Kamu dengan klik link-link artikel yang tampil pada widget.

Cara Mengubah Tampilan Halaman Error 404 Menjadi Lebih Menarik

1. Mengubah Halaman Error 404 Menjadi Popular Post

Tutorial ini khusus bagi Kamu pengguna CMS WordPress saja. Dan tentunya WordPress yang kita pakai adalah WordPress hosting sendiri bukan WordPress.com.

1. Menyisipkan Kode di File Error 404

Kemudian untuk menampilkan daftar tulisan populer atau Popular Post blog yang kita kelola di halaman error 404 adalah kita hanya membutuhkan kode seperti berikut ini:

<h3>Popular Posts</h3>
<div class="popular_post">
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a></li>
<?php } } ?>
</ul>
</div>

Sisipkan kode tersebut di dalam file 404.php tema yang Kamu gunakan. Letakkan di bawah kode </header> yang berada di dalam file 404.php

Untuk masuk ke dalam file 404.php bisa melalui cPanel Hosting atau dashboard wp-admin WordPress.

Kode untuk menampilkan popular post di atas saya setting hanya menampilkan 10 artikel saja. Jika Kamu ingin mengubahnya, tinggal Kamu sesuaikan saja pada DESC LIMIT 0 , 10

2. Menyisipkan Kode CSS

Agar tampilan tulisan populer atau Popular Post lebih menarik lagi, silakan Kamu tambahkan style CSS sesuai dengan selera. Contoh saya menggunakan style CSS seperti ini:

/*-[ Popular Post ]-------------------*/
.popular_post a{
display:block;
-webkit-transition: all 0.100s ease-out;
}
.popular_post li a:hover{
background: #555556;
color: #ffffff;
text-decoration: none;
padding-left: 10px;
}

Sisipkan kode tersebut di dalam file style.css tema yang Kamu gunakan.

2. Tampilan Error 404 Menjadi Random Post

1. Menyisipkan Kode di File Error 404

Untuk menampilkan halaman error 404 menjadi daftar tulisan atau artikel secara acak (Random Post) intinya masih sama dengan cara di atas. Bedanya terletak pada kodenya saja. Sedangkan kode untuk menampilkan tulisan acak atau Random Post adalah sebagai berikut:

<h3>Random Post</h3>
<div class="random_post">
<ul>
<?php
$rand_posts = get_posts('numberposts=10&orderby=rand');
foreach( $rand_posts as $post ) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>

Simpan kode tersebut di dalam file 404.php tema yang Kamu gunakan. Untuk menyesuaikan tampilan jumlah artikel Random Post, Kamu ubah pada kode numberposts=10

2. Menyisipkan Kode CSS

Kemudian agar tampilan Random Post lebih menarik, silakan Kamu modifikasi lagi style CSS-nya. Contoh:

/*-[ Random Post ]-------------------*/
.random_post a{
display:block;
-webkit-transition: all 0.100s ease-out;
}
.random_post li a:hover{
background: #555556;
color: #ffffff;
text-decoration: none;
padding-left: 10px;
}

Sisipkan kode tersebut di dalam file style.css tema yang Kamu gunakan.

Kira-kira nanti hasilnya akan seperti ini:

Mungkin hanya itu saja artikel ini dan semoga bermanfaat bagi siapapun yang membutuhkan. Sampai bertemu lagi di artikel keren dan menarik lainnya …