ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

Menambahkan Tag Style Pada Posting di WordPress

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_children pada 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>.

menambahkan_tag_style_pada_wordpress.png

hasilnya ketika kita view source:

menambahkan_tag_style_pada_post_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: http://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

Recomended Post

Silakan tinggalkan komentar

*

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Query MySQL di Dalam PHP Loop – Bad Practice !!!

  2. Software Kompres dan Optimasi Gambar / Foto (JPG dan PNG) – Tested

  3. 40+ Theme WordPress Gratis Untuk Blog – Modern & Responsive

  4. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  5. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  6. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  7. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  8. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  9. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  10. Menghitung Selisih Waktu Dengan PHP – Cara Termudah