Apakah Anda ingin menambahkan gaya kustom pada editor visual WordPress? Tambahkan gaya khusus memungkinkan Anda menerapkan pemformatan dengan cepat tanpa membuka editor teks. Pada artikel ini, kami akan menunjukkan cara menambahkan gaya kustom ke editor visual WordPress.

stylesinwpeditor

Catatan: Tutorial ini membutuhkan pengetahuan dasar tentang CSS.

Kapan akan Anda perlu menambahkan gaya khusus di Editor Visual WordPress?

Secara default, editor visual WordPress menawarkan opsi pemformatan dan gaya dasar. Namun, terkadang Anda perlu memiliki gaya khusus yang memungkinkan Anda, misalnya, menambahkan tombol CSS, isi, kait, dll.

Anda selalu dapat beralih dari editor visual ke editor teks dan menambahkan kode HTML dan CSS khusus. Tetapi jika Anda menggunakan gaya tertentu secara rutin maka akan lebih baik menambahkannya di editor visual agar Anda dapat menggunakannya kembali dengan mudah.

Ini akan menghemat banyak waktu, dan juga memungkinkan Anda untuk selalu menggunakan gaya yang sama di mana saja di situs jaringan.

Lebih penting lagi, Anda dapat dengan mudah mengedit atau memperbarui gaya tanpa harus mengedit artikel di situs Anda.

Kami sekarang akan menemukan cara melakukan ini di WordPress.

Metode 1: Tambahkan gaya kustom dengan plugin

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin " Gaya TinyMCE Kustom ". Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal a WordPress Plugin.

Setelah aktivasi, Anda harus mengunjungi " Pengaturan> Pengaturan »Gaya Kustom TinyMCE Untuk mengkonfigurasi pengaturan plugin.

Control-of-plugin-TinyMCE

Plugin ini memungkinkan Anda untuk memilih lokasi file stylesheet. Itu dapat menggunakan tema atau gaya tema anak Anda, atau Anda dapat memilih lokasi khusus.

Setelah itu, Anda harus mengklik tombol " simpan semua pengaturan Untuk menyimpan pengaturan Anda.

Sekarang Anda dapat menambahkan gaya khusus Anda. Anda perlu gulir ke bagian gaya dan klik tombol Menambahkan gaya baru '.

Anda harus memasukkan judul untuk gaya terlebih dahulu. Judul ini akan ditampilkan di menu drop-down. Maka Anda perlu mendefinisikan. Baik itu baris, blok, atau elemen seleksi.

Setelah itu tambahkan kelas CSS dan kemudian tambahkan aturan CSS Anda seperti yang ditunjukkan pada gambar di bawah.

aturan-of-style-css

Setelah Anda menambahkan gaya CSS, cukup klik tombol "simpan semua pengaturan" untuk menyimpan perubahan Anda.

Anda sekarang dapat mengedit artikel yang sudah ada atau membuat yang baru. Anda akan melihat format di menu tarik-turun, di baris kedua editor visual WordPress.

Gaya-customize-editor-wordpress

Cukup pilih teks di editor, lalu pilih gaya kustom Anda dari menu drop-down untuk menerapkannya.

Anda sekarang dapat melihat pratinjau artikel Anda untuk melihat apakah gaya kustom Anda berlaku dengan benar.

Metode 2: Menambahkan Gaya Secara Manual ke Editor Visual

Metode ini mengharuskan Anda untuk menambahkan kode secara manual ke file WordPress Anda. Jika ini pertama kalinya Anda melakukan ini, lihat tutorial kami tentang cara menambahkan WordPress Plugin.

Langkah 1: Tambahkan gaya kustom dari menu tarik-turun Editor Visual WordPress.

Pertama, kami akan menambahkan menu drop-down di editor visual WordPress. Menu drop-down ini kemudian akan memungkinkan kita memilih dan menerapkan gaya kustom kita.

Anda harus menambahkan kode berikut ke file functions.php atau plugin anda.

function wpb_mce_buttons_2 ($ buttons) {array_unshift ($ buttons, 'styleselect'); kembalikan $ tombol; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');

Langkah 2: Cara menambahkan opsi di menu tarik-turun

Sekarang Anda perlu menambahkan beberapa opsi ke menu tarik-turun yang baru saja Anda buat. Anda kemudian dapat memilih dan menerapkan opsi ini dari format di menu tarik-turun.

Untuk tutorial ini, kami akan menambahkan tiga gaya khusus untuk dibuat isi blok dan tombol.

Anda perlu menambahkan kode berikut ke file "functions.php" dari functions.php Anda atau plugin tertentu.

/ * * Fungsi panggilan balik untuk memfilter pengaturan MCE * / function my_mce_before_init_insert_formats ($ init_array) {// Definisikan array style_formats $ style_formats = array (/ * * Setiap anak array adalah format dengan pengaturannya sendiri * Perhatikan bahwa setiap array memiliki judul , blok, kelas, dan argumen pembungkus * Judul adalah label yang akan terlihat di menu Format * Blok menentukan apakah itu span, div, selector, atau gaya sebaris * Kelas memungkinkan Anda untuk menentukan kelas CSS * Pembungkus apakah atau tidak tambahkan elemen level blok baru di sekitar elemen yang dipilih * / array ('title' => 'Blok Konten', 'blok' => 'span', 'kelas' => 'konten-blok', 'wrapper' => true,), array ('title' => 'Tombol Biru', 'block' => 'span', 'class' => 'blue-button', 'wrapper' => true,), array ('title' => 'Tombol Merah', 'blok' => 'span', 'kelas' => 'tombol merah', 'wrapper' => true,),); // Sisipkan array, JSON ENCODED, ke dalam 'style_formats' $ init_array ['style_formats'] = json_encode ($ style_formats); mengembalikan $ init_array; } // Lampirkan callback ke 'tiny_mce_before_init' add_filter ('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

Anda sekarang dapat menambahkan posting baru di WordPress dan mengklik format dari menu drop-down editor visual. Anda akan melihat bahwa gaya kustom Anda sekarang terlihat.

Namun, pilihan mereka tidak akan membuat perbedaan apa pun pada editor visual WordPress.

Langkah 3: Tambahkan Gaya CSS

Sekarang langkah terakhir adalah menambahkan aturan gaya CSS untuk gaya khusus Anda.

Anda perlu menambahkan CSS ini di file style.css dari tema Anda atau tema anak.

.content-block {border: 1px solid #eee; bantalan: 3px; latar belakang: #ccc; lebar maksimal: 250 piksel; float: benar; text-align: center; } .content-block: setelah {clear: keduanya; } .blue-button {background-color: # 33bdef; -moz-border-radius: 6px; -webkit-border-radius: 6px; radius batas: 6 piksel; batas: 1 piksel solid # 057fd0; tampilan: blok-sebaris; kursor: titik; warna: #ffffff; padding: 6px 24px; dekorasi-teks: tidak ada; } .red-button {background-color: # bc3315; -moz-border-radius: 6px; -webkit-border-radius: 6px; radius batas: 6 piksel; batas: 1 piksel solid # 942911; tampilan: blok-sebaris; kursor: titik; warna: #ffffff; padding: 6px 24px; dekorasi-teks: tidak ada; }

ikhtisar-of-tombol-TinyMCE-menambahkan-of-style-personal

Lembar gaya editor mengontrol tampilan Anda isi di editor visual. Periksa dokumentasi untuk melihat cara menemukan lokasi file ini.

Jika tema Anda tidak memiliki file stylesheet, Anda selalu dapat membuatnya. Buat saja file CSS baru dan beri nama " Kustom-editor-style.css '.

Anda perlu mengunggah file ini ke direktori root tema Anda, lalu menambahkan kode ini ke file "functions.php" tema Anda.

Fungsi my_theme_add_editor_styles () {add_editor_style ( 'adat-editor-style.css'); } ADD_ACTIONsebagai ( 'init', 'my_theme_add_editor_styles');

Itu saja. Anda baru saja menambahkan gaya kustom Anda di editor visual WordPress. Sekarang Anda dapat membuat penyesuaian yang menurut Anda benar.

Jangan ragu untuk membagikan tutorial ini dengan teman-teman Anda di jejaring sosial favorit Anda.