Cara Menambahkan IE Conditional Style dan Script di WordPress

Cara Menambahkan IE Conditional Style dan Script di WordPress. Cara ini digunakan untuk melayani style atau script pada versi Brwoser IE tertentu agar tampilan suatu Website atau Blog bisa tampil dengan sempurna. IE Conditional ini berupa komentar bersyarat yang hanya akan bekerja pada versi browser yang ditujukan. Dengan begitu, style atau script tambahan yang akan kita gunakan tidak akan mempengaruhi tampilan pada style atau script lain.

Bagi kalian yang sedang ngoprek atau sedang membuat Tema untuk WordPress, dan kalian mengalami kesulitan untuk menerapkan IE Conditional ini. Maka, masgani.com akan coba membantu lewat tulisan ini dan mungkin ini adalah salah satu jawabn dari sekian banyaknya tutorial yang tersebar di Google. hehe

Bagaiman Cara Menambahkan IE Conditional Style dan Script di WordPress?

Caranya cukup mudah, kita hanya perlu menambahakan fungsi wp_style_add_data dan wp_script_add_data untuk menangani dokumen yang akan kita load. Misal pada kasus ini kita akan menambahkan ie.css dan html5shiv.js untuk versi lt IE 9.

Berikut adalah cara menambahkan IE Conditional style dan script di WordPress:

Contoh untuk Style

wp_enqueue_style('ie-style', get_theme_file_uri('/path/to/ie.css'), array(), '1.0');
wp_style_add_data('ie-style', 'conditional', 'lt IE 9');

Contoh untuk Script

wp_enqueue_script('html5shiv-js', get_theme_file_uri('/path/to/html5shiv.js'), array(), '3.7.3', true);
wp_script_add_data('html5shiv-js', 'conditional', 'lt IE 9');

Perhatikan pada bagian get_theme_file_uri() ini adalah fungsi baru untuk versi WordPress 4.7. Jika kalian masih menggunakan versi dibawah 4.7, silahkan ganti dengan fungsi dibawah ini:

// ganti
get_theme_file_uri('/path/to/misal.css')
//dengan
get_template_directory_uri() . '/path/to/misal.css'

Sekarang coba simpan file yang baru saja kalian edit dan coba refresh atau segarkan halaman halaman Website atau Blog kalian dan perhatikan pada hasil outputnya.

Jika kita lihat dari page source, maka akan terlihat seperti contoh di bawah ini:

<!--[if lt IE 9]>
<link rel='stylesheet' id='ie-style' href='/path/to/ie.css' type='text/css' media='all' />
<![endif]-->
<!--[if lt IE 9]>
<script type='text/javascript' src='/path/to/html5shiv.js?ver=3.7.3'></script>
<![endif]-->

Jika sudah tampil seperti pada contoh output di atas, itu tandanya kita sudah berhasil menambahkan IE Conditional di tema kita. Tapi, kalau style atau script kita belum menampilkan hasil seperti pada contoh di atas, itu artinya ada kesalahan pada kode yang kita tulis.

Oke, itu saja tutorial dari Saya. Semoga bermanfaat. 🙂

Tinggalkan Balasan

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