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 🙂

Memiliki pertanyaan atau saran? Silakan klik disini untuk berkomentar :).

Masgani

Halo, perkenalkan nama saya Gani. Saat ini saya sebagai penulis sekaligus pemilik situs web masgani.com. Selain menulis di situs web ini, keseharian saya saat ini yaitu sebagai Developer di salah satu perusahaan Startup. Saya berharap tulisan saya situs web ini dapat bermanfaat dan menginspirasi. Terima kasih :)

Postingan Terkait

2 Respon

  1. Ramdani berkata:

    gan kalo gitu file style.php yang berisikan css di kosongin terus dipindah ke functions.php gitu ? apa gimana ?

    • Admin berkata:

      Tidak perlu gan, karena ini cuma perlu di terapkan kalau misal punya banyak file css external yang di load ke tema agan dan di dalam file css tersebut cuma ada beberapa baris css. Seperti yang saya jelaskan di awal postingan ini. Untuk file style.css tidak perlu dikosongkan. 🙂

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.