Tutorial Edit Page 404 (WordPress)

Halaman 404 di blog yang menggunakan WordPress biasanya terpapar apabila ada pautan yang telah dibuang atau telah bertukar. Apabila pelawat mencari sesuatu entri dan mereka tidak menjumpainya, mereka akan dibawa ke halaman 404 di blog korang.

Template bagi halaman 404 biasanya memang dah tersedia wujud pada mana-mana theme WordPress , tetapi bukan semua theme. Hanya sesetengah theme sahaja yang ada.

buat halaman 404 wordpress

Sistem WordPress telah disetkan secara automatik akan ke fail 404.php sekiranya tiada sebarang carian dijumpai.

Sekiranya fail 404.php tiada pada theme korang, ianya akan paparkan mesej ralat yang tersangat ringkas, buruk dan tak mesra pengguna.

Halaman 404 WordPress

Halaman 404 sedia ada biasanya hanya memaparkan teks-teks ralat yang ringkas seperti “Error 404 – Cannot Find Anything” atau “Error 404 – Page Not Found lah” atau sebagainya.

Bagi menampakkan blog korang lebih menarik dan mesra pengguna, adalah lebih baik jika korang berikan fungsi-fungsi tambahan pada halaman 404 tersebut. Ini bagi membolehkan visitore blog korang terus berada di blog korang walaupun mereka tidak menjumpai apa yang mereka cari.

Halaman 404 mempunyai kekuatan yang tersendiri untuk menarik minat pelawat dan memudahkan mereka melayari blog.

Jika blog korang tiada fail untuk paparkan mesej ralat 404, buat 1 fail kosong menggunakan Notepad atau Notepad++, masukkan kod di bawah ni, lepas tu save dan namakannya sebagai 404.php.

Kemudian, upload ke dalam fail theme blog korang. Di bawah ni adalah kod asas bagi fail 404.php:

Kod Fail 404.php

<?php get_header(); ?>

<div id="content" class="narrowcolumn">
<h2 class="center">Ralat 404 - Halaman Tidak Dijumpai.</h2>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Kod bagi fail 404.php seperti di atas ni akan memaparkan output mengggunakan tag H2 yang dibaca “Ralat 404 – Halaman Tidak Dijumpai.” — Ianya juga akan memaparkan bersama bahagian Header, Sidebar dan Footer blog korang.

Tetapi tu semua adalah optional dan korang boleh edit ikut citarasa atau sesuaikannya dengan theme blog korang.

Tutorial Mengubah Fail 404.php

Jom kita tambahkan fungsi ‘Kotak Carian’ pada halaman 404 bagi membantu pelawat membuat carian sekiranya mereka tiba di halaman 404 blog korang.

Cara ini biasanya akan membuat pelawat terus berada di dalam blog mencari entri-entri lain yang mungkin boleh menarik minat mereka.

Fail 404.php – Menambah Fungsi Kotak Carian

<?php get_header(); ?>

<div id="content" class="narrowcolumn">
<h2 class="center">Ralat 404 - Halaman Tidak Dijumpai.</h2>

<p>Cari Artikel Menarik:</p>
<?php include(TEMPLATEPATH . '/searchform.php'); ?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Masukkan Mesej Menarik di Halaman 404

Untuk memberi bantuan kepada pelawat yang terjumpa halaman 404 blog korang, korang boleh masukkan kata-kata atau pesanan yang menarik yang mungkin boleh membantu pelawat blog.

Contohnya:

<?php get_header(); ?>

<div id="content" class="narrowcolumn">
<h2 class="center">Alaa.. Saya tak jumpa info yang awak cari.</h2>
<p>Mungkin awak boleh gunakan 'Kotak Hikmat' kat bawah ni untuk cari lagi apa yang awak nak.</p>

<p>Cari Artikel Menarik:</p>
<?php include(TEMPLATEPATH . '/searchform.php'); ?>

<p>Awak boleh juga ke <a href='<?php bloginfo('home'); ?>'>Halaman Utama</a> atau 'Sitemap' blog saya untuk tengok artikel-artikel menarik yang saya dah tulis.</p>

<p>atau boleh bagi nombor fon, nanti saya call awak. :P</p>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 
Dengan cara ini, pelawat mungkin tertarik kerana mesej yang korang tulis tu lebih bersifat personal, seolah-olah korang adalah kawan mereka yang cuba untuk memberi bantuan atau cuba nak berkomunikasi dengan mereka.

Contoh yang ditunjuk kat atas tu berfungsi memberi beberapa pilihan kepada pelawat yang masuk ke halaman 404.

Halaman 404 akan memaparkan ‘Kotak Carian’ yang membolehkan pelawat membuat carian di blog, ada juga diberi link ke halaman utama dan juga halaman Sitemap, dan lain-lain (pandai-pandai la korang tambah).

Kombinasi ini akan membantu pelawat yang secara tak sengaja masuk ke halaman 404. Mereka diberi pilihan untuk terus kekal di dalam blog korang dengan bantuan fungsi-fungsi tambahan pada halaman 404.

Pastikan Halaman 404 Berfungsi

Korang boleh cuba try test halaman 404 yang korang buat tu berfungsi ataupun tak dengan cara layari URL atau permalinks halaman yang tak pernah wujud di blog korang.

Contoh:
1. http://domainblogkorang.com/page-ni-tak-pernah-wujud, atau
2. https://anarmnet.com/page-ni-tak-pernah-wujud.html

Ini akan membolehkan korang tengok halaman 404 yang korang buat tadi. Check sama ada halaman 404 tu terpapar mengikut apa yang korang dah edit ataupun tidak.

Cara Buat Page 404 ‘Full Page’

Setiap kod di atas tu boleh diubah mengikut citarasa korang menggunakan kod PHP atau HTML. Bagi sesiapa yang nak buat halaman 404 yang ‘full page’, korang boleh gunakan kod HTML asas untuk membina laman web:

Full Page 404 (Kod Asas Membina Laman Web – Statik)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ralat 404 - Halaman Tidak Dijumpai | BlogKorang.com</title>
</head>

<body>
<div id="content" class="narrowcolumn">
<h2 class="center">Ralat 404 - Halaman Tidak Dijumpai.</h2>
<p style="text-align:center;">CONTENT YANG KORANG NAK</p>
</div>

</body>
</html>

*Jika korang pilih nak guna cara ini, pastikan korang buang kod-kod di bawah:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Pastikan juga ianya diedit mengikut tetapan CSS theme yang korang gunakan, atau korang bleh tetapkan sendiri CSS khas untuk fail 404.php tersebut.

Penggunaan Gambar Background pada Halaman 404

Untuk membuat halaman 404 lebih menarik dan unik, korang boleh masukkan gambar background yang korang suka.

Di bawah ni adalah contoh penggunaan gambar background pada halaman 404 yang mungkin boleh memberi inspirasi kepada korang:

1. Mixx.com

mixx.com

2. Mundofox.com

mundofox.com

3. Anarm.net

anarm.net

4. CSSRemix.com

cssremix.com

5. Agens.no

agens.no

6. Duoh.com

duoh.com

7. Huml.org

Huml.org

8. Wufoo.com

wufoo.com

9. Jamie Huskisson

Jamie Huskisson

10. Cisdel.com

Cisdel Moo

 
Ada banyak cara boleh kita gunakan untuk buat halaman 404 di blog. Gambar-gambar kat atas tadi tu hanya beberapa contoh penggunaan halaman 404 yang sangat menarik.

Korang boleh try and error menggunakan struktur kod WordPress dan juga HTML (termasuk CSS) dalam menghasilkan halaman 404 yang unik dan istimewa di blog korang.

Jangan lupa masukkan fungsi-fungsi yang boleh membantu pelawat-pelawat yang singgah di blog korang kerana ianya adalah sangat penting.

Proses pembelajaran ‘Try and Error’ bagi mengedit fail theme lebih mudah dilakukan di Localhost dan juga dengan bantuan ‘Firebug‘.

Kalau ada apa-apa error atau ada kemusykilan, sebarang pertanyaan boleh dikemukakan di bahagian komen. Yang mana aku boleh bantu, aku akan bantu. InsyaAllah..

Sumber Rujukan

  • Creating an Error 404 Page
  • 404 Error Pages Reloaded
  • 404 Error Pages, Make It Useful
  • 25 Perkara Menjadikan Tema Blog Lebih Menarik
  • (Tutorial) Jom Buat Page 404 Error

51 Comments

  1. Fuiyoo! Baik punya tutorial…thanks for sharing with me…kalo ada nak kongsi gambar menarik untuk page 404 lagi, update lagi…

  2. dah lama aku nak masukkan gambar yang menarik dan unik tapi takde idea lagi ar.. aku letak ayat je.. haha nanti ar bila free aku buat..

  3. SALAM..
    nk tany kenapa ek setiap kali komen dan tekan kat enbale commment luv latest entry sy selalu je kuar yang tajuk “betullah tu” padahal ada entry yg paling lates tapi kenapa dia asyik keluar yg tu je ek??

  4. Thanks.. memang menarik ni..
    byk juga yg best wp ni.. newbie lgi pasai wp ni
    tutorial yg amat bagus.. thanks you..

    • @akuorgkmpng, aku rasa sampai bila2 pon takkan habis belajar kot ilmu WP ni.. kalau rajin google, mungkin boleh jumpe banyak blog yg share ilmu2 tentang WP.. semua best2.. memang tak rugi pilih WP sebagai platform utk blogging..

  5. Memang cun la bro anarm zombie tu…hehe, putih bersih je kan….. :biggrin: rasa cam nak tukar background warna putih je..huhu

  6. woah, tq2 Anarm …yang bergambar 404 tu menarik kalau buat….kalo tukar permalink mmg akan error 404 kat sitelinks google kan…so boleh guna yg nih eh….

  7. waaa, nampak cam kena byk skill jer nie.. penah blajar dulu waktu menjinakkan diri ngan php dulu2.. hoho, tapi xde masa lagi nak apply, lagipon apelaa sangat yang orang search kat blog aku.. haha

  8. dan juga, baru perasan… plugin utk komen ini? sebab di tak reload page, rasa unik…

    btw, this my 1st visit..

    • @MokhZam, dari segi saiz tu tak berapa pasti.. around 800px ok kot (untuk yg full page).. kalau yang nak sertakan sekali dgn header, sidebar dan footer, kena ikut lebar bahagian content bagi theme yg digunakan..

  9. akhirnya!
    bookmark siap siap. balik rumah nanti aku try. hehe
    thnks bro sharing. :wink:

    haritu try buat sendiri, hampagas tak jadi. certain browser je boleh. :tongue:

  10. Dah mody page 404 tapi buat sempoi je. Lepasni nak buat background lak. Page 404 anarm nampak smart.

  11. aku dah terbaca dah pasal 404 sebelum ni. tapi malas la nak buat. biasa jadi asal mcm tu dah ler…hahaha.

  12. theme yang dulu buat 404 ni…
    tapi selalu sangat tukar theme……tak peduli pula kat dia
    nak kena buat balik ni…

    pernah install plugin redirect tu…tapi blog terus tak boleh akses
    sekali dua try….sambil goreng ikan, sambil tumis sayur

    alih2..tak buat2 sampai la ni…………

    • @Kujie, pakai plugin redirect pon ok jugak.. takde la visitor nampak page “Cannot Find lah”.. tak mesra langsung.. hehe..

      script untuk redirect ade masukkan jugak tadi, tapi buang balik sebab rasa macam panjang sangat pulak entri ni.. mungkin boleh post jadikan ‘episod 2’ kot.. hmm..

  13. aku selalu tersenyum bila tgk post mcm ni. post yg mudah difahami dan lengkap dari A-Z… aku tersenyum sbb aku tak pernah lagi berjaya buat post mcm ni :biggrin:

    • @zaryl, ohh.. ingatkan tersenyum sebab dapat backlink.. hehe.. takpe la.. sama2 kongsi, sama2 bleh buat rujukan.. ko lagi terer kot main2 coding ni.. kalau ada error apa2 kt code yg aku kongsi ni, mintak tlg bagitau ye.. menaip dlm keadaan mengantuk tadi.. macam2 bleh jadi.. :pinch:

Leave a Reply

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