Cara Membuat Halaman 404 Menjadi Lebih Profesional. Kesalahan 404 tidak baik untuk pengunjung. Dalam artikel ini, kami akan berbagi cara membuat halaman 404 menjadi lebih profesional di WordPress. Sehingga halaman 404 menjadi lebih bermanfaat. Halaman 404 biasanya adalah halaman yang paling diabaikan di sebagian besar situs.
Halaman 404 di WordPress ini berada di file templat bernama 404.php. Jika konfigurasi tidak pas, maka halaman 404 akan terlihat berantakan. Saat pengunjung diarahkan ke halaman 404, mereka akan merasa frustrasi Karena mereka tidak bisa menemukan apa yang mereka cari.
Oleh sebab itu maka perlu membantu pengunjung menemukan halaman yang tepat. Sobat bisa membantu menjadikan tampilan menjadi lebih baik misalnya menunjukkan bagian lain dari situs yang bisa mereka kunjungi, dll.
Cara Membuat Halaman 404 Kustom di WordPress
Hal pertama yang perlu dilakukan adalah dengan membuat template halaman 404 khusus. Caranya bisa dengan mengedit file 404.php di tema WordPress atau membuat template halaman baru di child theme. Bilamana mengedit tema secara langsung, maka sebaiknya membackup tema wordpress tersebut.
Untuk membuat halaman 404 Menjadi Lebih Profesional, bisa dengan menambahkan elemen bermanfaat seperti posting populer, posting terbaru, arsip tanggal, daftar semua kategori, dll.
Menampilkan Most Popular Posts
Bisa menggunakan salah satu plugin posting WordPress populer terbaik untuk menampilkan posting populer di halaman 404.
Pertama instal dan aktifkan plugin “WordPress Popular Posts” di situs web. Setelah aktivasi, tambahkan tag template dibawah ini ke file 404.php di mana ingin menampilkan posting populer.
<?php wpp_get_mostpopular(); ?>
Menampilkan Most Commented Posts
Bagian komentar yang paling banyak dikomentari juga bisa dari plugin “WordPress Popular Posts” yang telah diaktifkan. Cukup tambahkan tag templat ini jika ingin menampilkan posting yang paling banyak dikomentari.
<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
Menampilkan Recent Posts
Berikut Cara termudah menampilkan posting terbaru dengan menambahkan tag template ini di 404 template.
<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
Menampilkan Random Posts
Apabila ingin menampilkan daftar posting acak di WordPress, maka bisa dengan menambahkan kode ini.
<ul>
<?php
$posts = get_posts('orderby=rand&numberposts=5');
foreach($posts as $post) { ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</li>
<?php } ?>
</ul>
Contoh Template 404 untuk WordPress
Berikut contoh file 404.php menggunakan templat WordPress default tema Twenty Thirteen’s 404.
<?php
/**
* The template for displaying 404 pages (Not Found)
*
*/
get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<header class="page-header">
<h1 class="page-title"><?php _e( 'Not found', 'twentythirteen' ); ?></h1>
</header>
<div class="page-wrapper">
<div class="page-content">
<h2><?php _e( 'This is somewhat embarrassing, isn’t it?', 'twentythirteen' ); ?></h2>
<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p>
<?php get_search_form(); ?>
<h3>Check out some of our popular content:</h3>
<div class="col1">
<div class="col-header">
<h3>Popular Posts</h3>
</div>
<?php wpp_get_mostpopular(); ?>
</div>
<div class="col2">
<div class="col-header">
<h3>Most Commented</h3>
</div>
<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
</div>
<div class="col3">
<div class="col-header">
<h3>Recent Posts</h3>
</div>
<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
</div>
</div><!-- .page-content -->
</div><!-- .page-wrapper -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
Kemudian tambahkan CSS agar semakin mempercantik tampilan. Misalnya seperti ini.
.col1, .col2, .col3 {
width:30%;
float:left;
padding:0px 10px 10px 10px;
height:450px;
margin:0px;
}
.col3:after{
clear:both;
}
.col-header {
background:#220e10;
color:#FFF;
margin:0px;
padding:1px;
text-align:center;
}
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar/review.
Komentar