Cara menyesuaikan WordPress Editor Styles

Bagaimana untuk menyesuaikan WordPress Editor Styles WordPress diperbarui secara teratur, sekitar 2 atau 3 kali setahun. Dalam setiap rilis baru, memperkenalkan salah satunya penambahan fitur baru atau beberapa perbaikan yang sudah ada. Dalam posting ini, kita akan membahas salah satu fitur WordPress yang menurut saya diabaikan oleh banyak orang, yaitu Editor Styles.


Sebelum versi 3.0, di mana fitur ini pertama kali diperkenalkan, Anda sering perlu untuk me-refresh halaman Anda untuk melihat bagaimana posting Anda terlihat seperti di sisi depan. Hal ini disebabkan fakta bahwa gaya konten di TinyMCE Editor Wordpress sangat berbeda dari satu di front-side. Gaya di front-side berasal dari styles.css tema, sedangkan gaya Editor ditentukan dari fungsi inti WordPress.

Seperti yang dapat Anda lihat di bawah, editor WordPress menggunakan font keluarga Serif untuk konten, sementara pada front-side menggunakan Sans Serif Font.
Dalam versi 3.0, WordPress mari kita Anda menyesuaikan gaya editor untuk mencocokkan gaya tema Anda. Mari kita lihat.

Add Editor Styles Function

Editor styles dapat ditambahkan dengan add_editor_style () function. Anda perlu membuat stylesheet yang terpisah untuk Editor gaya Anda terpisah dari stylesheet default. Dengan asumsi bahwa Anda menamakannya editor style.css, Anda dapat menambahkan berikut ini pada file functions.php tema Anda.

view plaincopy to clipboardprint?

1. add_editor_style('editor-style.css');  

Stylesheet ini harus berisi hanya gaya untuk elemen pada posting Anda seperti paragraf, judul, link, dan gambar. Tapi jika Anda tidak yakin apa yang diperlukan untuk memasukkan dalam stylesheet ini, di sini adalah tip saya:
Ambil salah satu gaya default WordPress seperti TwentyTen, copy editor-style.css, Anda kemudian dapat menyesuaikan aturan gaya agar sesuai dengan yang dari tema, dan untuk mengatur lebar TinyMCE, kita dapat menambahkan berikut di stylesheet:

view plaincopy to clipboardprint?

1. html .mceContentBody {  
2.     max-width: 640px;  
3.     padding: 10px;  
4. }  

Itu saja, Anda sekarang harus menemukan gaya konten Anda dalam editor mirip dengan apa yang ada di front-side.

Editor Style for Post Types

Dalam versi 3.0, WordPress memungkinkan Anda untuk membuat Post Types untuk mempertahankan fokus yang berbeda dari konten. Secara default, WordPress memungkinkan Anda untuk membuat Page dan Post. Menggunakan Jenis Post, Anda dapat membuat satu untuk Produk atau Portofolio dengan lebih set lapangan disesuaikan,
Untuk menambahkan Editor Styles khusus untuk Jenis Posting Anda, Anda dapat menambahkan function.php berikut.

function my_theme_add_editor_styles() {
    global $post;
    $post_type = get_post_type( $post->ID );
    $editor_style = 'editor-style-' . $post_type . '.css';
    add_editor_style( $editor_style );
}
add_action( 'pre_get_posts', 'my_theme_add_editor_styles' );

Sekarang, dalam direktori tema Anda, membuat stylesheet dengan nama berikut editor-style-{post_type}.css. Jika Anda lebih suka menggunakan nama yang berbeda, hanya mengubah nilai dalam $editor_style.
Sumber hongkiat
Cara menyesuaikan WordPress Editor Styles