Cara Menambahkan Inline CSS Dan Javascript

Apa itu inline css dan javascript? Inline css dan javascript yaitu menempatkan kode css dan javascript ke dalam satu berkas dokumen HTML. Ini perlu kita terapkan apabila file css dan javascript yang akan kita gunakan tidak terlalu besar, maka lebih baik kita tempatkan kedalam satu berkas dokumen HTML.

Jika terlalu banyak css atau javascript external akan mempengaruhi kinerja situs web kita, karena terlalu banyak permintaan yang keluar, maka dari itu kita coba untuk mengurangi apabila ada file css atau javascipt yang tidak terlalu besar dan memindahkanya ke dalam satu dokumen HTML.

Bagaimana Cara menambahkan inline css dan javascript?

Ada dua cara untuk menempatkan kode css atau javascript ke dalam satu berkas dokumen HTML, yaitu:

Di dalam file header.php atau footer.php

Cara ini sangat mudah, kita tinggal meletakan kode css atau javascript ke dalam salah satu file tersebut. Untuk kode css disarankan di dalam file header.php sebelum tag </head>, dan untuk kode javascript lebih baik di dalam file footer.php sebelum tag </body>.

Tapi dengan cara ini kita sama saja kerja 2x, karena kita harus bolak balik ke salah satu file tersebut.

Di dalam file functions.php

Ini cara terbaik untuk menempatkan inline css atau javascript, tidak seperti cara yang pertama yang harus kerja 2x. Dengan cara ini kita hanya kerja dalam satu file dan bisa mengaturnya dengan lebih baik. Berikut adalah caranya:

Javascript
function inline_js(){ ?>
<script>
isi scriptnya............
</script>
<?php }
add_action('wp_footer','inline_js');
CSS
function inline_css() { ?>
<style>isi.......</style>
<?php }
add_action('wp_head','inline_css');
Keterangan:
  • inline_js dan inline_css adalah nama fungsinya.
  • add_action(‘wp_footer’,’inline_js’) , ini memanggil dan menjalankan fungsi inline_js dan di tambahkan ke dalam footer atau dokumen html paling bawah sebelum tag </body>.
  • add_action(‘wp_head’,’inline_js’) , ini memanggil dan menjalankan fungsi inline_css dan di tambahkan ke dalam header atau dokumen html paling atas sebelum tag </head>.

Silahkan pilih salah satu yang menurut Anda mudah di terapkan.

Jika ada masalah atau tidak paham silahkan berkomentar.

Selamat mencoba 🙂

Ada pertanyaan? Silahkan ajukan pertanyaan atau komentar Anda melalui form komentar yang telah disediakan.