Membuat Atau Menambahkan Custom Button Pada Tinymce Editor WordPress
30menit – Bagaimana cara menambahkan Custom Button Pada Tinymce Editor WordPress.
Pernah mendengar Tinymce? Tinymce merupakan plugin editor gui. Di wordpress di anggap sebagai plugin, karena kodingnya tidak dibangun oleh tim wordpress secara langsung tapi fungsinya di integrasikan kedalam core inti wordpress. Apa maksud editor gui? Merupakan editor dengan antarmuka yang mudah difahami tanpa harus menguasai coding html. Jadi di editor ini kita layaknya mengetik di MS Word. Saat kita menulis artikel (konten) dan ingin membuat tulisan tebal atau miring tinggal klik icon saja pada tinymce tanpa harus menambahkan tag-tag html, tulisan akan tebal atau miring secara otomatis. Tinymce editor ini di dalam wordpress akan kita jumpai saat membuat artikel (konten) baru atau saat melakukan editing artikel (konten) yang sudah ada.
Pada tinymce ini tidak semua fungsi tersedia. Ada kalanya kita butuh menambahkan sesuatu pada konten yang kita tulis dan untuk menambahkannya tidak ada fasilitas di editor tinymce, sehingga kita harus menambahkan sesuatu itu melalui editor text. Sebagai catatan, di editor wordpress ada 2 mode pengetikan, mode gui (tinymce) dan mode text (menambahkan seluruh tag html secara manual). Semua bisa dilakukan di mode text, tetapi kita harus menguasai coding html dan mengetik dalam mode text saya rasa kurang praktis karena harus menambahkan tag-tag htmlnya secara manual.
Untuk itu pada tutorial kali ini kita mencoba belajar membuat atau menambahkan fungsi atau fasilitas khusus yang mungkin sering kita butuhkan dalam menulis artikel ke dalam tinymce editor. Fungsi atau fasilitas apa saja bisa kita tambahkan tergantung dari kebutuhan. Sebagai bahan belajar kita kali ini, kita akan membuat tombol (button) yang bisa menambahkan kode html “<!–nextpage–>” kedalam artikel secara langsung tanpa harus masuk mode text. Kode tersebut berfungsi untuk membagi artikel kita menjadi beberapa halaman. Untuk pembahasan mendalam tentang “<!–nextpage–>” dapat membaca tutorial saya sebelumnya tentang Membagi Postingan Blog Dalam Beberapa Halaman.
Tutorial menambahkan custom button ini merupakan pengembangan tingkat lanjut dari tutorial Belajar Membuat Template WordPress Dengan Framework Bootstrap Versi 4.0.0 Jadi alangkah baiknya anda juga membaca tutorial tersebut untuk pemahaman lebih mendalam. Serta membaca beberapa tutorial pengembangan lainnya pada tags #wp_advance
Mari masuk ke tutorialnya. Silakan buka folder template (tema) btpm. Cari file “functions.php” dan buka file tersebut pada text editor. Kemudian buka folder “inc” dan buat sebuah file baru dalam folder tersebut dengan nama “wp_add_button_editor.php” (nama file tidak harus sama, silakan disesuaikan dengan keinginan) serta buka file yang sudah dibuat tersebut pada text editor. Tambahkan kode php berikut ke dalam file “wp_add_button_editor.php”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?php /** ========================================================================= Plugin for adding custom button to tinymce editor ================================================================================ */ add_action( 'init', 'btpm_slug_buttons' ); function btpm_slug_buttons() { if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) { return; } if ( get_user_option( 'rich_editing' ) !== 'true' ) { return; } add_filter( 'mce_external_plugins', 'btpm_slug_add_buttons' ); add_filter( 'mce_buttons', 'btpm_slug_register_buttons' ); } function btpm_slug_add_buttons( $plugin_array ) { $plugin_array['nextpage'] = btpm_tinymce_np(); return $plugin_array; } function btpm_slug_register_buttons( $buttons ) { array_push( $buttons, 'nextpage' ); return $buttons; } function btpm_tinymce_np(){ ?> <script type="text/javascript"> jQuery(document).ready(function($){ tinymce.create('tinymce.plugins.BTPMNextPage', { init : function(tor) { tor.addButton('nextpage', { title : '<?php echo __('Insert Page Break', 'btpm'); ?>', image : '<?php echo get_template_directory_uri(); ?>/images/nextpage.svg', onclick : function() { tor.execCommand('mceInsertContent', false, '<!--nextpage-->'); } }); } }); tinymce.PluginManager.add('nextpage', tinymce.plugins.BTPMNextPage); }); </script> <?php } |
Coba lebih fokus ke function “btpm_tinymce_np()” Di dalamnya hampir seluruhnya coding javascript. Karena memang tinymce ini dibagun menggunakan coding javascript, sehingga tombol custom ini pun dibagun dengan javascript. Lebih fokus lagi ke bagian “image”. Disini anda harus menyiapkan sebuah file image sebagai icon pada tampilan tinymcenya, bisa tipe .jpg .png .gif atau .svg akan tetapi saya sarankan gunakan tipe .svg karena tipe ini menggunakan konsep vektor sehingga tidak akan pecah dalam berbagai resolusi layar. Untuk peletakan filenya silakan disesuaikan dengan keinginan. Selanjutnya nanti tinggal menyesuaikan pemanggilan filenya pada coding “image”. Jika melihat coding saya di atas file “image” saya letakkan pada folder images. Terakhir include fungsi dalam file “wp_add_button_editor.php” ke dalam file “functions.php”
|
1 |
require ('inc/wp_add_button_editor.php'); |
Hasilnya akan muncul tombol baru pada tinymce editor yang jika di klik akan menambahkan kode html “<!–nextpage–>” yang jika di lihat dalam mode gui akan ada garis putus-putus dengan tulisan di tengan “Page Break”. Seperti terlihat pada gambar berikut.
Jika ada yang kurang bisa di fahami dapat melihat video berikut :
Semoga bermanfaat. Happy Coding..
- Bagikan
-
-
-
-
-
-
Tulisan Terkait
Masyhuri Jamil
Tidak memiliki kompetensi di bidang coding. Tapi selalu semangat terus belajar html, css, php, mysql, java script (jquery). Suka oprek-oprek android juga dan yang pasti suka jalan-jalan (treveling).
