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.
8 replies on “Mengubah Tampilan Visual Editor Persis dengan Blog”
Blognya Keren, Gmna Gan Caranya Bisa Bikin Blog Sekeren ini, Aku mau donk diajarin, Tampilan Blog Ku Jelek Nih Reviewin donk gan http://hpcartridgerefills.com Tolong ya Agan Master…
Salam Kenal,
Novie
Keren? Ini kan pakai themes defaultnya WordPress. Cuma header dan background aja yang diisi gambar 🙂
klo theme standar di jadikan minimalis itu gmana gan? silahkan mampir
maksudnya gimana? Coba cari aja themes minimalis lalu ganti themesnya 🙂
tlg ksh tau kode2 rubah size n warna gan,mksh
merubah size:
width <== lebar
height <== tinggi
warna:
color
Lengkapnya belajar disini: http://www.w3schools.com/css/
gan tolong kasih tahu cara ngubah theme menjadi seperti yang an pakai sekarang inii….makasih..
cuma main-main sama CSS-nya doang kok