WordPress Görsel Editöre Buton Ekleme ~ TeknoWeblopedi

Editörümüzün adı TinyMCE. Eklemenin işlem kısmını PHP ile yapacağız ancak bize TinyMCE ile ilgili bir kısım jQuery kodları gerekli. Bu kodlara TinyMCE’nin kendi codex sayfasından ulaşabilirsiniz. Girdiğiniz sayfada bölümler belirtilmiş. Bizim işimize yarayacak kısım Plugin kısmı olacağı için kodlara oradan bakmanızı tavsiye ederim.

Hemen başlayalım.. İlk olarak temamızın functions.php dosyasını açıyoruz ve kod yazmaya başlıyoruz.

İşlem yaptıracağımız PHP kodlarını girmemiz gerekli ve benim oluşturmak istediğim basit butonun işlevi tıklandığı zaman

[P-HP ][/ P-HP] şeklinde taglar açacak. (Syntax Eklentisini kullandığım için araya boşluk ve “-” koymak zorunda kaldım.) Bizde içerisine istediğimiz kodları ekleyebileceğiz. Bu işlemi yapmanın wordpressdeki adına Hook deniyor. Bizde artık kendi WordPress Hook‘umuzu yapabileceğiz.

1add_action('init','ozellik_adi');

2add_filter( 'tiny_mce_version', 'my_refresh_mce');

ile “init” işlemi gerçekleştirerek eklememize küçük bir başlangıç yaptık. Ayrı ayrı fonksiyonlar oluşturarak yapacağımız bu işlem için eklememiz gereken sabit kodlar mevcuttur.

1function ozellik_adi() {

2if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {

3return;

4}

5 

6if ( get_user_option('rich_editing') == 'true' ) {

7add_filter( 'mce_external_plugins', 'ekle' );

8add_filter( 'mce_buttons', 'tekrarEt' );

9}

10}

11 

12function tekrarEt( $butonum ) {

13array_push( $butonum , "|", "php" );

14return $butonum ;

15}

16 

17function ekle( $ekle ) {

18$ekle ['php'] = get_bloginfo( 'template_url' ) . '/editor-ekle.js';

19return $ekle;

20}

functions.php dosyamıza sadece bu kodları eklememiz yeterli. Bunlar sabit kodlardır ve hiç bir değişiklik yapmamız gerekmemektedir. İlk başta belirttiğim jQuery kısmına gelecek olursak, tema dizininde editor-ekle.js isimli bir javascript dosyası oluşturunuz ve içerisine aşağıda kodları ekleyiniz.

1(function() {

2 

3tinymce.create('tinymce.plugins.php', {

4init : function(ed, url) {

5ed.addButton('php', {

6title : 'php butonum',

7image : url+'/phpbutonum.png',

8onclick : function() {

9ed.selection.setContent('1');

10}

11});

12},

13createControl : function(n, cm) {

14return null;

15}

16});

17tinymce.PluginManager.add('php', tinymce.plugins.php);

18 

19})();

Bu kodları ekledikten sonra Görsel metin editörünüzde “image : url+’/phpbutonum.png’” yolunda belirttiğiniz görsel çıkacaktır ve ona tıkladığınızda ie php tagları açılıp kapanacaktır.Dosyaları buradan indirebilirsiniz.

Ayrıca bir alternatif olarak otomatik olarak eklemeyi sağlayan bu eklentiyide indirebilirsiniz.

TinyMCE Advanced