Lumayan lama nggak nemu – nemu, cara nampilin baris code html, php, javascript, ataupun css, di blog post, tiap lagi ngebahas yang ada hubungannya sama code. Sebenernya, gampang aja kalau di cari tau, cuman emang males aja nyari taunya.
Tapi tiap kali post blog baru yang ada codenya, bingung lagi… bingung lagi…. saking malesnya nyari, saya lebih sering screenshoot aja, lalu gambarnya saya tempel di blogpost. Biar cepet aja.
Sempat pakai plugin dari codepen embed, tampilannya bagus sih. cuman repotnya, tiap kali mau nampilin code di blogpost, kita harus login dulu ke codepen.io setelah itu bikin pen baru dulu. baru pen itu kita embed ke blogpost kita. Ahhhhhh ribet banget pokoknya.
Tadi sambil nyari nyari tutorial, ehhh ada blog yang tampilan baris kodenya ini rapi banget. Langsung kepikiran, karena selama ini saya sulit banget kalau mau bikin blogpost yang nampilin code seperti ini.
akhirnya saya inspect elements. lalu cari tau, element ini namanya apa. Ketemulah namanya CodeMirror.
Ya sudah, saya coba cari di wordpress plugins, ketemu.
Saya coba install, dan cobain.
Saya coba pakai sampel code dari bootstrap.
Dan hasilnya seperti ini.
Akhirnya, mulai sekarang bisa nampilin sampel code lebih profesional hehehehe.
Ini adalah salah satu website client saya. dan tiba – tiba doi chat whatsapp whatsapp, bilang ada error di bagian atas tiap halaman. Setelah saya cek, ternyata benar. Bahkan di halaman WP Adminnya juga muncul error yang sama.
Sebelum nyari info di google, saya coba cari tau sendiri masalah apa apa, dengan cara melihat lokasi/posisi errornya. Dari errornya posisinya ada di file fungctions.php di folder wp-includes. Tepatnya di baris ke 5835.
Notice: Function register_uninstall_hook was called incorrectly. Only a static class method or function can be used in an uninstall hook. Please see Debugging in WordPress for more information. (This message was added in version 3.1.0.) in wp-includes/functions.php on line 5835
Setelah saya cek disini, saya tidak mendapatkan petunjuk apa apa, karena baris codenya bukan dari pluginnya. Tapi ini baris code defaultnya wordpress.
Jadi saya coba cari solusinya di google.
Dari diskusi – diskusi yang ada, sepertinya tidak ada yang benar benar tau, penyebab dan solusinya apa. Malah banyak cara cara yang sifatnya bypass. Ngasih code agar errornya ga muncul aja, tapi tidak benar-benar menyelesaikan masalahnya.
Penyebab
Tapi kalau ngeliat pesan errornya, sepertinya ini masalah plugin, yang tidak sempurna saat proses register (install) ataupun saat proses uninstall. Akhirnya saya coba cek satu persatu pluginnya. Dengan cara, men-non aktifkan, satu persatu plugin, lalu refresh halamannya, memastikan apakah errornya masih muncul apa tidak.
Akhirnya, tibalah di satu plugin bernama “HC Custom WP-Admin URL“
Mungkin tiap kasus, akan berbeda beda, tidak mesti harus di plugin ini aja. karena kebetulan mungkin saat proses installasi ataupun uninstall, prosesnya tidak selesai dengan sempurna, sehingga error itu muncul.
Mungkin aja, client saya ini ada nginstall plugin ini, atau sempat menguninstall, saya nggak tau. Tapi intinya, penyebab errornya ada di plugin ini.
Sekali lagi, mungkin di kasus kamu bukan plugin ini penyebabnya. Tapi cara ngeceknya sama, seperti yang saya jelaskan di atas.
Solusi
Setelah kamu tau plugin mana yang bermasalah, sekarang coba Uninstall dan Install ulang plugin tersebut. atau kalau tetap tidak bisa, gunakan plugin lain yang fungsinya sejenis.
Ini hanya untuk catatan pribadi aja, soalnya saya sudah 2x mengalami masalah seperti ini, tapi dulu lupa solusinya apa. Makannya sekarang saya catat, biar nggak lupa.
Oke, ini sudah 2x kejadian, solusinya tetap sama!
Kronologi
Saya sudah lama menggunakan offcanvas sebagai tampilan membuka menu di mode mobile untuk semua website yang saya develop. Jadi sudah tidak pakai dropdown menu lagi. Karena menurut saya, dropdown menu terlalu biasa. Terlihat seperti website murahan.
Nah kali ini saya lagi meng-upgrade sebuah website client saya, dia pengen di rombak tampilannya, agar jadi lebih fresh. Sehingga saya melakukan beberapa perubahan di fitur – fiturnya, termasuk tampilan membuka menunya.
Setelah saya sesuaikan coding di navbar menu, saya pasangin offcanvas, setelah di coba, nggak ada respon apa apa saat di klik. Tapi kalau di lihat di inspect element chrome, saat tombol menu di klik, ada pergerakan kok di html nya. Codenya jalan, tapi tidak tampil.
Ada setengah hari, saya cari solusinya, tapi nggak nemu – nemu, dan saya inget, dulu pernah ngalamin ini juga. cuman lupa caranya gimana.
Saya sudah hampir putus asa, mau ngoding ulang website ini dari awal. Tapi iseng iseng saya kulik kulik lagi. Akhirnya saya baru inget, ini masalah di JS nya.
Penyebabnya
Ini terjadi karena versi bootstrap saya, masih versi lama, dimana fitur offcanvas ini belum ada. Seperti yang saya ceritakan tadi, ini adalah website client saya, yang udah saya buat dari tahun 2017. Jadi waktu itu masih pakai versi bootstrap yang masih lawas, kalau tidak salah tadi versi 3. Saya langsung ganti, tapa saya catat. Tapi kayaknya versi 3.
Solusinya
Caranya simpel banget!. Pastikan versi bootstrap kamu sudah pakai versi terbaru, versi 5. Dan antara CSS dan JS nya, pastikan versinya sama.
Biar gampang, dan nggak muter-muter sampai pusing berjam-jam kayak saya tadi, mending kamu update ke bootstrap versi terbaru.
Sebelumnya saya pakai bootstrap versi 3. Hari ini (23 April 2023), versi bootstrap yang terbaru adalah versi 5.
Catatan :Dengan mengupdate ke versi terbaru, mungkin beberapa komponen di desain kamu (CSS), akan mengalami kerusakan, dan harus disesuaikan kembali.
Saya punya website toko online, dibuat menggunakan woocommerce. Dan hari ini, saya ada kebutuhan untuk meng query data produk, dari database nya wp woocommerce, untuk kemudian data list produk tersebut, saya tampilkan di sebuah halaman website (situs yang berbeda).
Sehingga saya gunakan query ini :
Tapi hasilnya salah. Dimana meta_value yang isinya harga produk, padahal sudah di order by * ASC, namun hasilnya tidak berurutan dari yang paling murah, ke paling mahal. Hasilnya seperti gambar dibawah ini. Yang terurut hanya karakter paling depan saja. 1, 3, 4, 6, 7 dan 9.
Seakan-akan, query tidak melihat field tersebut, sebagai angka/integer.
Nah solusinya, kita ubah value dari field meta_value ini sebagai desimal. Caranya pakai code ini.
order by IF( wppm.meta_value REGEXP '^-?[0-9,.]+$' = 0, 9999999999 , CAST(wppm.meta_value AS DECIMAL) ), wppm.meta_value;
Ini sebenernya masalah receh banget, tapi karena ketidak tahuan saya, akhirnya ngabisin waktu berjam-jam, buat nyari solusinya. Siapa tau kalian juga ngalamin ini, jadi bisa menghemat waktu banget.
Oke saya mulai aja.
Jadi saya dalam kasus ini, saya lagi buat aplikasi, dan kebetulan lagi bikin fungsi untuk ngambil data di sebuah website, yang memang menyediakan data “Plantae Taxonomic Hierarchy“. atau istilah lainnya, data pengelompokan tanaman berdasarkan silsilah. Makin bingung lagi ya? 😅, oke biar nggak bingung saya kasih contoh penampakannya.
Kebetulan website tersebut menyediakan data lewat API (Application Programming Interface), salah satu format yang disediakan adalah JSON.
Cuman kebetulan data yang saya butuhkan ini, tersimpan di sebuah objek array bernama “hierarchySoFar” yang nilainya string.
Sejujurnya, saya belum pernah ngolah data objek array seperti ini. Tapi karena data yang tersedia cuman ini aja, ya udah di akal – akalin aja. Karena saya sudah 2 harian nyari data ini. Dan baru ketemu sore tadi. Awalnya saya pikir sumbernya di USDA, tapi ternyata adanya di ITIS. Ternyata malahan USDA ngambil datanya di ITIS.
Oke singkat cerita, value dari “hierarchySoFar” adalah :
Awalnya saya pikir-pikir, oh bisa nih, di manipulasi pakai fungsi “str_replace” dan “substr”. Akhirnya saya ambil datanya dengan fungsi “curl_init();“
Lalu dari variabel $klasifikasi_tanaman; saya manipulasi valuenya dengan cara ini.
Kalau kita echo si variabel $val_klasifikasi , Yang outputnya awalnya seperti ini :
Bayangan saya, variabel $val_klasifikasi; tinggal dibuat array dengan cara seperti ini. Secara teknis, variabel $val_klasifikasi isinya string dengan value :
Dimana, dengan cara seperti ini, value dari $val_klasifikasi; akan di dipecah berdasarkan parameter, dengan karakter tertentu. Apapun bisa. Dalam kasus saya diatas, value di pecah dengan parameter koma.
Maka, setiap ada koma, value akan dipecah menjadi kepingan – kepingan array.
Nah kalau saya tau fungsi ini dari awal, maka saya tidak perlu repot-repot memanipulasi pakai “str_replace” dan “substr”, seperti yang saya jelaskan di atas.
Langsung aja pakai fungsi explode, dengan parameter pemisah tanda dolar ($). Karena data default yang di sediakan di JSON adalah data string, dengan pemisah tanda dolar.
Untuk sementara, data yang saya ambil, sudah bisa ditampilkan di halaman sederhana. Seperti ini penampakannya.
Nah semoga ada manfaatnya. Setidaknya saya gunakan ini untuk catatan pribadi. Kalau lupa, bisa lihat catatan ini lagi hehehe.
Pertama – tama, saya ingatkan. JANGAN NGODING KALAU LAGI NGANTUK! 😅😅😅 Kalau emang ngantuk, tinggal tidur sebentar laaaah. 15 menit udah cukup kok. Dari pada nanti debugging error muter – muter selama berjam – jam, tapi engga nemu-nemu masalahnya apa. Yaaaaa namanya juga udah ngantuk! engga fokus.
Tanpa banyak cingcong, saya langsung aja, gimana cara dapetin value dari switches bootstrap.
Switches yang saya maksud, komponen yang mirip kayak saklar itu loh. Yang nilainya boolean, antara 0 dan 1, true or false, yes or no, dan seterusnya. Berikut penapakannya.
Kebetulan saya lagi buat halaman input data, dimana komponen switches ini saya pakai untuk input status data, apakah data tersebut aktif atau non-aktif. Ini penampakan halaman input yang baru saya buat. Perhatikan paling bawah, ada “Status Aktif”.
Saya pikir sudah selsai. Nah, tentu yang namanya halaman input, ada fungsi simpannya juga kan? Nah, di code query inputnya, saya panggil dengan cara biasa menggunakan metode $_POST :
$status = $_POST['status'];
Setelah saya coba, ternyata variabel status, valuenya kosong. Padahal defaultnya saya set “checked”, saya pikir statusnya checked, maka valuenya akan bernilai true atau 1. Ternyata checked atau unchecked, valuenya sama sama kosong. Sehingga, saat di eksekusi penyimpanan, terjadi error. Keterangannya bahwa, variabel status belum di definisikan, yang artinya kosong.
Isi kodenya seperti ini.
Kenapa valuenya bisa kosong ya? padahal di form inputnya, komponen switches nya sudah di set checked. Udah coba kasih value juga value=”1″, tapi tetep juga saat di echo, valuenya tetep kosong.
Sekitar 2 jam tuh saya muter – muter, nyari salahnya dimana.
Kenapa bisa gitu? karena ngantuk! 😅
2. Penyebabnya apa?
Ada dua hal yang membingungkan dari komponen Switches Bootstrap ini.
Yang pertama, code defaultnya tidak berisi tag value=””;
Yang kedua, code defaultnya tdak berisi tag name=””;
Ohya, untuk value, kamu bebas pakai angka, ataupun huruf. Karena apapun isinya, itu hanya penanda bahwa switch ini aktif.
Jadi saat komponen ini di switch on (hidup), maka saat di tangkap menggunakan fungsi $_POST, valuenya akan bernilai 1. Jika valuenya kamu isi huruf. Misalnya value=”yes”, maka nanti akan tertanggal “yes” juga.
Sebaliknya, jiika fungsi $_POST, tidak menangkap apa apa, maka itu artinya komponen ini di switch off (mati) oleh user.
Maaf belibet, karena lagi ngantuk 😅 yang penting paham lah pointnya ya.
Tambahin name=”[nama variabel]” dan value=”[nilai yang mau diisi]”
Tadi sore, saya kaget saat mau login ke website (putuadi.id). Rencananya sih mau nulis jurnal eksperimen (private blogs), eh kok Error 404 Forbidden.
Terus saya baru inget, tanggal 26 November 2022 kemarin, saya mendapatkan email dari Hostinger. Menginformasikan bahwa, ada proses pemindahan hosting, ke server baru. Dan saya curiga, ada pengaruhnya dengan ini.
Isi email dari Hostinger
Btw, saya langganan domain dan hosting di hostinger.co.id sejak Tahun 2017. Kalau ada yang mau nanya, gimana pengalaman selama ini menggunakan layanan Hostinger? bisa tanya via DM instagram ya.
Apa itu Error 403 Forbidden? Dan Penyebabnya
Sebuah error yang mengindikasikan adanya masalah pada resource atau permission di sebuah website.
Kalau kita cari di Google, tentang ‘’cara menangani error 403 Forbidden” maka artikel – artikel yang kita temui di halaman satu google, rata-rata mereka menjelaskan, bahwa cara mengatasinya dengan mengecek File .htaccess, Reset Permission File, Nonaktifkan Plugin WordPress, Edit Kepemilikan File, Cek A Record, hingga menyuruh kita untuk menghapus History/Cache Web.
Kebetulan, untuk kasus yang saya alami saat ini, agak berbeda, sehingga tidak bisa diatasi dengan solusi-solusi tersebut. Karena memang penyebabnya bukan itu.
Dalam kasus saya, error 403 Forbidden ini, disebabkan karena, Name Server domain saya, mengarah ke cloudflare.
bailey.ns.cloudflare.com hans.ns.cloudflare.com
Sebelumnya, di Hostinger, untuk SSL ini, hanya gratis untuk domain induk saja. Misalnya, saat kita beli paket hosting baru, lalu yang menjadi domain utama disana (hanya 1), akan mendapatkan SSL gratis.
Sedangkan, untuk domain-domain berikutnya, untuk mendapatkan SSL, harus bayar, sekitar 150ribuan, bayarnya sekali seumur hidup, untuk satu domain.
Harga Sertifikat SSL di Hostinger sebelumnya, yang sekarang GRATIS!
Nah inilah alasan, kenapa saya menggunakan Nameservers dari cloudflare, bukan Nameservers default hostinger. Karena saya menggunakan SSL gratis dari cloudflare.
Saya lumayan keberatan kalau harus bayar 150 ribu per domain. Apalagi tidak semua website akan berhasil kan?
Banyak website yang sifatnya eksperimental. Jika berhasil mendapatkan trafik, dan terbukti punya potensi yang bagus, maka akan dilanjutkan. Jika tidak, maka domain tersebut akan dibiarkan mati.
Sedangkan, untuk menguji apakah website tersebut berhasil mendapatkan trafik? maka kita harus pasangkan SSL sejak awal kan? karena SSL sudah menjadi syarat mutlak, agar website kita tergolong Google Friendly.
Nah agak tidak mubazir, maka solusi yang saya ambil adalah, memasangkan SSL gratis dari cloudflare. Khususnya, untuk website-website yang masih bersifat eksperimen, atau project yang masih tahap MVP (minimum viable product).
Karena memang setelah saya cari tau, kayaknya nggak ada bedanya deh, antara SSL berbayar dan yang gratisan. Dan SSL gratisan dari cloudflare, juga sudah digunakan oleh jutaan orang diseluruh Dunia. Dan saya belum nemu review negatif tentang ini.
Selama bertahun – tahun, semua berjalan lancar. Sampai akhirnya tanggal 28 November kemarin, munculah Error 403 Forbidden.
Yang dipicu oleh adanya proses transfer hosting, dari pihak Hostinger. Yang ternyata, ber efek ke penggunaan SSL gratisan dari cloudflare ini.
Cara mengatasi Error 403 Forbidden, khusus pengguna layanan Hostinger
Sekali lagi, ini khusus untuk pengguna layanan hostinger ya. Karena belum tentu sama dengan penyedia web hosting lainnya.
Login ke member area hostinger kamu, lalu klik menu domain.
Pada bagian Nameserver, Klik tombol Ubah
Maka akan muncul pilihan seperti ini.
Pilih “Gunakan Nameserver Hostinger (disarankan)”, lalu klik tombol Simpan.
Maka akan muncul dialog seperti ini.
Seperti keterangan yang ada disana, bahwa waktu untuk “Propagasi” membutuhkan waktu hingga 24 jam.
Walaupun seperti itu, kenyataannya cepet-cepet aja kok. Untuk kasus saya ini, cuman butuh waktu beberapa menit aja kok. enggak lebih dari 10 menit.
Nanti, saat kita coba akses website kita. Errornya berubah, dari yang Error 404 Forbidden, berubah menjadi Error ERR_SSL_PROTOCOL_ERROR.
Cara mengatasi Error ERR_SSL_PROTOCOL_ERROR
Error ini, disebabkan oleh SSL yang kita pakai sebelumnya dari cloudflare, kini sudah tidak dikenali lagi oleh server Hostinger. Karena, nameserver domainnya sudah kita ubah, ke nameserver default hostinger.
Maka langkah berikutnya, kita install SSL, yang kini sudah disediakan gratis oleh Hostinger. Berikut langkah-langkahnya.
Klik menu SSL di member area kalian.
Lalu, klik tombol Install SSL gratis.
Pilih domain yang akan kita install SSL nya.
Klik tombol “Install SSL”
Silahkan tunggu beberapa menit. Untuk kasus saya, cuman butuh waktu 5 menitan. Lalu coba akses kembali, websitenya.
Dan sekarang website sudah bisa di akses kembali. Semoga tutorial ini bermanfaat.
Semenjak saya pindah ke Macbook, sebagai laptop utama, saya jadi sering bolak balik nyolokin flashdisk ataupun hardisk eksternal, untuk mengambil file – file lama yang lagi saya butuhin.
Mungkin ada yang bilang. Kenapa ngga pindahin FD/HD eksternal aja semua file di laptop lama bro? kan tinggal colok, nggak perlu copy copy lagi?
Atau, kenapa ngga pindahin ke Google Drive aja file – file yang kiranya sering diambil bro?
Ini kasusnya berbeda, file yang saya butuhin bukan files seperti dokumen, foto, dll.
Setelah saya pikir-pikir, bakal lebih praktis jika saya pindahkan semua files tersebut, ke hosting saja, agar bisa langsung dihubungkan lewat url.
Singkat cerita, saya buat subdomain di website saya, files.putuadi.id tapi setelah saya akses, kok subdomainnya tidak bisa di akses, malah mengarah ke halaman mercusuar.
Saya baru ingat, kalau untuk domain ini, DNSnya pakai cloudflare.
Karena kalau pakai DNS default dari hostingnya, begitu menambahkan subdomain, langsung bisa di akses, kalau pakai cloudflare, kita harus daftarin dulu subdomainnya di cloudflare.
Nah kalau kamu juga mengalami hal yang sama, berikut langkah – langkahnya.
1. Cara Buat subdomain
Login ke Cpanel hosting kamu. → Cari subdomain.
Ketikan Subdomain
Pilih Subdomain
Ketikan nama subdomain yang ingin kamu buat. Lalu, klik Buat.
Subdomain sudah selesai dibuat, seperti yang terlihat, ada satu folder bernama “Files” (sesuai nama subdomain) telat dibuat di dalam folder hosting kita. Yang nantinya folder tersebut menjadi tempat file – file website kita disimpan.
Untuk mengaksesnya kamu bisa ke file manager, atau akses lewat Filezilla.
Terlihat disana sudah ada muncul folder baru, bernama “files”.
Nah tapi, setelah subdomain selesai dibuat, urlnya tidak bisa di akses.
Mengarah ke halaman mercusuar.
Itu disebabkan karena kita belum mendaftarkan subdomain kita di cloudflare. Tapi kalau kamu menggunakan DNS asli dari hostingnya, setelah subdomain dibuat, urlnya bisa langsung di akses. Karena dalam kasus ini, saya menggunakan cloudflare di domain utama saya (putuadi.id) maka saat menambahkan subdomain baru, kita harus daftarkan juga di cloudflare.
Pada tab Websites, pilih nama domain utama kamu. dalam kasus ini saya pilih putuadi.di
Untuk Type, pilih A. Nama isikan nama subdomain, tanpa domain induk. lalu di bagian IPv4 address, isikan alamat IP domain hosting kamu, bisa kamu dapatkan di halaman Cpanel. Setelah terisi semua, klik tombol Save.
Biarkan bebrapa menit, untuk menunggu proses verifikasi oleh cloudflare.
Setelah itu. Subdomain sudah bisa diakses. Untuk membuktikannya saya coba buatin halaman index di folder hosting saya. Tepatnya di dalam folder “files” tadi, yang di generate otomatis saat membuat subdomain.
Saya buat file baru bernama index.php, kemudian saya isikan text sederhana. sehingga saat url subdomain di akses, akan muncul text tersebut.
Setelah itu di simpan, lalu akses url subdomainnya.
Nah sekarang, subdomainya sudah bisa di akses. tinggal sekarang dimanfaatkan sesuai kebutuhan. Mau dibuat halaman website baru boleh, atau hanya untuk menyimpan files saja juga boleh. Bebas, sesuai kebutuhan.
Kamu yang menemukan artikel ini lewat pencarian Google, sudah pasti lagi nyari cara buat ngubah tombol default WooCommerce kan? Kamu bisa ikuti tutorial singkat di bawah ini. Gampang banget kok.
Apa masalahnya?
Saya mau ganti tombol Add to cart atau Tambah ke keranjang yang kalau settingan defaultnya, tombolnya jelek banget ga sih? kakakakak 😅
Apa Solusinya?
Kita ubah dan percantik dengan plugin ini. Tanpa coding. tinggal install, aktifkan, langsung berubah.
WooCommerce Add To Cart Button Customizations (untuk mengubah style tombol)
Add to Cart Text Changer by Code Astrology (untuk mengubah text dan icon)
Step by stepnya
Untuk mengubah style tombol, seperti warna, bentuk, animasinya, dll. Kita pakai plugin WooCommerce Add To Cart Button Customizations. Berikut langkah-langkahnya.
Login ke wordpress
Tambah plugin
Install Plugin dengan cara, ketik di kolom pencarian dengan kata kunci “WooCommerce Add To Cart Button Customizations”. Muncul paling depan, lalu klik tombol Install Sekarang → Aktifkan.
Untuk melakukan pengaturan, masuk ke side menu WooCommarce → Pengaturan → Add To Cart Customization Settings → Button Coztomization.
Mengubah Style Tombol
Selain menyesuikan warna atau style dari tombol, kamu juga bisa menambahkan icon di dalam toples. silahkan sesuaikan icon tombol yang ingin kamu tampilkan seperti apa. Posisinya sebelum text, atau sesudah, dan iconnya gambar apa. Sesuaikan sesuai selera ya.
Silahkan lakukan pengaturan style tombol sesuai selera kamu. nanti hasilnya seperti ini.
Kalau kamu cek hasilnya, sekarang style tombol sudah berubah, cuman textnya masih default “Add to cart” atau “Tambah ke keranjang”.
Mengubah Text dan Icon Tombol
Nah sekarang kita install plugin, untuk mengubah text dari tombolnya. yang secara default “Add to cart” atau “Tambah ke keranjang”, saya akan ubah menjadi “Beli sekarang”.
Buka menu Plugin, lalu Tambah Baru.
Ketikan nama plugin “Add to Cart Text Changer“
Install Sekarang → Aktifkan.
Untuk melakukan pengaturan, kamu bisa akses WooCommarce → Add To Cart
Submit, lalu lihat hasilnya.
Gimana kelihatan lebih keren kan dari tombol default? semoga bermanfaat.
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 :
