Cara Menambahkan Gaya Kustom ke Editor Visual WordPress

Cara Menambahkan Gaya Kustom ke Editor Visual WordPress

Lihatlah editor visual WordPress Anda. Ada beberapa opsi standar untuk memformat dan menata konten Anda, tetapi tidak banyak dalam hal penyesuaian untuk membuat posting dan halaman Anda terlihat sedikit sangat mewah.


Editor WordPress

Sekarang, Anda mungkin tahu bahwa Anda memiliki kemampuan untuk bolak-balik antara editor Teks dan Visual di WordPress untuk melempar beberapa CSS untuk membuat hal-hal seperti tombol dan blok teks, tetapi ini menyakitkan, dan jika Anda tidak memiliki banyak pengalaman mengedit kode, editor teks tampaknya sedikit menakutkan.

Bukankah lebih mudah jika Anda dapat membuat gaya kustom Anda sendiri, menempatkannya di menu tarik turun di editor WordPress dan memilih untuk menggunakannya kapan pun Anda membutuhkannya? Ya, ini jauh lebih mudah, jadi kami ingin menguraikan cara melakukannya di sini. Perlu diingat bahwa meskipun kami mencoba membuat proses ini sesederhana mungkin, ada baiknya untuk memiliki sedikit pengetahuan CSS jika Anda ingin menemukan manfaat penuh dari gaya khusus.

Mari kita lihat cara menambahkan gaya khusus ke editor visual WordPress.

Tambahkan Gaya Kustom ke WordPress Visual Editor dengan Menambahkan Kode

Opsi pertama ini mengharuskan Anda untuk mengetahui sedikit tentang cara menggabungkan dan memodifikasi CSS, tetapi saya akan memberi Anda sedikit jalan untuk membantu Anda mempelajari dasar-dasarnya sehingga Anda dapat menggunakan pengetahuan ini di masa mendatang. Ini adalah opsi yang bagus jika Anda tidak ingin mempertimbangkan situs Anda dengan sebuah plugin.

Intinya adalah untuk menambahkan menu dropdown baru yang mencakup gaya khusus di editor visual WordPress Anda, yang memberi Anda kemampuan untuk memilih elemen di editor Anda dan kemudian menerapkan gaya khusus untuk mereka. Jika Anda sedang mengembangkan tema baru cari lokasi Anda functions.php file dan tempatkan kode di bawah ini ke dalam file itu atau jika Anda bekerja dengan tempel tema yang sudah dibangun, kode ini dalam file functions.php tema anak.

function myprefix_mce_buttons_1 ($ buttons) {
array_unshift ($ buttons, 'styleselect');
mengembalikan $ tombol;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Kembali ke editor di salah satu posting WordPress Anda dan sekarang Anda akan melihat tombol “Format” baru di baris atas editor. Perhatikan bagaimana kami terhubung ke “mce_buttons_1? Ini menempatkan tombol menu format di baris pertama editor mce. Anda juga bisa menggunakan filter “mce_buttons_2” untuk meletakkannya di baris kedua atau “mce_buttons_3” untuk menempatkannya di baris ke-3.

Jadi, sekarang Anda telah mengaktifkan item menu, saatnya untuk menambahkan gaya khusus Anda untuk digunakan dalam posting Anda. Ambil kode yang tercantum di bawah ini dan rekatkan ke functions.php file yang akan menambah 2 gaya baru ke dropdown Format – “Tombol Tema” dan “Sorot”.

/ **
* Tambahkan gaya khusus ke dropdown format mce
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
function myprefix_add_format_styles ($ init_array) {
$ style_formats = array (
// Setiap anak array adalah format dengan pengaturannya sendiri - tambahkan sebanyak yang Anda inginkan
Himpunan(
'title' => __ ('Tombol Tema', 'domain-teks'), // Judul untuk dropdown
'selector' => 'a', // Elemen untuk ditargetkan di editor
'classes' => 'tombol-tema' // // Nama kelas yang digunakan untuk CSS
),
Himpunan(
'title' => __ ('Sorot', 'teks-domain'), // Judul untuk dropdown
'inline' => 'span', // Bungkus rentang di sekitar konten yang dipilih
'classes' => 'highlight teks' // Nama kelas yang digunakan untuk CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
mengembalikan $ init_array;
}
add_filter ('tiny_mce_before_init', 'myprefix_add_format_styles');

Anda dapat mengubah judul untuk menampilkan nama yang berbeda di menu dropdown Anda, menambah / menghapus item dari array, dll. Anda dapat memodifikasi apa saja dalam kode ini untuk mengungkapkan gaya format kustom Anda sendiri, pastikan untuk memeriksa WordPress Codex untuk penjelasan yang lebih mendalam tentang parameter yang diterima dan nilai pengembalian.

Sekarang Anda memiliki gaya baru, Anda dapat menyorot konten di editor Anda dan menerapkan gaya. Perhatikan, bagaimana format “Tombol Tema” memiliki parameter pemilih? Ini berarti bahwa gaya hanya dapat diterapkan pada pemilih tertentu (dalam hal ini tag “a” atau “tautan”). Format kedua yang kami tambahkan “Sorot” tidak memiliki parameter pemilih, melainkan parameter “inline” yang memberitahukannya untuk menerapkan gaya ke teks apa pun yang telah Anda sorot di editor Anda dan membungkusnya dalam rentang dengan nama kelas unik Anda. Anda dapat melihat contoh dari tema Total WordPress kami tentang cara kami menggunakan format sehingga pengguna dapat dengan mudah menerapkan tampilan daftar periksa untuk setiap butir di editor.

daftar periksa

Jadi sekarang Anda dapat menggunakan format khusus Anda, tetapi mereka tidak akan terlihat berbeda sampai Anda telah menambahkan beberapa CSS khusus ke situs Anda untuk menata mereka. Anda harus menemukan stylesheet untuk tema Anda (jika Anda buat sendiri) atau tema anak dan tempel kode CSS berikut dalam file.

.tombol tema {
display: inline-block;
padding: 10 15px;
warna: #fff;
latar belakang: # 1796c6;
teks-dekorasi: tidak ada;
}
.tombol-tema: arahkan kursor {
teks-dekorasi: tidak ada;
opacity: 0,8;
}
.sorot teks {
latar belakang: # FFFF00;
}

Sekarang, ini akan menambahkan gaya ke format baru Anda untuk front-end sehingga ketika diterapkan Anda bisa melihatnya langsung. Yay! Tapi bukankah menyenangkan juga melihat gaya Anda di editor yang sebenarnya ketika sedang diterapkan? Untuk melakukan ini, Anda harus menggunakan fungsi “editor stylesheet” di WordPress. Jika Anda sedang membangun tema Anda sendiri maka Anda akan ingin membuat file css baru dalam tema Anda yang disebut “editor-style.css” (Anda dapat memberi nama apa pun yang Anda inginkan, pastikan untuk mengedit cuplikan di bawah sesuai) dengan CSS khusus ditambahkan untuk format Anda dan kemudian tambahkan fungsi di bawah ini untuk memuatnya di backend.

function myprefix_theme_add_editor_styles () {
add_editor_style ('editor-style.css');
}
add_action ('init', 'myprefix_theme_add_editor_styles');

Jika Anda bekerja dengan tema orang lain maka Anda perlu menambahkan ini di tema anak Anda, pastikan untuk memberikannya nama yang unik sehingga tidak bertentangan dengan tema orang tua Anda atau jika tema orang tua Anda sudah memiliki file CSS untuk editor Anda benar-benar dapat menyalinnya dan menempelkannya di tema anak Anda (tanpa menambahkan kode PHP di atas) kemudian menambahkan CSS baru Anda karena WordPress akan memeriksa tema anak terlebih dahulu sebelum memuat file CSS editor tema orang tua dan jika itu menempatkannya akan muatkan dari tema anak sebagai gantinya.

Tambahkan Gaya Kustom ke Editor Visual WordPress Dengan Plugin yang Bagus

Jika Anda tidak punya waktu untuk bermain-main dengan kode, atau Anda tidak dapat menebaknya sendiri, ada kabar baik. Ada plugin yang memungkinkan Anda menyelesaikan apa yang baru saja kami lakukan di atas tanpa harus bermain-main dengan kode.

Plugin Gaya Kustom TinyMCE

Cukup cari, instal, dan aktifkan Plugin TinyMCE Custom Styles dan mengaktifkannya di situs WordPress Anda.

Pengaturan Gaya Kustom TinyMCE

Pergi ke Pengaturan> TinyMCE prof.styles di sisi kiri dasbor WordPress Anda. Di sinilah Anda mengubah pengaturan untuk plugin.

Pengaturan Gaya Kustom TinyMCE

Plugin memungkinkan Anda memilih di mana stylesheet Anda berada, atau di mana Anda ingin meletakkannya. Disarankan agar Anda membuat direktori khusus baru. Pilih opsi ketiga dan berikan nama pada direktori Anda, lalu pindah ke bawah halaman untuk mengklik Simpan Pengaturan opsi sebelum melanjutkan ke langkah berikutnya.

Gaya Kustom TinyMCE Tambah Baru

Setelah Anda menyimpan pengaturan, gulir ke bawah untuk memilih tombol Tambahkan Gaya Baru.

Opsi Gaya Kustom TinyMCE

Di sinilah Anda menyesuaikan tampilan gaya kustom Anda. Ini pada dasarnya editor berbasis web sederhana yang menghasilkan kode CSS untuk Anda. Ketikkan Judul untuk apa pun yang ingin Anda tampilkan di menu tarik turun. Pilih apakah Anda ingin jenis pemilih, sebaris, atau blok. Jangan ragu untuk menggunakan tangkapan layar di atas untuk mengisi kelas dan gaya CSS, atau membuat sendiri tergantung pada apa yang Anda rencanakan untuk menggunakan menu tarik turun. Setelah selesai, klik Simpan Pengaturan di bagian bawah halaman.

Format Gaya Kustom TinyMCE

Sekarang saatnya untuk melihat bagaimana gaya kustom baru terlihat di editor Anda. Buka posting atau halaman baru dan temukan menu drop-down Format di sebelah kiri editor Visual. Itu muncul di baris kedua. Setelah Anda mengklik menu dropdown, itu akan mengungkapkan gaya baru yang baru saja Anda buat.

Format Gaya Kustom TinyMCE Digunakan

Klik pada opsi Big Blue Button, atau apa pun yang Anda buat, untuk melihatnya terungkap di editor Anda. Untuk menggunakannya cukup sorot teks yang ingin Anda format, lalu klik pada opsi Anda dan voila!

Kesimpulan

Itu saja untuk saat ini! Anda selalu dapat mempelajari lebih lanjut tentang cara menggunakan gaya baru dengan memeriksa Halaman kodeks WordPress didedikasikan untuk topik ini.

Beri tahu kami di bagian komentar jika Anda memiliki pertanyaan tentang cara menambahkan gaya khusus ke editor visual WordPress. Dan jangan ragu untuk membagikan gaya yang tidak biasa yang Anda buat untuk membuat situs Anda terlihat lebih bagus!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Adblock
    detector