Bagi pengguna wordpress terkadang ingin menuliskan kode css pada posting/text editor(tinyMCE) dengan menambahkan tag <style>, namun kesulitan karena tidak diperbolehkan oleh tinyMCE, oleh karena itu pada kesempatan kali ini kita akan membahas bagaimana cara menambahkan tag style pada posting di WordPress.
Seperti kita ketahui bahwa wordpress menggunkan tinyMce sebagai text editornya, dan tinyMCE sangat ketat dalam menangani tag html, dia akan memastikan bahwa tag html yang ada di dalam editor sudah sesuai dengan standar, jika tidak maka tag tersebut akan di hilangkan dari editor.
W3C mensyaratkan agar tag <style> di deklarasikan dalam <head>, namun mulai HTML 5, tag style dapat ditulis dalam tag <body>. Hingga wordpress versi 4.4, dimana tinyMCE yang digunakan versi 4.2.8, kita belum dapat dengan mudah menambahkan tag <style> pada text editor, dimana ketika kita menuliskan tag <style> pada mode Text, maka ketika kembali ke mode Visual, tag terebut akan langsung hilang, oleh karena itu setidaknya ada dua hal yang perlu untuk kita lakukan untuk mempertahankan tag <style> tersebut:
- Pertama adalah tambahkan argumen
valid_childrenpada tinyMCE init, - Hacking pada posting
Menambahkan argumen valid_children
Argumen valid_children merupakan salah satu opsi untuk mengkostumisasi tinyMce ketika pertama kali dijalakan, yang pada wordpress di handle oleh fungsi: tiny_mce_before_init. Argumen ini bisa ditambahkan secara manual maupun menggunakan plugin. Cara manual dilakukan dengan menambhkan fungsi pada file function.php yang ada di folder theme yang kita gunakan:
function custom_mce_options($init)
{
$init['valid_children'] = "+body[style]";
return $init;
}
add_filter('tiny_mce_before_init', 'custom_mce_options');Mode Visual pada tinyMCE menggunakan iframe dimana terdapat tag body didalam iframe tersebut, sehingga dengan menggunakan kode diatas, akan mengijinkan tag <style> berada di dalam tag body.
Disamping itu untuk menambahkan kode diatas, kita dapat menggunakan plugin Advanced TinyMCE Configuration, setelah diinstall, pilih menu Settings » TinyMCE Config. Pada halaman Advanced TinyMCE Settings, isikan parameter valid_children pada Option name dan +body[style] pada Value, kemudian klik Save Change.
Hacking pada posting
Selanjutnya mari kita coba tulis beberapa rule css di text editor dengan mode Text:
<style type="text/css">
.btn-warning {color: yellow}
.btn-success {color: blue}
</style>Kemudian klik tab Visual dan klik kembali tab Text, maka hasil yang kita perloleh adalah tinyMCE akan meng-comment semua isi dalam tag style tersebut:
<style type="text/css"><!--
.btn-warning {color: yellow}
.btn-success {color: blue}
--></style>alhasil ketika kita preview, dan lihat sourcenya, maka akan berubah menjadi tag style saja: <style type="text/css"></style>. Tidak ada cara elegant untuk mengatasinya, yang dapat kita lakukan adalah mengakalinya dengan menambah comment close pada awal kode css dan dan comment open pada akhir kode css, sehingga kode css kita menjadi:
<style type="text/css"><!--
-->
.btn-warning {color: yellow}
.btn-success {color: blue}
<!--
--></style>Sehingga ketika kita preview posting dan lihat source html nya (view source) maka kode tersebut berubah menjadi normal.
Membersihkan Tag HTML
Selanjutnya, ketika kita menuliskan style css dengan beberapa baris baru, setelah disimpan dan ditampilkan pada halaman artikel, maka baris baru tersebut akan diisi oleh tag <p>.
hasilnya ketika kita view source:
oleh karena itu kita perlu membersihkannya. Buka file functions.php yang ada di folder theme yang kita gunakan dan tambahkan fungsi berikut:
add_filter( 'the_content', 'cleanup_style_tag');
function cleanup_style_tag( $content ) {
return preg_replace_callback( '|<style.*>(.*)</style|isU' , 'remove_html_tags', $content );
}
function remove_html_tags( $matches ) {
return str_replace( $matches[1], strip_tags($matches[1]), $matches[0] );
}Cara Lain
Cara tersebut terlihat agak rumit dan mungkin berisiko karena kita tidak tahu apakah di TinyMCE versi berikutnya cara tersebut masih dapat digunakan, sebagai alternatif, kita bisa menggunakan cara lain yaitu membuat file css tersendiri dan me-load nya pada posting tertentu yang diinginkan, adapun caranya dapat diikuti pada tutorial: https://jagowebdev.com/load-file-javascript-atau-css-pada-halaman-tertentu-di-wordpress/
Penutup
Demikian tutorial singkat bagaimana cara menambahkan tag style pada posting / text editor (tinyMCE) di wordpress, semoga bermanfaat…
Salam JWD
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com
2 Feedback dari pembaca
Maaf mau tanya, apa tags begitu penting untuk di crwal kah mas
Setahu saya lebih ke index halaman mas, untuk crawl di google nya