Cara membuat halaman 404 khusus dalam tema anak WordPress

Diterbitkan: 2018-10-23

Tidak peduli seberapa baik desain dan arsitektur situs web Anda, pengguna akan menemukan halaman 404 di beberapa titik. Ini bisa menjadi sesuatu yang sederhana seperti mengetikkan URL dengan kesalahan ejaan. Misalnya, jika Anda memiliki halaman kontak yang ditemukan di www.website.com/contact dan seseorang mencoba membuka www.website.com/contacts, kemungkinan besar mereka akan diarahkan ke halaman 404. Selain itu, penyesuaian konten situs web mungkin tidak selalu memperhitungkan halaman yang dapat dipindahkan tanpa tautan dialihkan. Mudah-mudahan, pengalaman ini tidak terlalu sering terjadi pada pengguna Anda, tetapi ketika itu terjadi, ini adalah kesempatan untuk menawarkan bantuan dan membuat sesuatu yang unik untuk merek Anda.

Kemungkinan Anda tidak asing dengan 404 halaman di web, jadi Anda mungkin sudah memikirkan desainnya. Jika tidak, dengan Googling “halaman 404 keren”, Anda akan menemukan segala macam inspirasi. Desain bisa apa saja dari serius hingga lucu, teks-berat atau minimalis, atau di antara keduanya.

Di bawah ini adalah beberapa favorit saya. Mereka adalah contoh bagus tentang bagaimana kreativitas digunakan dalam desain halaman.

gambar

halaman figma kustom 404

Figma adalah halaman 404 yang sederhana, tetapi grafiknya sangat pas dengan titik-titik vektornya. Saya suka betapa sederhana dan beraninya; itu benar-benar semua yang dibutuhkan.

Airbnb

halaman 404 khusus airbnb

Contoh ini menawarkan sedikit lebih banyak dalam hal konten. Pendekatan ilustratif mengiklankan elemen humor. Ini termasuk beberapa tautan utama. Jika pengguna salah mengetik sesuatu, mungkin saja mereka dapat menemukan apa yang mereka cari dalam daftar.

Simpanse Surat

halaman 404 kustom mailchimp

Desainnya selalu menyenangkan di situs MailChimp, terutama dengan desain ulang baru-baru ini. Ini memiliki unsur humor baik dalam teks dan ilustrasi.

Dapatkan tema Genesis Framework & StudioPress gratis!

Saat Anda menghosting situs Anda di Flywheel, Anda akan memiliki akses ke lebih dari 30 tema WordPress premium (termasuk Genesis!) langsung dari dasbor kami yang menyenangkan. Nilainya lebih dari $2.000 yang bisa Anda mulai hanya dengan $15/bulan! Pelajari lebih lanjut di sini.

Membuat halaman 404 khusus

Hal pertama yang pertama: Semua penyesuaian harus dilakukan dalam tema anak. Dengan begitu, modifikasi apa pun tidak akan ditimpa oleh pembaruan pada tema biasa. Halaman 404 ini akan menjadi file dalam tema anak, tepatnya file bernama 404.php .

Bagaimana cara menambahkan variabel CSS untuk menyesuaikan tema anak WordPress

Variabel CSS, juga disebut sebagai properti kustom CSS, memungkinkan untuk digunakan kembali dengan mudah di lembar gaya CSS Anda. Jika Anda telah menyelesaikan pekerjaan dengan tema anak WordPress, Anda mungkin mendapati diri Anda melakukan banyak...

Juga, ingatlah untuk melakukan ini di lingkungan pengujian. Saat file tema sedang diubah, selalu ada kemungkinan kesalahan sintaksis yang dapat membuat situs down.

1. Buat file baru

Saat Anda memiliki tema anak, langkah pertama adalah membuat file baru untuk mulai bekerja. Anda akan ingin membuka folder tempat Anda membuat tema anak dan menambahkan file 404.php .

2. Edit filenya

Contoh dasar

Contoh ini menjelaskan halaman yang memiliki teks dan gambar. Ide desain di sini adalah untuk membuat sesuatu yang sederhana yang membutuhkan grafik bergambar.

Paste kode berikut ke halaman 404.php . Ini adalah awal yang mendasar. Anda dapat memodifikasi sesuatu ke struktur yang berbeda untuk benar-benar menjadikannya milik Anda sendiri (yaitu, jika Anda tidak menginginkan bilah sisi, itu dapat dihapus). 

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>
contoh tutorial 404 halaman tema anak kustom wordpress dasar dengan grafik kereta

Ada beberapa modifikasi yang harus Anda lakukan. Salah satunya adalah mengubah jalur ke gambar dan memasukkan judul yang Anda inginkan. Jangan lupa untuk menulis pesan khusus dan kemudian simpan perubahan Anda.

Jika Anda mengikuti petunjuk sejauh ini, Anda telah membuat template khusus dengan gambar, pesan dan header, sidebar, dan footer standar. (Anda mungkin memiliki ini di halaman lain juga.)

Pendekatan widget

Ini opsional, tetapi banyak desainer lebih suka bekerja dengan area widget. Lebih mudah untuk membuat perubahan dan lebih mudah dipelihara. Misalnya, widget adalah cara yang efisien untuk menampilkan artikel blog terbaru dan populer.

area widget dasbor wordpress tutorial dasar 404 halaman tema anak kustom wordpress

Menambahkan widget

Untuk menambahkan widget ke 404.php file , Anda harus membuat area widget baru. Tema anak membutuhkan file functions.php , jadi sekarang saatnya untuk memeriksa ulang apakah tema anak memilikinya.

Dalam file functions.php , sebuah snippet akan dibutuhkan untuk menambahkan widget baru pada halaman. 

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

Cuplikan ini hanya menambahkan widget. Untuk benar-benar mulai menggunakannya, fungsi ini harus dipanggil. Ini akan dipanggil dalam file 404.php . Awasi lokasi di mana Anda menginginkan area widget ini.

Salin dan tempel kode berikut di mana Anda ingin menampilkan widget baru (misalnya, setelah judul dan teks): 

<?php dynamic_sidebar( '404' ); ?>

Sekarang setelah Anda menentukan tempat untuk menampilkan area widget baru, sekarang saatnya untuk menambahkan konten widget dengan membuka Appearance > Widgets . Di sinilah Anda dapat memilih hal-hal seperti blok HTML, Postingan Populer, atau widget lainnya untuk halaman 404.

area widget dasbor wordpress menyisipkan contoh tutorial 404 halaman tema anak kustom wordpress dasar dengan grafik kereta

Baik Anda membuat sesuatu yang sederhana atau halaman dengan banyak tautan, membuat halaman 404 khusus cukup mudah. Dengan menggunakan tema anak dan memanfaatkan widget, ada kemungkinan desain yang tidak terbatas.

Mencari lebih banyak cara untuk menyesuaikan situs Anda? Lihat tutorial ini:

  • Bagaimana cara menambahkan variabel CSS untuk menyesuaikan tema anak WordPress
  • Kustomisasi sederhana untuk tema anak Genesis Anda
  • Cara membuat dan menggunakan bidang khusus di WordPress