Cara Menambahkan Tombol Kustom pada Editor WordPress

Pastinya akan repot jika anda sering memasukkan tag sebelum dan sesudah teks secara manual. Tapi sebaliknya, jika anda menambahkan tombol ke editor WordPress untuk memformat posting yang sering anda lakukan, itu akan lebih menghemat waktu dan energi.

Berikut adalah cara normal untuk memformat teks sebagai ”Note” pada Theme Thesis.

<p class="note">Tes untuk Note</p>

Dan karena saya menggunakan Theme Thesis, inilah hasilnya:

Tes untuk Note

Sekarang, jika anda harus mengulang hal seperti itu sebanyak lima kali di sebuah posting, pastinya anda akan repot mengetik lagi walaupun dengan cara copy-paste. Jadi, mengapa tidak menambahkan sebuah tombol ke editor itu sendiri.

Tombol-tombol default pada editor HTML WordPress

Sebagian besar dari kita tidak tahu bahwa tombol-tombol tersebut dapat ditambah maupun dihapus. Sekarang akan saya jelaskan caranya, tanpa menggunakan plugin:

Pertama, buat salinan backup dari file quicktags.dev.js dan quicktags.js untuk alasan keamanan. Semua file tersebut terletak di folder wp-includes/js/.

Sekarang edit file quicktags.dev.js. Setelah anda membuka file tersebut anda akan melihat kode yang terpisah untuk setiap tombol, seperti yang terlihat berikut ini.

edButtons[edButtons.length] =
new edButton('ed_strong'
,'b'
,'<strong>'
,'</strong>'
,'b'
);

Jadi, semua yang perlu anda lakukan sekarang adalah menciptakan sebuah kode untuk setiap tombol yang anda inginkan dan tempatkan di sana. Anda juga dapat menghapus sebuah tombol dengan cara menghapus kodenya.

Sekarang, mari kita memahami arti setiap elemen dalam sebuah kode dan cara membuat tombol baru. Berhubung saya menggunakan Theme Thesis, disini saya akan membuat tombol ”Note”.

Dua baris pertama mengidentifikasikan sebuah tombol. Baris ke-3 adalah nama tampilan untuk sebuah tombol. Baris ke-4 dan ke-5 terdapat tag HTML pembuka dan penutup untuk sebuah tombol. Baris terakhir dari kode terdapat nama internal untuk sebuah tombol. Jadi, inilah kode untuk tombol ”Note”:

edButtons[edButtons.length] =
new edButton('ed_note'
,'note'
,'<p class="note">'
,'</p>'
,'note'
);

Setelah kode di atas dimasukkan, simpan filenya. Lalu hapus file quicktags.js yang lama dan ubah nama quicktags.dev.js menjadi quicktags.js. Dan selesai!