Home / WordPress / Cara Modifikasi Tampilan Halaman Error 404 Di WordPress

Cara Modifikasi Tampilan Halaman Error 404 Di WordPress

Cara Modifikasi Tampilan Halaman Error 404 Di WordPress – Halaman Error 404 atau istilah lainnya Page Not Found adalah sebuah halaman khusus yang dibuat untuk menampilkan link mati atau link tidak berfungsi dengan benar. Link mati ini bisa disebabkan karena link telah dipindahkan, atau link tersebut telah dihapus oleh pemiliknya. Sehingga jika Anda menuju link mati tersebut, yang tampil hanyalah halaman Error 404.

Baca Juga : Cara Membuat Tombol Share Artikel Ke Sosial Media

Halaman Error 404 ini bisa juga disebabkan karena kesalahan dalam mengetik URL atau alamat pada suatu web. Kesimpulannya halaman Error 404 adalah tayangan halaman untuk menunjukkan tidak tersedianya tulisan atau artikel yang di cari di sebuah web.

Cara-Modifikasi-Tampilan-Halaman-Error-404-Di-WordPress

Untuk lebih jelasnya, Anda bisa lihat halaman Error 404 web Info Menarik :

Secara default, halaman Error 404 tampilannya tidak menarik. Dan kemungkinan pengunjung yang tersesat ke halaman Error 404 akan kesal karena tulisan yang dia cari tidak ditemukan. Sebagai gantinya untuk mengobati kekesalan pengunjung jika tidak sengaja mampir ke halaman Error 404, maka Anda sebagai pemilik blog bisa memodifikasinya agar lebih menarik lagi.

Baca Juga : Cara Membuat Daftar Isi Di WordPress Tanpa Plugin

Bukan hanya dari segi desain saja yang Anda terapkan di halaman Error 404, tapi sebaiknya Anda modifikasi juga halaman Error 404 dengan menambahkan arsip tulisan blog Anda. Sehingga pengunjung yang mampir ke halaman Error 404 tidak akan terburu-buru untuk menutup blog Anda. Dia akan mempertimbangkan dulu dengan membaca-baca daftar arsip tulisan blog Anda yang ditampilkan di halaman Error 404.

Cara Membuat Halaman Error 404 Di WordPress

Jika tema yang gunakan tidak ada halaman khusus untuk menampilkan halaman Error 404, artinya halaman Error 404 web Anda hanya tampilan default dari hosting Anda. Maka sebaiknya Anda buat dulu sebuah halaman khusus untuk menampilkan halaman Error 404, caranya adalah copy kode berikut dan paste di Notepad lalu simpan dengan nama 404.php. Kode php dibawah sudah saya cantumkan dengan kode untuk menampilkan arsip atau daftar isi blog Anda.

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css" />
 <div class="content-404">
 <!-- BEGIN: CONTENT -->
 <!-- BEGIN: 404 -->
 <p style="color:#F30;text-align:center;padding: 100px 0 50px 0;font-size:100px;font-weight:bold;" >404</p>
 <p style="color:#0000DD;text-align:center;font-size:30px;font-weight:bold;" >Ma'af ! Halaman yang anda cari tidak dapat ditemukan</p>
 <p style="color:#222;text-align:center;font-size:20px;font-weight:bold;">Mungkin ada beberapa alasan tentang hal ini :</p>
 <p style="color:#3F9508;text-align:center;font-size:17px;font-weight:bold;">"Halaman telah dipindahkan, dihapus, diganti namanya atau URL tidak benar."</p>
 <p style="color:#222;text-align:center;font-size:20px;font-weight:bold;">Saran!</p>
 <p style="color:#F30;text-align:center;font-size:17px;font-weight:bold;">"Gunakan pencarian sekali lagi dengan mengunjungi link <a style="color: #0000DD;" href="http://info-menarik.net/" target="_blank">Info-Menarik.Net</a> untuk menemukan artikel yang Anda cari!"</p>
 <p style="color:#222;text-align:center;font-size:20px;font-weight:bold;">Atau bisa memilih Daftar Artikel yang tercantum di deretan Daftar Isi di bawah ini :</p>
 <div id="arsip">
 <div id="404">
 <div class="arsip-404">
 <p style="color:#B11C42;text-align:center;font-size:30px;font-weight:bold;" >Daftar Isi Info-Menarik.Net</p>
 <ol>
 <?php $cats = get_categories('exclude=');
 foreach ($cats as $cat) {
 echo "<li><h4>".$cat->cat_name." :</h4>";
 echo "<ol>";
 query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
 while(have_posts()) {
 the_post();
 $category = get_the_category();
 if ($category[0]->cat_ID == $cat->cat_ID) {
 echo '<li><a target="_blank" href="'.get_permalink().'">'.get_the_title().'</a>
 </li>';}}
 echo "</ol>";
 echo "</li>";}?>
 </ol>
 </div>
 </div>
 </div>
 <!-- END: 404 -->
 <!-- END: CONTENT -->
 </div>

Upload file php 404 Anda ke tema WordPress yang Anda gunakan di File Manager > Web Root (public_html/www) > wp-content > themes > tema Anda melalui CPanel Hosting Anda.

Selanjutnya Anda copy paste CSS berikut di style.css tema yang Anda gunakan. Bisa memalui CPanel atau Dashboard wp-admin.

/*-[ 404 ]-------------------*/
 .content-404{
 background: url(images/background404.png);
 }

Untuk background, bisa Anda rubah dengan selera Anda. Bisa menggunakan kode warna atau gambar lain. Jika Anda menggunakan gambar sebagai background halaman Error 404, Anda harus mengupload gambar dulu ke File Manager > Web Root (public_html/www) > wp-content > themes > tema Anda > images. Lihat tulisan saya tentang Cara Merubah Gambar Default Avatar WordPress Tanpa Plugin. Dan sesuaikan nama URL gambar diatas dengan nama URL gambar yang Anda upload. Sebagai referensi, Anda bisa download gratis pilihan gambar lain di Subtle Patterns.

Copy paste juga CSS berikut di style.css tema yang Anda gunakan. Bisa memalui CPanel atau Dashboard wp-admin. Style ini untuk merubah tampilan arsip atau daftar isi yang ditampilkan di halaman Error 404.

*-[ arsip-404 ]-------------------*/
 #arsip {
 padding:5% 10% 5% 10%;
 }
 #404 {
 width:100%;
 }
 #404 h1{
 text-align:center;
 font-size:2.5em;
 font-family: Arial;
 color:#b11c42;
 }
 .arsip-404 li {
 padding-bottom: 1%;
 }
 .arsip-404 li h4{
 padding-top: 3%;
 }
 .arsip-404 li a{
 color:#0074a2;
 font-size:15px;
 font-family: Arial;
 display:block;
 width:auto;
 border-bottom: 1px solid #707070;
 box-shadow: 0 1px 0 #fff;
 -webkit-transition: all 0.100s ease-out;
 }
 .arsip-404 li a:hover{
 background: #555556;
 color: #ffffff;
 text-decoration: none;
 padding-left: 10px;
 }

Sekarang halaman Error 404 blog Anda sudah berbeda dengan tampilan blog lainnya. Karena halaman Error 404 blognya sudah dimodifikasi lagi.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

18 comments

  1. wah… yang wp.com cuman bisa nyimak gan..

  2. Eror 404 itu memang sebaiknya dihindari demi kesehatan website di mata google. Tapi kadang kita juga sulit menghindari 404 ini.

    • Betul mas, Error 404 kalau kesalahan pemilik blog seperti link URL telah dihapus atau dipindahkan bisa kita perbaiki dengan bantuan Google WebMaster (Crawl Error). Tapi kalau kesalahan pengunjung blog seperti kesalahan dalam mengetik judul artikel yang ia cari, itu sepertinya tidak bisa diperbaiki. Solusinya kita modifikasi halaman Error 404 dengan tampilan arsip atau daftar isi blog.

  3. Tampilan halaman Eror 404 untuk kesehatan website memang harus di perkecil walau untuk menghindarinya tidak mudah juga ya gan…. he,, he, he,,,

    • Iya gan, dengan rajinnya pantau halaman Crawl Error di WEB Master Google itu sudah cukup. Tapi sebaiknya modifikasi juga halaman Error 404 ini. Agar pengunjung yang nyasar tidak cepat kabur meninggalkan blog kita (antisipasi saja).

  4. Wahh bagus nih :D buat para visitor yang kesasab jadi bisa membantu :) ntar saya coba hehe

  5. informasi yang sangat membantu,teriamakasih sudah share :)

  6. Gan pas nempatin code di css nya pas code mana gan soalnya banyak code di style css saya

  7. bagaimana jika ingin menganti 404 dengan random post.

    jadi ketika ada yg masuk ke 404 maka akan otomatis di suguhi random post

    • Gampang mas, tambahkan kode berikut di dalam file 404.php

      < ?php $rand_posts = get_posts('numberposts=5&orderby=rand');
      foreach( $rand_posts as $post ) : ?>
      ">< ?php the_title(); ?>
      < ?php endforeach; ?>

      Silakan sesuaikan lagi jumlah random post yang ingin ditampilkan pada numberposts Kemudian untuk mempercantik tampilan random post, mas bisa modifikasi lagi dengan menambahkan stylenya.

  8. style.css nya ga berhasil ni.
    silahkan lihat hasilnya
    gmcomputindo[dot]com/?page_id=145
    Tampilan saya malah keluar dari thema,…
    Mohon pencerahan…

    • Ada yang salah di style.css ini :

      ul, ol {
          margin: 0 0 15px 25px;
          padding: 0;
      }

      Seharusnya :

      ul, ol {
          margin: 0 20px 50px 40px;
          padding: 0;
      }

      Agar lebih rapi lagi, hilangkan css ini :

      .content-404 {
          background: url(hxxp://gmcomputindo[dot]com/wp-content/uploads/2016/04/cropped-cropped-New-Logo2-jpg-2.jpg);
      }
  9. Fadel Rizki Mubarok

    Kang kalo buat iklan di artikel kayak diatas sama di sidebar pake plugin apa?
    Saya pake wordpress self host

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *