WordPress TinyMCE Eklentisi Nasıl Oluşturulur

Bir WordPress geliştiricisiyseniz, bir noktada WordPress Görsel Düzenleyiciyi özelleştirme veya genişletme ile karşılaşabilirsiniz. Örneğin, müşterinizin HTML kodu yazmadan kolayca bir metin kutusu veya bir harekete geçirici mesaj düğmesi eklemesine izin vermek için Görsel Düzenleyici araç çubuğuna bir düğme eklemek isteyebilirsiniz. Bu makalede, WordPress'te bir TinyMCE eklentisi oluşturmayı göstereceğiz.

Gereksinimler

Bu eğitim ileri düzey kullanıcılar için tasarlanmıştır. Görsel düzenleyiciyi genişletmek isteyen yeni başlayan bir kullanıcıysanız, lütfen TinyMCE Advanced eklentisini kontrol edin veya WordPress görsel düzenleyicisini kullanma ipuçlarına göz atın.

Bu eğitim için, temel kodlama becerilerine, test edebileceğiniz bir WordPress kurulumuna erişime ihtiyacınız olacak.

Canlı bir web sitesinde eklenti geliştirmek kötü bir uygulamadır. Kodda küçük bir hata sitenizi erişilemez hale getirebilir. Ancak canlı bir sitede yapmak zorundaysanız, o zaman 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ıyla bir bağlantı eklemesine olanak tanıyacaktır.

Kaynak kodunun tamamı bu makalenin sonunda sağlanacaktır, ancak o zamana kadar eklentiyi adım adım oluşturalım.

Öncelikle, 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 eklenti kodumuzu eklemeye başlayacağız.

Eklenti Başlığı

Az önce oluşturduğumuz eklenti dizininde yeni bir dosya oluşturun ve bu dosyayı tinymce-custom-link-class.php olarak adlandırın. 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 bir PHP yorumudur, bu da WordPress'e eklentinin adını, yazarını ve açıklamasını söyler.

WordPress yönetici alanında, Yeni eklentinizi Eklentiler > Yüklü Eklentiler'e giderek ve ardından TinyMCE Özel Bağlantı Sınıfı eklentisinin yanındaki Etkinleştir'e tıklayarak etkinleştirin:

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

İki WordPress eklentisinin aynı ada sahip işlevleri varsa, bu bir hataya neden olur. İşlevlerimizi bir sınıf içine alarak bu sorundan kaçınacağız.

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

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

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

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

TinyMCE Eklentimizi Kurmaya Başlayın

Ardından, özel düğmemizi Görsel Düzenleyici araç çubuğuna eklemek isteyebileceğimizi TinyMCE'ye bildirmemiz gerekiyor. Bunu yapmak için, WordPress'in init eylemi olmak üzere eylemlerini kullanabiliriz.

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

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

Bu, WordPress Yönetici arayüzünde olup olmadığımızı kontrol eder. Öyleyse, WordPress'in ilk yükleme rutinini tamamladığında sınıfımızdaki setup_tinymce_plugin fonksiyonunu çalıştırmasını ister.

Ardından, setup_tinymce_plugin fonksiyonunu 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, mevcut oturum açmış WordPress kullanıcısının Gönderileri veya Sayfaları düzenleyip düzenleyemeyeceğini kontrol eder. Eğer düzenleyemiyorlarsa, o Kullanıcı için TinyMCE Eklentimizi kaydetmenin bir anlamı yoktur, çünkü Görsel Düzenleyiciyi asla görmeyeceklerdir.

Ardından, bazı WordPress kullanıcılarının Kullanıcılar > Profiliniz aracılığıyla kapattığı Görsel Düzenleyiciyi kullanıp kullanmadıklarını kontrol ederiz. Yine, kullanıcı Görsel Düzenleyiciyi kullanmıyorsa, başka bir şey yapmamız gerekmediği için fonksiyonu döndürürüz (çıkış yaparız).

Son olarak, gerekli Javascript dosyasını TinyMCE için yükleyecek ve TinyMCE araç çubuğuna bir düğme ekleyecek fonksiyonlarımızı ç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

Hadi 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 depolanan Javascript dosyalarını yüklemesi gerektiğini söyler. Bu Javascript dosyaları TinyMCE'ye ne yapacağını söyleyecektir.

TinyMCE'ye araç çubuğuna eklemek istediğimiz düğme hakkında bilgi vermek için add_tinymce_toolbar_button fonksiyonuna da 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 ekler: bir ayırıcı (|) ve düğmemizin programatik adı (custom_link_class).

Eklentinizi kaydedin, ardından Görsel Düzenleyici'yi görüntülemek için bir Sayfa veya Yazı düzenleyin. Muhtemelen araç çubuğu şu anda doğru görüntülenmiyor:

Endişelenmeyin - web tarayıcımızın denetleyici konsolunu kullanırsak, TinyMCE tarafından 404 hatası ve bildirim oluşturulduğunu göreceğiz, bu da Javascript dosyamızı bulamadığını bize bildirir.

Bu iyi - özel TinyMCE eklentimizi başarıyla kaydettiğimiz anlamına gelir ve şimdi TinyMCE'ye ne yapacağını söyleyecek Javascript dosyasını oluşturmamız gerekiyor.

Javascript Eklentisini Oluşturma

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

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

Bu, bir dizi TinyMCE eklentiyle ilgili eylemi gerçekleştirmek için kullanabileceğimiz TinyMCE Eklenti Yöneticisi sınıfını çağırır. Özellikle, eklentimizi add fonksiyonunu kullanarak TinyMCE'ye ekliyoruz.

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

Kodlamada fonksiyon kavramına aşina iseniz, anonim fonksiyon yalnızca adı olmayan bir fonksiyondur. Örneğin, function foobar() { ... } , kodumuzun başka bir yerinde foobar() kullanılarak çağırabileceğimiz bir fonksiyondur.

Anonim bir fonksiyonla, bu fonksiyonu kodumuzun başka bir yerinde çağıramayız – yalnızca add() fonksiyonu çağrıldığında çağrılır.

Javascript dosyanızı kaydedin ve ardından Görsel Düzenleyici'yi görüntülemek için bir Sayfa veya Yazı düzenleyin. Her şey yolunda gittiyse, araç çubuğunu göreceksiniz:

Şu anda düğmemiz o araç çubuğuna eklenmedi. Bunun nedeni, TinyMCE'ye yalnızca özel bir eklenti olduğumuzu söylemiş olmamızdır. Şimdi TinyMCE'ye ne yapacağını, yani araç çubuğuna bir düğme ekleyeceğini söylememiz gerekiyor.

Mevcut kodunuzu aşağıdaki kodla 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ğunu unutmayın. Birincisi editor örneğidir - bu TinyMCE Görsel Düzenleyicisidir. PluginManager üzerinde çeşitli fonksiyonları çağırabildiğimiz gibi, editor ü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üzenleyici'ye geri dönün. İlk bakışta hiçbir şey değişmemiş gibi görünecektir. Ancak, fare imlecini üst sıradaki en sağdaki simgenin sağına getirdiğinizde, bir araç ipucunun göründüğünü görmelisiniz:

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

image: url + '/icon.png',

url is the URL to our plugin. This is handy if we want to reference an image file within our plugin folder, as we can append the image file name to the URL. In this case, we’ll need an image called icon.png in our plugin’s folder. Use the below icon:

Reload our Visual Editor, and you’ll now see your button with the icon:

Çalıştırılacak Bir Komut Tanımlama

Şu anda, düğmeye tıklarsanız hiçbir şey olmayacaktır. 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 sonunun altına 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ının Görsel Düzenleyici'de seçilen metrafı sarmalamak istediği bağlantı için 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ç işlem gerçekleştirir.

İlk olarak, Kullanıcının Bağlantı Kurmak İçin Görsel Düzenleyicide Metin Seçip Seçmediğini Kontrol Ederiz. Seçmediyse, Bağlantı Kurmak İçin Metin Seçmelerini Söyleyen Bir Uyarı Göreceklerdir.

Ardından, onlardan bir bağlantı girmelerini isteriz, yine yaptıklarını kontrol ederiz. İptal ederlerse veya hiçbir şey girmezlerse, başka bir şey yapmayız.

Son olarak, TinyMCE düzenleyicisinde execCommand fonksiyonunu çalıştırıyoruz, özellikle mceReplaceContent eylemini çalıştırıyoruz. Bu, seçili metni, kullanıcının seçtiği metni içeren, class='button' olan bir bağlantıdan oluşan HTML kodumuzla değiştirir.

Her şey yolunda gittiyse, seçtiğiniz metnin Görsel Düzenleyici ve Metin görünümlerinde, button olarak ayarlanan sınıfla bağlantılı olduğunu göreceksiniz:

Özet

WordPress'te TinyMCE görsel düzenleyicisine bir düğme ekleyen bir WordPress eklentisi başarıyla oluşturduk. Bu eğitim ayrıca TinyMCE API'sinin ve TinyMCE entegrasyonları için kullanılabilen WordPress filtrelerinin bazı temellerini de kapsamıştır.

Kullanıcı özel düğmemize tıkladığında, Görsel Düzenleyici'de bir metin seçmeleri isteneceği ve ardından istedikleri bir URL'ye bağlayabilecekleri şekilde kod ekledik. Son olarak, eklentimiz seçilen metni button adlı özel bir CSS sınıfı içeren bağlantılı bir sürümle değiştirir.

Bu eğitimimizin, bir WordPress TinyMCE eklentisi oluşturmayı öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, siteye özel bir WordPress eklentisi oluşturma rehberimize de göz atmak isteyebilirsiniz.

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