Connect with us

Tutorial Custom Button Pada Tinymce Editor WordPress

Technology

Tutorial Custom Button Pada Tinymce Editor WordPress

Prev1 of 2
Use your ← → (arrow) keys to browse

Menambahkan Custom Button – Bagaimana cara menyertakan Custom Button Pada Tinymce Editor WordPress.

Pernah mendengar Tinymce? Tinymce merupakan plugin editor gui. Di wordpress di anggap sebagai plugin, alasannya kodingnya tidak dibangun oleh tim wordpress secara pribadi namun fungsinya di integrasikan kedalam core inti wordpress. Apa maksud editor gui? Merupakan editor dengan antarmuka yang gampang difahami tanpa mesti menguasai coding html. Makara di editor ini kita layaknya mengetik di MS Word. Saat kita menulis artikel (konten) dan ingin membuat goresan pena tebal atau miring tinggal klik icon saja pada tinymce tanpa mesti menambahkan tag-tag html, goresan pena akan tebal atau miring secara otomatis. Tinymce editor ini di dalam wordpress akan kita jumpai dikala membuat artikel (konten) gres atau dikala melakukan editing postingan (konten) yang sudah ada.

Pada tinymce ini tidak semua fungsi tersedia. Ada kalanya kita butuh menyertakan sesuatu pada konten yang kita tulis dan untuk menambahkannya tidak ada kepraktisan di editor tinymce, sehingga kita mesti menyertakan sesuatu itu lewat editor text. Sebagai catatan, di editor wordpress ada 2 mode pengetikan, mode gui (tinymce) dan mode text (menyertakan seluruh tag html secara manual). Semua bisa dilakukan di mode text, namun kita harus menguasai coding html dan mengetik dalam mode text saya rasa kurang praktis karena mesti menyertakan tag-tag htmlnya secara manual.

Untuk itu pada tutorial kali ini kita menjajal mencar ilmu membuat atau menyertakan fungsi atau akomodasi khusus yang mungkin sering kita butuhkan dalam menulis postingan ke dalam tinymce editor. Fungsi atau kepraktisan apa saja bisa kita tambahkan tergantung dari kebutuhan. Sebagai bahan berguru kita kali ini, kita akan membuat tombol (button) yang bisa menambahkan isyarat html “” kedalam artikel secara langsung tanpa harus masuk mode text. Kode tersebut berfungsi untuk membagi postingan kita menjadi beberapa halaman. Untuk pembahasan mendalam ihwal “” dapat membaca tutorial saya sebelumnya wacana Membagi Postingan Blog Dalam Beberapa Halaman.

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 suatu file gres dalam folder tersebut dengan nama “wp_add_button_editor.php” (nama file tidak mesti sama, silakan disesuaikan dengan prospek) serta buka file yang sudah dibentuk tersebut pada text editor. Tambahkan kode php berikut ke dalam file “wp_add_button_editor.php”

<br/><?php /** =========================================================================<br/>Plugin for adding custom button to tinymce editor<br/>================================================================================ */<br/>add_action( ‘init’, ‘btpm_slug_buttons’ );<br/>function btpm_slug_buttons() <br/>if ( ! current_user_can( ‘edit_posts’ ) && ! current_user_can( ‘edit_pages’ ) ) return; <br/>if ( get_user_option( ‘rich_editing’ ) !== ‘true’ ) return; <br/>add_filter( ‘mce_external_plugins’, ‘btpm_slug_add_buttons’ );<br/>add_filter( ‘mce_buttons’, ‘btpm_slug_register_buttons’ );<br/><br/>function btpm_slug_add_buttons( $plugin_array ) <br/>$plugin_array[‘nextpage’] = btpm_tinymce_np();<br/>return $plugin_array;<br/><br/>function btpm_slug_register_buttons( $buttons ) <br/>array_push( $buttons, ‘nextpage’ );<br/>return $buttons;<br/><br/>function btpm_tinymce_np() ?><br/><br/><?php


12345678910111213141516171819202122232425262728293031323334
/** =========================================================================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() ?>

Coba lebih fokus ke function “btpm_tinymce_np()” Di dalamnya nyaris seluruhnya coding javascript. Karena memang tinymce ini dibagun menggunakan coding javascript, sehingga tombol custom ini pun dibagun dengan javascript. Lebih fokus lagi ke serpihan “image”. Disini anda mesti mempersiapkan sebuah file image selaku icon pada tampilan tinymcenya, bisa tipe .jpg .png .gif atau .svg akan tetapi saya sarankan gunakan tipe .svg karena tipe ini menggunakan rancangan vektor sehingga tidak akan pecah dalam aneka macam resolusi layar. Untuk peletakan filenya silakan disesuaikan dengan cita-cita. Selanjutnya nanti tinggal menyesuaikan pemanggilan filenya pada coding “image”. Jika menyaksikan 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”

<br/>require (‘inc/wp_add_button_editor.php’);


1
require (‘inc/wp_add_button_editor.php’);

Hasilnya akan timbul tombol baru pada tinymce editor yang jikalau di klik akan menyertakan isyarat html “” yang bila di lihat dalam mode gui akan ada garis putus-putus dengan ukiran pena di tengan “Page Break”. Seperti terlihat pada gambar berikut.

Semoga bermanfaat. Happy Coding..

Prev1 of 2
Use your ← → (arrow) keys to browse

Click to comment

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

More in Technology

To Top