Categories
Trik WordPress

Mengubah Tampilan Visual Editor Persis dengan Blog

Biasanya visual editor yang kita pakai akan memiliki tampilan yang berbeda dengan tampilan blog. Misalnya blog kita menggunakan font times new roman, maka visual editor akan memakai font defaultnya (biasanya Lucida Grande). Termasuk juga lebar tulisannya, warna huruf, dll.

Nah, dengan sedikit trik, kita bisa membuat supaya tampilan visual editor persis sama dengan tampilan di blog, mulai jenis huruf, warna, ukuran, background, dll. Anda bisa melihat contohnya di theme Mystique atau Twenty Ten yang dipakai di blog ini. Yuk, kita bikin sendiri untuk blog kita.

Deklarasi CSS

Pertama, kita deklarasikan CSS yang mengatur style di visual editor. Mudah aja kok, cukup tambahkan kode ini di file functions.php

{code type=php}
// Tambah CSS di Visual Editor
add_editor_style(‘custom-editor-style.css’);
{/code}

Lokasi file mengacu pada path tema anda. Dan jangan lupa untuk menyediakan file custom-editor-style.css di folder theme yang anda pakai.

Tentukan class untuk menampilkan post

Biasanya artikel diletakkan dalam class khusus seperti ini. Anda bisa menemukannya di single.php atau index.php. Biasanya keduanya sama.

{code type=php}

{/code}

Bila atribut class yang dipakai oleh theme anda seperti diatas (post), maka tinggal cari deh class ini di file style.css themes anda. Ada kalanya dikumpulkan jadi satu, tapi bukan tidak mungkin di pisah-pisah oleh pembuat theme-nya.

Misalnya kita mendapatkan seperti ini:

{code type=css}
.post h1, .post h2, .post h3, .post h4 { font-family: MuseoLight, Georgia, serif; font-weight: normal; margin: 0 0 10px 0; }
.post h2 { font-size: 28px; }
.post h2 { padding: 10px 180px 10px 15px; background: #237abf url(../images/title-bg.png) repeat-x; margin: 0; line-height: 1.3; font-size: 22px; }
.post h2, .post h2 a { color: white; text-shadow: 0 1px 2px #143855; }
.post h2 a:hover { color: #b8e0ff; }
.post h3 { font-size: 20px; padding: 5px 0; margin: 30px 0 15px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.post h4 { font-size: 18px; }
.post p { margin: 0 0 10px 0; }
.post pre { background: #eee; padding: 15px; overflow: auto; margin: 0 0 15px 0; border: 1px solid #ddd; }
.post pre code { font-size: 11px; }
.post code { background: #eee; font: 12px Monaco, Courier, Monospace; color: #0E304A; }
.post h3 code { font-size: 18px; }
.post acronym, abbr { border-bottom: 1px dotted #514031; cursor: help; }
.post ins { text-decoration: underline; }
.post del { text-decoration: line-through; }
.post a { outline: none; text-decoration: none; color: #19517C; background: #eee; border: 1px solid #ddd; padding: 1px 3px 2px 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.post a:hover { color: #fff; background: #143855; border: 1px solid #143855; }
{/code}

Masalahh yang muncul kemudian adalah visual editor kita belum tentu memiliki class yang sama dengan blog. Nah, kita harus memasukkan class itu ke dalam visual editor sehingga kode CSS yang kita masukkan bisa diterapkan di visual editor. Gampang aja, cukup masukkan kode ini di file functions.php

{code type=php}
// Tambah class ke Visual Editor
function mytheme_mce_settings( $initArray ){
$initArray[‘body_class’] = ‘post’;
return $initArray;
}
add_filter( ‘tiny_mce_before_init’, ‘mytheme_mce_settings’ );
{/code}

Jangan lupa mengganti kata post pada kode $initArray['body_class'] = 'post'; dengan kata lain jika class pada theme anda bukan post. Sekarang anda bisa coba membuat visual editor anda. Seharusnya tampilannya sudah sama dengan blog anda.

Sumber: http://digwp.com/2010/11/actual-wysiwyg/

By Lutvi

Bukan Ustadz, bukan Dai apalagi Kyai. Juga bukan guru. Hanya sekedar santri miskin ilmu yang coba mengamalkan 1 ayat warisan dari para ulama. Saat ini diamanahi menjadi admin web WordPress Indonesia

8 replies on “Mengubah Tampilan Visual Editor Persis dengan Blog”

Comments are closed.