WordPress Tinymce eklentisi nasıl yapılır

Bir WordPress geliştiricisiyseniz, belirli bir noktada Visual WordPress düzenleyicisinin ayarlamalarını veya genişlemesini bulabilirsiniz. Örneğin, müşterinizin herhangi bir HTML kodu yazmadan hareket etmek üzere metin kutusunu veya davet düğmesini kolayca girmesini sağlamak için Visual Düzenleyici çubuğuna bir düğme eklemek isteyebilirsiniz. Bu makalede, WordPress’te nasıl bir Tinymce eklentisi yapacağınızı göstereceğiz.

Bu öğretici gereksinim gelişmiş kullanıcılar için tasarlanmıştır. Yalnızca görsel editörleri genişletmek isteyen yeni başlayan bir kullanıcı iseniz, lütfen gelişmiş Tinymce eklentisini kontrol edin veya bu Visual WordPress düzenleyicisini kullanma ipuçlarına bakın.
Bu öğretici için temel kodlama becerilerine, test edebileceğiniz WordPress kurulumuna erişmeniz gerekir. Bu, doğrudan web sitelerinde eklentiler geliştirmek için kötü bir uygulamadır. Koddaki küçük hatalar sitenize erişilemez hale getirebilir. Ancak bunu doğrudan sitede yapmanız gerekiyorsa, en azından önce bir WordPress yedeklemesi yapın. İlk Tinymce eklentinizi oluşturma Tinymce Tinymce düğmemizi kaydetmek için bir WordPress eklentisi yaparak başlayacağız. Tıklandığında, bu düğme kullanıcıların özel CSS sınıfı ile bağlantılar eklemesine izin verir.
Kaynak kodu bu makalenin sonunda tam olarak verilecek, ancak o zamana kadar adım adım bir adım atalım. İlk olarak, WordPress kurulumunuzdan WP-Content/Eklentiler klasöründe bir dizin oluşturmanız gerekir. Bu klasörü adlandırın Tinymce-Custom-Link-Sınıfı. Buradan eklenti kodumuzu eklemeye başlayacağız. Başlık Eklentisi Eklenti dizininde yeni oluşturduğumuz yeni bir dosya oluşturun ve tinymce-custom-link-class.php Bu dosya adı tinymce-custom-link-class.php. Bu kodu dosyaya ekleyin ve kaydedin ./*** Eklenti Adı: Tinymce Özel Bağlantı Sınıf
* Eklenti uri: http://wpbeginner.com
* Sürüm: 1.0
* Yazar: WPBeginner
* Yazar Uri: https://www.wpbeginner.com
* Açıklama: Visual Editor’a özel bir bağlantı sınıfı eklemek için basit bir Tinymce eklentisi
* Lisans: GPL2
*/
Bu sadece WordPress adı eklentisini, yazar ve açıklamayı anlatan bir PHP yorumu.
WordPress yönetici alanında, eklentiler> yüklü eklentiler girerek yeni eklentinizi etkinleştirin, ardından Tinymce Custom Link sınıfı eklentisinin yanındaki Etkinleştir’i tıklayın:
Eklenti sınıfımızı hazırlarsa, iki WordPress eklentisi aynı adlı işlevlere sahipse, bu hatalara neden olur. Fonksiyonumuzun sınıfa sarılmasını sağlayarak bu sorundan kaçınacağız. Tinymce_custom_link_class {

/**
* Yapıcı. Eklenti başlatıldığında çağrılır.
*/
İşlev __Construct () {
}
}
$ tinymce_custom_link_class = new tinymce_custom_link_class;
Bu, PHP sınıfımızı, $ tinymce_custom_link_class = new tinymce_custom_link_class satırına ulaştığımızda çağrılan bir yapı ile birlikte yapar; .
Bu sınıfa eklediğimiz işlev ne olursa olsun diğer WordPress eklentilerine aykırı olmamalıdır. Bir sonraki Tinymce eklentimizi hazırlamaya başlayın, Tinymce’ye özel düğmemizi görsel düzenleyici araç çubuğuna eklemek isteyebileceğimizi söylemeliyiz. Bunu yapmak için WordPress eylemlerini – özellikle de Intitance’ı kullanabiliriz. __Construct () eklentisinde aşağıdaki kodu ekleyin: if (is_admin ()) {add_raction (‘init’, dizi ($ this, ‘setup_tinymce_plugin’));
}
Bu, WordPress yönetim arayüzünde olup olmadığımızı kontrol eder. Evet ise, WordPress’in ilk yükleme rutinini tamamladığında sınıfımızdaki setup_tinymce_plugin işlevini gerçekleştirmesini isteyecektir.
Ardından, setup_tinymce_plugin işlevini ekleyin:/**
* Geçerli kullanıcının yayınları veya sayfaları düzenleyip düzenleyemeyeceğini ve görsel düzenleyiciyi kullanıp kullanmadığını kontrol edin
* Öyleyse, eklentimizi kaydedebilmemiz için bazı filtreler ekleyin
*/
işlev setup_tinymce_plugin () {
// Girişli WordPress kullanıcısının yayınları veya sayfaları düzenleyip düzenleyemeyeceğini kontrol edin
// değilse, Tinymce eklentimizi kaydetmeyin
if (! current_user_can (‘edit_posts’) &&! current_user_can (‘edit_pages’)) {
dönüş;
}
// Girişli WordPress kullanıcısının görsel düzenleyicinin etkin olup olmadığını kontrol edin
// değilse, Tinymce eklentimizi kaydetmeyin
if (get_user_option (‘rich_eliting’)! == ‘true’) {
dönüş;
}
// bazı filtreleri ayarlayın
add_filter (‘mce_external_plugins’, dizi (& $ this, ‘add_tinymce_plugin’));
add_filter (‘mce_buttons’, dizi (& $ this, ‘add_tinymce_toolbar_button’));
}
Bu, geçerli WordPress kullanıcılarının yayınları veya sayfaları düzenleyip düzenleyemeyeceğini kontrol eder. Yapamazlarsa, kullanıcı için Tinymce eklentimizi kaydetmenin bir anlamı yoktur, çünkü asla görsel editörleri görmezler. Daha sonra kullanıcının görsel bir düzenleyici kullanıp kullanmadığını kontrol ederiz, çünkü bazı WordPress kullanıcıları bunu kullanıcı> profiliniz aracılığıyla devre dışı bırakır. Bir kez daha, kullanıcı görsel bir düzenleyici kullanmazsa, (çıkış) işlevini döndürürüz, çünkü başka bir şey yapmamıza gerek yoktur. Son olarak, Tinymce için gereken JavaScript dosyasını yükleyecek ve Tinymce araç çubuğuna düğmeler ekleyecek işlevlerimizi çağırmak için iki WordPress filtresi – MCE_EXternal_Plugins ve MCE_Buttons – ekledik. Dosyaları ve JavaScript düğmelerini görsel editörlere kaydedin, devam edelim ve add_tinymce_plugin işlevini ekleyelim:
/**
* Tinymce / Visual Editor örneğine Tinymce eklentisi uyumlu bir JS dosyası ekler
*
* @Param Array $ Plugin_Array Kayıtlı Tinymce eklentilerinin dizisi
* @Return Array Modifiye Kayıtlı Tinymce Eklentileri Dizisi
*/
Function add_tinymce_plugin ($ plugin_array) {
$ Plugin_Array [‘Custom_link_class’] = eklenti_dir_url (__file__). ‘Tinymce-Custom-Link-Class.js’;
Dönüş $ Plugin_Array;
}
Bu işlev Tinymce’ye $ Plugin_Array dizisinde depolanan JavaScript dosyasını yüklemesi gerektiğini söyler. Bu JavaScript dosyası ne yapacağını söyleyecektir. Tinymce’ye araç çubuğuna eklemek istediğimiz düğmeyi anlatmak için add_tinymce_toolbar_button işlevine de bir kod eklememiz gerekiyor:
/**
* Tinymce / görsel düzenleyiciye bir düğme ekler, bu da kullanıcı tıklayabilir
* Özel bir CSS sınıfı ile bir bağlantı eklemek için.
*
* @Param Array $ Buttons Kayıtlı Tinymce Düğmeleri Dizisi
* @Return Array Değiştirilmiş Kayıtlı Tinymce düğmeleri dizisi
*/
Function add_tinymce_toolbar_button ($ buttons) {
array_push ($ buttons, ‘|’, ‘Custom_link_class’);
$ düğmeleri döndür;
}
Bu, iki öğeyi Tinymce düğmesine iter: separator (|) ve Program düğmemizin adı (Custom_link_Class). Eklentinizi kaydedin, ardından görsel editörleri görüntülemek için sayfaları veya yayınları düzenleyin. Olasılık şu ki, araç çubuğu şimdi görüntülenmiyor:
Endişelenmeyin – Web Tarayıcısı Müfettiş Konsolumuzu kullanırsak, 404 Hata ve Bildirimin Tinymce tarafından yapıldığını göreceğiz, bize JavaScript dosyamızı bulamayacağını söyleyin.
Bu iyi – bu, Tinymce özel eklentimizi kaydetmeyi başardığımız anlamına geliyor ve şimdi Tinymce’in ne yapacağını söylemek için bir JavaScript dosyası oluşturmamız gerekiyor.
WP-Concent/Plugins/Tinymce-Custom-Link-Class klasöründe yeni bir dosya için bir JavaScript eklentisi oluşturun ve Tinymce-Custom-Link-Class.js Tinymce-Custom-Link-Class.js. Bu kodu JS dosyanıza ekleyin:

(işlev () {

tinymce.pluginmanager.add (‘Custom_link_class’, işlev (editör, url) {

});
}) ();
Bu, Tinymce eklentisi ile ilgili bir dizi işlem yapmak için kullanabileceğimiz Tinymce Eklenti Yöneticisi sınıfını çağırıyor. Özellikle, eklentimizi Tinymce’e ekle işlevini kullanarak ekledik. Bu iki öğe alır; Eklenti adları (Custom_link_Class) ve anonim işlevler. Kodlamadaki işlev kavramına aşina iseniz, anonim işlev sadece işlevsiz bir işlevdir. Örneğin, foobar () {…} işlevi, FOOBAR () kullanarak kodumuzda başka bir yerde arayabileceğimiz bir işlevdir. Anonim işlevlerle, bu işlevi kodumuzda başka bir yerde arayamayız – yalnızca ADD () işlevinin noktasında denir. JavaScript dosyanızı kaydedin, ardından görsel editörleri görüntülemek için sayfaları veya yayınları düzenleyin. Her şey çalışıyorsa, araç çubuğunu göreceksiniz: şu anda, düğmelerimiz araca eklenmedi. Çünkü Tinymce’ye sadece özel bir eklenti olduğumuzu söylüyoruz. Şimdi Tinymce’ye ne yapacağımızı söylememiz gerekiyor – yani araç çubuğuna bir düğme ekleme. JavaScript dosyanızı güncelleyin, mevcut kodu aşağıdakilerle değiştirin: (function () {
tinymce.pluginmanager.add (‘Custom_link_class’, işlev (editör, url) {
// Visual Editor Araç Çubuğuna Düğme Ekle
editor.addbutton (‘Custom_link_class’, {

Başlık: ‘Düğme Bağlantısı’,
CMD: ‘Custom_link_class’,
});
});
}) ();
Anonim işlevimizin iki argümanı vardır. Birincisi örnek editörüdür – bu bir Tinymce görsel editörüdür. Aynı şekilde PluginManager’daki çeşitli işlevleri çağırabiliriz, düzenleyicide çeşitli işlevleri de çağırabiliriz. Bu durumda, araç çubuğuna düğmeler eklemek için AddButton işlevini diyoruz. JavaScript dosyanızı kaydedin ve görsel düzenleyicinize dönün. İlk bakışta hiçbir şey değişmedi. Bununla birlikte, fare imlecini üst sıranın en sağdaki simgesinin sağına yönlendirirseniz, araç ipucunun göründüğünü görürsünüz: düğmeyi araç çubuğuna başarıyla ekledik, ancak bir görüntü gerektirir. AddButton işlevine aşağıdaki parametreyi ekleyin: :: Image: url + ‘/icon.png’,
URL, eklentimizin URL’sidir. Görüntü dosyasını eklenti klasörümüze yönlendirmek istiyorsak bu yararlıdır, çünkü görüntü dosyasının adını URL’ye ekleyebiliriz. Bu durumda, eklenti klasörümüzde icon.png adlı bir görüntüye ihtiyacımız var. Aşağıdaki simgeyi kullanın:
Görsel düzenleyicimizi yeniden yükleyin ve şimdi düğmenizi simgeyle göreceksiniz:
Şimdi çalıştırma komutunu tanımlamak, düğmeyi tıklarsanız hiçbir şey olmaz. Tinymce’e düğmelerimiz tıklandığında ne yapacağını söyleyen komutlar ekleyelim. JavaScript dosyamızda, editörün sonunun altındaki aşağıdaki kodu ekleyin.
editor.addcommand (‘Custom_link_class’, function () {

Uyarı (‘düğme tıklandı!’);
});

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

Uyarıları istem ile değiştirelim, kullanıcıdan görsel düzenleyiciye seçilen metnin etrafına sarmak istedikleri bağlantıyı isteyelim: // button clickeditor.addcommand (‘Custom_link_class’, function () {) {)
// Bağlamak istediğimiz bazı metinleri seçtiklerini kontrol edin
var text = editor.section.getContent ({
‘Format’: ‘html’
});

if (text.length === 0) {
uyarısı (‘Lütfen bağlantı için bir metin seçin.’);
dönüş;
}
// Kullanıcıdan bir URL girmesini isteyin
var sonuç = istemi (‘bağlantıyı gir’;
if (! sonuç) {
// Kullanıcı iptal edildi – çıkış
dönüş;
}
if (sonuç.Length === 0) {
// Kullanıcı bir url girmedi – çıkış
dönüş;
}
// Seçilen metni tekrar editöre ekleyin, çapa etiketlerine sararak
editor.execcommand (‘mcereplaconcent’, false, ” + metin + ‘‘);
});
Bu kod bloğu birkaç işlem yapar. İlk olarak, kullanıcının görsel düzenleyiciye bağlı olacak birkaç metin seçip seçmediğini kontrol ediyoruz. Değilse, bağlantılı olarak bazı metinleri seçmelerini söyleyen bir uyarı göreceklerdir.
Sonra, onlardan bir kez daha yapıp yapmadıklarını kontrol ederek bağlantıya girmelerini istedik. İptal ederlerse veya hiçbir şey girmezlerse, başka bir şey yapmayız.
Son olarak, özellikle McereplaceConcent’in eylemini gerçekleştirerek, Tinymce editöründe yürütme işlevini gerçekleştiriyoruz. Bu, kullanıcı tarafından seçilen metni kullanarak = “düğmesi” ile bir çapa bağlantısından oluşan HTML kodumuzla seçilen metnin yerini alır. Her şey işe yarıyorsa, şimdi seçtiğiniz metni görsel editör ve metinde bağlantılı olarak göreceksiniz, sınıf düğmeye ayarla: