Apa masalahnya?

Hari ini saya sedang menyelesaikan project website baru. Dan seperti biasaaaaaa… saat proses pengerjaan, selalu adaaaaaa aja masalahnya 😅

Riskan banget sama error, karena memang saya bikin theme nya dengan coding manual dari 0, tanpa bantuan page builder sama sekali (seperti elementor), jadi murni coding manual dari nol pakai HTML, CSS, PHP, dan Javascript.

Singkat cerita aja nih ya. Jadiiiii, saat pengerjaan di halaman toko, komponen-komponen woocommerce seperti tombol, textbox, dll. Tampilannya berantakan. Yaaaaa kayak CSS yang gagal load gitu.

Dulu saya pernah kok ngalamin masalah kayak gini, dan berhasil saya tangani. Tapi lupa waktu itu saya apain 😂

Nah biar engga lupa – lupa terus, sekarang tiap kali ada kendala, saya bakal tulis di blog aja, biar besok besok engga bingung muter-muter ngabisin waktu googling sana sini.

Oke, langsung aja ke masalahnya. Seperti yang kalian lihat, dibawah ini adalah penampakan website yang sedang saya kerjakan.

Dimana di bagian detil produk, ataupun halaman-halaman yang merupakan bagian dari woocommerce, komponen-komponennya terlihat berantakan karena CSSnya tidak terload.

Saya cek CSS Bootstrap, padahal udah terload sempurna. Itu bisa dilihat dari navbar dan footer semuanya normal.

Pokoknya muter-muter disitu aja, saya udah cari jawabannya kemana mana, tapi engga nemu-nemu solusi.

Mungkin karena kebanyakan orang-orang diluar sana, teliti banget kalau lagi kerja, engga ceroboh kayak saya ini lah intinya 😂, jadinya tutorialnyapun sampai engga ada gitu loh.

Apa solusinya?

Akhirnya saya coba nenangin diri, dan membuka coding website-website saya yang sebelum-sebelumnya, dan merumuskan sendiri kenapa di website yang itu bisa, sedangkan yang ini engga bisa.

Setelah berapa lama mikir, akhirnya jreeeng… jreeeeng… langsung nepok jidat. 😅

Ya pantes aja tampilan woocomarce nya berantakan gini. Ternyata di bagian header.php saya belum pasangin wp_head();

Setelah sadar akan dosa itu, segera saya tulis wp_head(); di posisi paling atas di header.php

wp_head adalah sebuah fungsi wordpress untuk memanggil komponen-komponen default wordpress mulai dari CSS, font, dll. Termasuk komponen-komponen dari plugin-plugin yang kita pasang di website kita, semuanya di load dari wp_head();

Ohya jangan lupa juga ya, Header kan pasangannya Footer kan?, Nah di bagian footer.php kita juga harus tambahkan wp_footer(); karena fungsi wp_footer, adalah untuk memanggil komponen-komponen javascript default dari wordpress dan plugins.

Nah setelah itu, silahkan cek kembali pastikan koding diketik dengan tulisan yang benar dan diletakan ditempat yang benar. Kalau sudah oke, silahkan simpan, lalu coba load kembali halaman websitenya. Jreeeng.. jreeeng…

Kesimpulannya

Jangan ngoding kalau lagi depresi wakakkakaka. Sedia selalu kopi dan camilan biar engga gampang pingsan. Dan yang paling penting kalau nemu error seperti ini, solusinya :

Pasang :

wp_head();

Di file header.php pada baris pertama.

Dan jangan lupa juga, pasang :

wp_footer();

Di file footer.php pada baris paling akhir.

Semoga bermanfaat.

Salam,

Putu Adi.