WordPress TinyMCE Eklentisi Nasıl Oluşturulur

WordPress geliştiricisiyseniz, bir noktada WordPress Görsel Düzenleyicisini özelleştirmek veya genişletmekle karşılaşabilirsiniz. Örneğin, müşterinizin herhangi bir HTML kodu yazmadan kolayca bir metin kutusu veya harekete geçirici mesaj düğmesi eklemesine olanak sağlamak için Görsel Düzenleyicinin araç çubuğuna bir düğme eklemek isteyebilirsiniz. Bu makalede, WordPress’te bir TinyMCE eklentisinin nasıl oluşturulacağını göstereceğiz.

Gereksinimler

Bu eğitim ileri düzey kullanıcılar için hazırlanmıştır. Görsel düzenleyiciyi genişletmek isteyen başlangıç seviyesinde bir kullanıcıysanız, lütfen TinyMCE Advanced eklentisine göz atın veya WordPress görsel düzenleyicisini kullanma hakkındaki bu ipuçlarına göz atın.

Bu eğitim için temel kodlama becerilerine ve test edebileceğiniz bir WordPress kurulumuna erişmeniz gerekecek.

Canlı bir web sitesinde eklenti geliştirmek kötü bir uygulamadır. Koddaki küçük bir hata sitenizi erişilemez hale getirebilir. Ancak bunu canlı bir sitede yapmanız gerekiyorsa, en azından önce WordPress’i yedekleyin.

İlk TinyMCE Eklentinizi Oluşturma

Özel TinyMCE araç çubuğu düğmemizi kaydetmek için bir WordPress eklentisi oluşturarak başlayacağız. Tıklandığında, bu düğme kullanıcının özel bir CSS sınıfı ile bir bağlantı eklemesine izin verecektir.

Kaynak kodu bu makalenin sonunda tam olarak verilecektir, ancak o zamana kadar eklentiyi adım adım oluşturalım.

İlk olarak, WordPress kurulumunuzun wp-content/plugins klasöründe bir dizin oluşturmanız gerekir. Bu klasöre tinymce-custom-link-class adını verin.

Buradan itibaren eklenti kodumuzu eklemeye başlayacağız.

Eklenti Başlığı

Az önce oluşturduğumuz eklenti dizininde yeni bir dosya oluşturun ve bu dosyaya tinymce-custom-link-class.php adını verin. Bu kodu dosyaya ekleyin ve kaydedin.

/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: http://wpbeginner.com
 * Version: 1.0
 * Author: WPBeginner
 * Author URI: https://www.wpbeginner.com
 * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
 * License: GPL2
 */

Bu sadece WordPress’e eklentinin adını, yazarını ve açıklamasını söyleyen bir PHP yorumudur.

WordPress yönetici alanında, Eklentiler > Yüklü Eklentiler’e gidip TinyMCE Özel Bağlantı Sınıfı eklentisinin yanındaki Etkinleştir’e tıklayarak yeni eklentinizi etkinleştirin:

Eklenti Sınıfımızı Kurma

Eğer iki WordPress eklentisi aynı isimde fonksiyonlara sahipse, bu bir hataya neden olacaktır. Fonksiyonlarımızı bir sınıfa sararak bu sorunu önleyeceğiz.

class TinyMCE_Custom_Link_Class {
	
	/**
	* Constructor. Called when the plugin is initialised.
	*/
	function __construct() {
		
	}

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

Bu, $tinymce_custom_link_class = new TinyMCE_Custom_Link_Class; satırına ulaştığımızda çağrılan bir yapı ile birlikte PHP sınıfımızı oluşturur.

Bu sınıfın içine eklediğimiz herhangi bir fonksiyon diğer WordPress eklentileriyle çakışmamalıdır.

TinyMCE Eklentimizi Kurmaya Başlayın

Ardından, TinyMCE’ye özel düğmemizi Görsel Düzenleyicinin araç çubuğuna eklemek isteyebileceğimizi söylememiz gerekiyor. Bunu yapmak için WordPress’in eylemlerini, özellikle de init eylemini kullanabiliriz.

Aşağıdaki kodu eklentinizin __construct () fonksiyonunun içine ekleyin:

if ( is_admin() ) {
	add_action( 'init', array(  $this, 'setup_tinymce_plugin' ) );
}

Bu, WordPress Yönetim arayüzünde olup olmadığımızı kontrol eder. Eğer öyleysek, WordPress ilk yükleme rutinini tamamladığında WordPress’ten sınıfımızın içindeki setup_tinymce_plugin fonksiyonunu çalıştırmasını ister.

Ardından, setup_tinymce_plugin işlevini ekleyin:

/**
* Check if the current user can edit Posts or Pages, and is using the Visual Editor
* If so, add some filters so we can register our plugin
*/
function setup_tinymce_plugin() {

// Check if the logged in WordPress User can edit Posts or Pages
// If not, don't register our TinyMCE plugin
	
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
	        return;
}

// Check if the logged in WordPress User has the Visual Editor enabled
// If not, don't register our TinyMCE plugin
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}

// Setup some filters
add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
		
	}

Bu, oturum açmış olan WordPress kullanıcısının Yazıları veya Sayfaları düzenleyip düzenleyemeyeceğini kontrol eder. Eğer yapamıyorlarsa, Görsel Düzenleyiciyi asla göremeyecekleri için TinyMCE Eklentimizi o Kullanıcı için kaydetmenin bir anlamı yoktur.

Daha sonra kullanıcının Görsel Düzenleyiciyi kullanıp kullanmadığını kontrol ederiz, çünkü bazı WordPress kullanıcıları bunu Kullanıcılar > Profiliniz üzerinden kapatır. Yine, eğer kullanıcı Görsel Düzenleyiciyi kullanmıyorsa, başka bir şey yapmamıza gerek olmadığından fonksiyonu geri döndürüyoruz (çıkıyoruz).

Son olarak, TinyMCE için gerekli Javascript dosyasını yükleyecek ve TinyMCE araç çubuğuna bir düğme ekleyecek işlevlerimizi çağırmak için iki WordPress Filtresi – mce_external_plugins ve mce_buttons ekliyoruz.

Javascript Dosyasını ve Düğmesini Görsel Düzenleyiciye Kaydetme

Devam edelim ve add_tinymce_plugin fonksiyonunu ekleyelim:

/**
* Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
*
* @param array $plugin_array Array of registered TinyMCE Plugins
* @return array Modified array of registered TinyMCE Plugins
*/
function add_tinymce_plugin( $plugin_array ) {

$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
return $plugin_array;

}
    

Bu fonksiyon TinyMCE’ye $plugin_array dizisinde saklanan Javascript dosyalarını yüklemesi gerektiğini söyler. Bu Javascript dosyaları TinyMCE’ye ne yapması gerektiğini söyleyecektir.

Ayrıca add_tinymce_toolbar_button fonksiyonuna, TinyMCE’ye araç çubuğuna eklemek istediğimiz düğme hakkında bilgi vermek için bazı kodlar eklememiz gerekiyor:

/**
* Adds a button to the TinyMCE / Visual Editor which the user can click
* to insert a link with a custom CSS class.
*
* @param array $buttons Array of registered TinyMCE Buttons
* @return array Modified array of registered TinyMCE Buttons
*/
function add_tinymce_toolbar_button( $buttons ) {

array_push( $buttons, '|', 'custom_link_class' );
return $buttons;
}

Bu, TinyMCE düğmeleri dizisine iki öğe iter: bir ayırıcı (|) ve düğmemizin programatik adı (custom_link_class).

Eklentinizi kaydedin ve ardından Görsel Düzenleyiciyi görüntülemek için bir Sayfayı veya Gönderiyi düzenleyin. Muhtemelen araç çubuğu şu anda görüntülenmiyordur:

Endişelenmeyin – web tarayıcımızın denetçi konsolunu kullanırsak, TinyMCE tarafından Javascript dosyamızı bulamadığını söyleyen bir 404 hatası ve bildirimi oluşturulduğunu göreceğiz.

Bu iyi – TinyMCE özel eklentimizi başarıyla kaydettiğimiz anlamına geliyor ve şimdi TinyMCE’ye ne yapacağını söylemek için Javascript dosyasını oluşturmamız gerekiyor.

Javascript Eklentisinin Oluşturulması

wp-content/plugins/tinymce-custom-link-class klasörünüzde yeni bir dosya oluşturun ve tinymce-custom-link-class.js olarak adlandırın. Bu kodu js dosyanıza ekleyin:

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		
	});
})();

Bu, TinyMCE eklentisiyle ilgili bir dizi eylemi gerçekleştirmek için kullanabileceğimiz TinyMCE Plugin Manager sınıfını çağırır. Özellikle, eklentimizi TinyMCE’ye add fonksiyonunu kullanarak ekliyoruz.

Bu iki öğe kabul eder; eklentinin adı(custom_link_class) ve anonim bir fonksiyon.

Kodlamada fonksiyon kavramına aşinaysanız, anonim fonksiyon basitçe ismi olmayan bir fonksiyondur. Örneğin, function foobar() { .. . } , foobar() kullanarak kodumuzun başka bir yerinde çağırabileceğimiz bir fonksiyondur.

Anonim bir işlevle, bu işlevi kodumuzun başka bir yerinde çağıramayız – yalnızca add() işlevinin çağrıldığı noktada çağrılır.

Javascript dosyanızı kaydedin ve ardından Görsel Düzenleyiciyi görüntülemek için bir Sayfayı veya Gönderiyi düzenleyin. Her şey işe yaradıysa araç çubuğunu göreceksiniz:

Şu anda, butonumuz bu araç çubuğuna eklenmedi. Bunun nedeni TinyMCE’ye sadece özel bir eklenti olduğumuzu söylemiş olmamız. Şimdi TinyMCE’ye ne yapacağını söylememiz gerekiyor – yani araç çubuğuna bir düğme eklemek.

Mevcut kodunuzu aşağıdakiyle değiştirerek Javascript dosyanızı güncelleyin:

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		// Add Button to Visual Editor Toolbar
		editor.addButton('custom_link_class', {
			title: 'Insert Button Link',
			cmd: 'custom_link_class',
		});	
	});
})();

Anonim fonksiyonumuzun iki argümanı olduğuna dikkat edin. Birincisi editör örneğidir – bu TinyMCE Görsel Düzenleyicisidir. PluginManager üzerinde çeşitli fonksiyonları çağırabildiğimiz gibi, editör üzerinde de çeşitli fonksiyonları çağırabiliriz. Bu durumda, araç çubuğuna bir düğme eklemek için addButton fonksiyonunu çağırıyoruz.

Javascript dosyanızı kaydedin ve Görsel Düzenleyicinize geri dönün. İlk bakışta hiçbir şey değişmemiş gibi görünüyor. Ancak, fare imlecinizi en üst satırın en sağındaki simgenin sağına getirirseniz, bir araç ipucunun göründüğünü göreceksiniz:

Araç çubuğuna başarılı bir şekilde bir düğme ekledik, ancak bunun bir resme ihtiyacı var. Aşağıdaki parametreyi addButton fonksiyonuna, title: satırının altına ekleyin:

image: url + '/icon.png',

url eklentimizin URL’sidir. URL’ye resim dosyası adını ekleyebildiğimiz için, eklenti klasörümüz içindeki bir resim dosyasına başvurmak istiyorsak bu kullanışlıdır. Bu durumda, eklentimizin klasöründe icon.png adlı bir resme ihtiyacımız olacak. Aşağıdaki simgeyi kullanın:

Görsel Düzenleyicimizi yeniden yükleyin ve şimdi düğmenizi simgesiyle birlikte göreceksiniz:

Çalıştırılacak Komutu Tanımlama

Şu anda, eğer butona tıklarsanız, hiçbir şey olmayacak. TinyMCE’ye düğmemize tıklandığında ne yapacağını söyleyen bir komut ekleyelim.

Javascript dosyamızda, editor.addButton bölümünün sonuna aşağıdaki kodu ekleyin:

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	alert('Button clicked!');
});

Görsel Düzenleyicimizi yeniden yükleyin, düğmeye tıklayın ve düğmeye tıkladığımızı onaylayan bir uyarı görünecektir:

Uyarıyı, kullanıcıdan Görsel Düzenleyicide seçili metnin etrafına sarmak istediği bağlantıyı soran bir istemle değiştirelim:

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	// Check we have selected some text that we want to link
	var text = editor.selection.getContent({
		'format': 'html'
	});
	if ( text.length === 0 ) {
		alert( 'Please select some text to link.' );
		return;
	}

	// Ask the user to enter a URL
	var result = prompt('Enter the link');
	if ( !result ) {
		// User cancelled - exit
		return;
	}
	if (result.length === 0) {
		// User didn't enter a URL - exit
		return;
	}

	// Insert selected text back into editor, wrapping it in an anchor tag
	editor.execCommand('mceReplaceContent', false, '<a class="button" href="' + result + '">' + text + '</a>');
});

Bu kod bloğu birkaç eylem gerçekleştirir.

İlk olarak, kullanıcının Görsel Düzenleyicide bağlanacak bir metin seçip seçmediğini kontrol ederiz. Eğer seçmediyse, bağlanacak bir metin seçmelerini söyleyen bir uyarı görecekler.

Ardından, bir bağlantı girmelerini istiyoruz ve girip girmediklerini tekrar kontrol ediyoruz. Eğer iptal ettilerse veya hiçbir şey girmedilerse, başka bir şey yapmıyoruz.

Son olarak, TinyMCE editöründe execCommand işlevini çalıştırıyoruz, özellikle mceReplaceContent eylemini çalıştırıyoruz. Bu, seçilen metni, kullanıcının seçtiği metni kullanarak class=”button” içeren bir bağlantıdan oluşan HTML kodumuzla değiştirir.

Her şey işe yaradıysa, seçili metninizin artık Görsel Düzenleyici ve Metin görünümlerinde bağlantılı olduğunu ve sınıfının düğme olarak ayarlandığını göreceksiniz:

Özet

WordPress’teki TinyMCE görsel düzenleyicisine bir düğme ekleyen bir WordPress eklentisini başarıyla oluşturduk. Bu eğitimde ayrıca TinyMCE API’sinin temelleri ve TinyMCE entegrasyonları için mevcut WordPress filtreleri de ele alındı.

Kod ekledik, böylece bir kullanıcı özel düğmemize tıkladığında, Görsel Düzenleyicide bir metin seçmesi istenir ve daha sonra bu metni istediği bir URL’ye bağlayabilir. Son olarak, eklentimiz seçilen metni düğme adlı özel bir CSS sınıfı içeren bağlantılı bir sürümle değiştirir.

Umarız bu eğitim WordPress TinyMCE eklentisinin nasıl oluşturulacağını öğrenmenize yardımcı olmuştur. Siteye özel bir WordPress eklentisinin nasıl oluşturulacağına ilişkin rehberimize de göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, WordPress video eğitimleri için lütfen YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook‘ta da bulabilirsiniz.