WordPress Görsel Metin Editörüne Buton Ekleme

 

Wp yazı yazarken çok sık kullandığınız bir kod olabilir, bir buton ihtiyacınız vardır farklı sebeplerden. Bunu eklentisiz direk kod yardımıyla yapmak isterseniz, bununla ilgili derlediğim yazıyı sizlerle paylaşayım. TinyMCE editörü yardımıyla yapılan bu kodlara sayfasından erişebilirsiniz. Plugin kısmındaki kodların yardımıyla butonumuzu oluşturalım.

 

 

add_action('init','ozellik_adi'); 
add_filter( 'tiny_mce_version', 'my_refresh_mce');  

function ozellik_adi() { 
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) { 
return; 
} 

if ( get_user_option('rich_editing') == 'true' ) { 
add_filter( 'mce_external_plugins', 'ekle' ); 
add_filter( 'mce_buttons', 'tekrarEt' ); 
} 
} 

function tekrarEt( $butonum ) { 
array_push( $butonum , "|", "php" ); 
return $butonum ; 
} 

function ekle( $ekle ) { 
$ekle ['php'] = get_bloginfo( 'template_url' ) . '/buton-ekle.js'; 
return $ekle; 
}

 

 

Editör yardımıyla boş bir sayfa açın ve içine alttaki kodu ekleyip ismini ” buton-ekle.js ” yapın. Bu javascript dosyasını daha düzenli olsun diye temanızın js klasörüne atmak isterseniz, üstteki kodda 21. satırda bulunan ‘/buton-ekle.js’  kısmında yeri belirtin. Örneğin temanızın içinde js klasörü varsa kodu ‘/js/buton-ekle.js’ olarak değiştirin.

 

(function() {

tinymce.create('tinymce.plugins.php', {
init : function(ed, url) {
ed.addButton('php', {
title : 'Buton',
image : url+'/buton.png',
onclick : function() {
ed.selection.setContent('değiştir');
}
});
},
createControl : function(n, cm) {
return null;
}
});
tinymce.PluginManager.add('php', tinymce.plugins.php);

})();

 

 

Şimdi gelelim bu yaptığımız butona işlev kazandırmada, şayet hazır bir kodunuz varsa onu atamak daha mantıklı. Her defasında yazmak istemediğiniz bir kodun kısayolu olarak da tayin edebilirsiniz. Üstteki kodda 9. satırda bulunan ed.selection.setContent(‘değiştir’); yazan yerde değiştir yazan yere istediğinizi yazabilirsiniz. Yapılan butona tıklandığında buradaki yazı,rakam, kod ne yazdıysanız o direk gelecektir. 

 

Yaptığımız bu botuna birde görsel kazandıralım. Üsteki js dosyamızın 7. satırında bulunan url+’/buton.png’  butonun küçük resmini temsil ediyor. Eklemek istediğiniz küçük resmi js ile aynı yere atarsanız sorunsuz çalışacaktır.

 

Küçük resim için google embedderi kullanabilirsiniz. Altta veriyorum, sağ tuşla tıklayıp kaydet diyin.