Putu Adi — Bekerja & Berkarya

Cara mengatasi CSS Style plugin wordpress tidak bekerja

Ditulis oleh : Putu Adi, 28 Agustus 2023

Kronologi

Jika kamu baru belajar bikin website dari nol, terutama menggunakan wordpress sebagai CMSnya (Content Management System) biasanya masalah seperti ini bakal pernah kamu alami. Dimana plugin yang kamu install tidak bekerja, tidak muncul, atau muncul tapi stylenya berantakan atau tidak tampak seperti bagaimana mestinya.

Contoh kasus 1 : Kamu install plugin “3CX Free Live Chat, Calls & WhatsApp” (plugin untuk live chat di website) sudah install sesuai panduan, sudah setting juga sesuai panduan, tapi pluginnya tidak muncul di website kamu.

Contoh kasus 2 : Kamu install plugin “CodeMirror Blocks” plugin untuk menampilkan baris coding di halaman blog kamu. Sudah install sesuai panduan, sudah setting sesuai panduan, tapi begitu dicoba. block codenya muncul, tapi seperti block text biasa, stylenya nggak ngikut.

Penyebab

Intinya, kalau kamu mengalami masalah pada plugin wordpress. Apakah plugin tidak muncul, atau plugin muncul tapi tidak bekerja dengan semestinya, itu terjadi karena salah menempatkan wp_head ataupun wp_footer.

Secara sederhana penjelasannya seperti ini :

wp_head = mengandung css dari seluruh plugin

wp_footer = mengandung js dari seluruh plugin

Sedangkan, bahasa html ataupun php, dibaca oleh komputer, satu arah, dari atas kebawah. Komponen paling pertama di load, akan di timpa dengan komponen yang di load belakangan. (Semoga paham ya maksudnya).

Sehingga kalau kita salah menempatkan wp_head ataupun wp_footer, komponen plugin akan tertimpa dengan css ataupun js custom yang kita tambahkan pada tema website kita.

Solusi

Saya akan contohkan menggunakan basic html. Bagaimana cara penempatan header dan footer yang benar.

Basic HTML seperti ini :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nama Website Kamu</title>
  </head>

  <body>
    <h1>Judul Halaman</h1>
    <!-- isi halaman -->
  </body>
</html>

Cara menempatkan wp_head ataupun wp_footer yang benar.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nama Website Kamu</title>
    <link href="file1.css" rel="stylesheet">
    <link href="file2.css" rel="stylesheet">
  
  <!-- Posisi yang benar, dibawah css yang lain, tepat diatas tag  </head> -->
  <?php wp_head(); ?>
  </head>
  
  <body>
    <h1>Judul Halaman</h1>

    <!-- Isi halaman -->

    <script src="file1.js"></script>
    <script src="file2.js"></script>

  <!-- Posisi yang benar, dibawah js yang lain, tepat diatas tag  </body> -->
  <?php wp_footer(); ?>
  </body>
</html>

Penjelasan :

wp_head dalam bahasa php di tulis dengan <?php wp_head();?>

Pastikan letakan di bawah seluruh file css yang ada di tema kamu. atau, letakan tepat diatas tag </head>

Sehingga css plugin yang kamu install tidak berpengaruh dengan css tambahan di tema kamu. Karena akan dieksekusi paling terakhir. Artinya, css plugin kamu tidak akan tertimpa dengan css tambahan di website kamu.

wp_footer ditulis dengan <?php wp_footer();?>

pastikan letaakan di bawah seluruh file js yang ada di tema kamu. atau, letakan tepat diatas tag </body>

Sehingga javascript pada plugin yang kamu install tidak berpengaruh dengan javascript tambahan di tema website kamu. Karena akan dieksekusi paling terakhir. Artinya, javascript plugin kamu tidak akan tertimpa dengan javascript tambahan di website kamu.

Semoga bermanfaat.

Salam

Putu Adi.