WordPress 3.9+ TinyMCE 4 Tweaks: Stiller, Düğmeler, Yazı Tipleri, Açılır Menüler ve Açılır Pencereler Ekleme

WordPress 3.9'daki en sevdiğim güncellemelerden biri, TinyMCE sürüm 4.0 çekirdeğini yapmaktı. Yeni TinyMCE daha temiz görünüyor (WP panosuyla gerçekten eşleşiyor) ve gerçekten güzel ek işlevlere sahip. Eski temalarımın ve eklentilerimin birçoğunun yeni TinyMCE ile çalışması için güncellenmesi gerekiyordu, bu yüzden API'yi araştırmak ve harika şeyler bulmak için biraz zaman harcadım. Aşağıda size TinyMCE'nin işlevselliğini nasıl genişletebileceğiniz konusunda bazı örnekler vereceğim. Size tüm adımlarda veya kodun tam olarak ne anlama geldiğini anlatmayacağım (bu, geliştiriciler için tasarlanmıştır), ancak temanıza veya eklentinize kopyalayabileceğiniz/yapıştırabileceğiniz ve ardından buna göre ince ayar yapabileceğiniz tam kodu sağlayacaktır.

Yazı Tipi Boyutu ve Yazı Tipi Ailesi Seçimleri Ekleme

Varsayılan olarak Özel Yazı Tipleri ve yazı tipi boyutları TinyMCE düzenleyicisine eklenmez. Aşağıdaki işlev, bu açılır menülerin her ikisini de ikinci satırdaki düzenleyicinin en soluna ekleyecektir. Farklı bir satırda istiyorsanız, sadece 'mce_buttons_2' yazan yeri değiştirin (ör. 3. satır için 'mce_buttons_3' kullanın).

 // Enable font size & font family selects in the editor if ( ! function_exists( 'wpex_mce_buttons' ) ) { function wpex_mce_buttons( $buttons ) { array_unshift( $buttons, 'fontselect' ); // Add Font Select array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select return $buttons; } } add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );

Özel Yazı Tipi Boyutları Ekleme

Varsayılan olarak yazı tipi boyutları, her zaman ideal olmayan pt değerlerine ayarlanmıştır. Piksel değerlerini (12px, 13px, 14px, 16px..vb) kullanmayı ve daha fazla esneklik için daha fazla seçenek sunmayı tercih ediyorum. Aşağıdaki işlev, açılır seçicideki varsayılan yazı tipi boyutu seçeneklerini değiştirecektir.

 // Customize mce editor font sizes if ( ! function_exists( 'wpex_mce_text_sizes' ) ) { function wpex_mce_text_sizes( $initArray ){ $initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px"; return $initArray; } } add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

Özel Yazı Tipleri Ekleme

Yazı tipi ailesi seçicisindeki varsayılan yazı tipi seçeneklerinin tümü varsayılan olarak "web uyumlu" yazı tipleridir, ancak seçiciye daha fazla yazı tipi eklemek isterseniz ne olur? Belki bazı Google Yazı Tipleri? Aşağıdaki örneğe bir göz atmak gerçekten kolay olacak.

 // Add custom Fonts to the Fonts list if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) { function wpex_mce_google_fonts_array( $initArray ) { $initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats'; return $initArray; } } add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );

Yukarıdaki koddaki listeye “Lato”yu nasıl eklediğime dikkat edin? Bu kadar basit! Total WordPress temamda, sitede kullanılan herhangi bir özel yazı tipini tema panelinde tanımlandığı gibi dolaşıyorum ve bunları seçim kutusuna ekliyorum, böylece yazılarınızı/sayfalarınızı düzenlerken de kullanılabilirler (tatlı). Ancak kod YALNIZCA yazı tipi ailesini açılır menüye ekler, komut dosyasını sihirli bir şekilde yüklemez, böylece düzenleyicideki metninizi değiştirdiğinizde, ona uygulanmış özel yazı tipini gerçekten görebilirsiniz… Aşağıdaki kod budur!

 // Add Google Scripts for use with the editor if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) { function wpex_mce_google_fonts_styles() { $font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700'; add_editor_style( str_replace( ',', '%2C', $font_url ) ); } } add_action( 'init', 'wpex_mce_google_fonts_styles' );

Biçimler (stiller) Açılır Menüsünü Etkinleştir ve Yeni Stiller Ekle

WP 3.8'deki "Tarzlar" açılır menüsünü hatırlıyor musunuz? Bu çok güzeldi! Bunu, yazı düzenleyicide kullanılacak bazı harika sınıflar eklemek için kullanabilirsiniz (Aslında WPExplorer'da düğmeler, renkli yayılmalar, kutular..vs için kullanıyorum). WP 3.9'da hala stiller ekleyebilirsiniz, ancak yeni TinyMCE 4.0'da “Biçimler” olarak yeniden adlandırıldı, bu yüzden biraz farklı çalışıyor. Aşağıda, Biçimler açılır menüsünün nasıl etkinleştirileceğine ve buna bazı yeni öğeler ekleneceğine ilişkin bir örnek verilmiştir.

Biçimler Açılır Menüsünü Etkinleştir

Bu aslında WP 3.9'dan önce aynı şekilde yapılıyor ama nasıl yapacağınızı bilmiyorsunuzdur diye paylaşıyorum.

 // Add Formats Dropdown Menu To MCE if ( ! function_exists( 'wpex_style_select' ) ) { function wpex_style_select( $buttons ) { array_push( $buttons, 'styleselect' ); return $buttons; } } add_filter( 'mce_buttons', 'wpex_style_select' );

Formatlara Yeni Öğeler Ekle

Yeni öğeler eklemek son derece kolaydır. Lütfen “$settings['style_formats_merge'] = true;” öğesini nasıl eklediğime dikkat edin. aşağıdaki koda göre, bu, düzenlemelerinizin diğerleriyle birlikte biçimler açılır menüsüne eklenmesini sağlar – her şeyin üzerine yazmayın (belki diğer eklentiler de bundan yararlanmak ister).

 // Add new styles to the TinyMCE "formats" menu dropdown if ( ! function_exists( 'wpex_styles_dropdown' ) ) { function wpex_styles_dropdown( $settings ) { // Create array of new styles $new_styles = array( array( 'title' => __( 'Custom Styles', 'wpex' ), 'items' => array( array( 'title' => __('Theme Button','wpex'), 'selector' => 'a', 'classes' => 'theme-button' ), array( 'title' => __('Highlight','wpex'), 'inline' => 'span', 'classes' => 'text-highlight', ), ), ), ); // Merge old & new styles $settings['style_formats_merge'] = true; // Add new styles $settings['style_formats'] = json_encode( $new_styles ); // Return New Settings return $settings; } } add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );

Basit Bir MCE Düğmesi Ekleme

TinyMCE düzenleyicisine yeni bir düğme eklemek özellikle kısa kodlar için kullanışlıdır, çünkü bir kullanıcı olarak herhangi bir kısa kodu hatırlamanız gerekmez, bir düğmeyi tıklamanız yeterlidir ve o onu ekler. Tüm kısa kodlarınız için TinyMCE'ye 100'lerce düğme eklemenizi söylemiyorum (geliştiricilerin bunu yapmasından nefret ediyorum, bu çok kötü bir uygulama ve korkunç görünüyor) ama 1 veya birkaç tane eklerseniz geçmesine izin veririm İsterseniz bir demet eklemek için aşağıdaki bölümde açıklandığı gibi bir alt menü oluşturmalısınız.

PHP Kodu – Yeni MCE eklentisini WP'de bildirin

Bu kod, yeni MCE eklentinizi bildirecektir. "mce-button.js" javascript dosyasının konumunu, dosyanızın konumuyla eşleşecek şekilde değiştirdiğinizden emin olun (ki bunun için size kodunu bir sonraki alt bölümde vereceğim) de açıkçası "benim" önekini daha benzersiz bir şeyle yeniden adlandırın!

 // Hooks your functions into the correct filters function my_add_mce_button() { // check user permissions if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) { return; } // check if WYSIWYG is enabled if ( 'true' == get_user_option( 'rich_editing' ) ) { add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' ); add_filter( 'mce_buttons', 'my_register_mce_button' ); } } add_action('admin_head', 'my_add_mce_button'); // Declare script for new button function my_add_tinymce_plugin( $plugin_array ) { $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js'; return $plugin_array; } // Register new button in the editor function my_register_mce_button( $buttons ) { array_push( $buttons, 'my_mce_button' ); return $buttons; }

JS Kodu – Düğmeyi MCE'ye ekleyin

Bu js kodu, "symple_shortcodes_add_tinymce_plugin" işlevinde yukarıdaki snippet'te kayıtlı js dosyasına gider. Bu, düzenleyicinize “Yeni Düğme” yazan yeni bir metin düğmesi eklemeli ve tıklandığında “WPExplorer.com harika!” metnini ekleyecektir. (elbette).

 (function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton('my_mce_button', { text: 'New Button', icon: false, onclick: function() { editor.insertContent('WPExplorer.com is awesome!'); } }); }); })();

Yeni MCE Düğmenize Özel Bir Simge Ekleyin

Yukarıda, editörde “Yeni Düğme” olarak görüntülenecek yeni bir düğmeyi nasıl ekleyeceğinizi gösterdim, bu biraz topal… Yani değiştirilen kod size kendi özel simgenizi nasıl ekleyeceğinizi gösterecek.

CSS'nizle bir stil sayfası yükleyin

Yönetici panelinizde kullanmak üzere yeni bir stil sayfası yüklemek için bu işlevi kullanın – bazı eklentiler/temalar zaten bir stil sayfası ekliyor olabilir, bu nedenle temanız/eklentiniz bunu yapıyorsa bunu atlayın ve sadece özel CSS'nizi ekleyin ve js'yi değiştirin (aşağıda gösterilmiştir) .

 function my_shortcodes_mce_css() { wp_enqueue_style('symple_shortcodes-tc', plugins_url('/css/my-mce-style.css', __FILE__) ); } add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );

Özel CSS'niz

Bu, daha önce yüklenen stil sayfasını eklemek için kullanılan CSS'dir.

 i.my-mce-icon { background-image: url('YOUR ICON URL'); }

Javascript'inizi değiştirin

Şimdi metin parametresini kaldırmak için daha önce eklediğiniz javascript'i basit bir şekilde değiştirin ve simgeyi false olarak ayarlamak yerine ona özel bir sınıf adı verin.

 (function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton( 'my_mce_button', { icon: 'my-mce-icon', onclick: function() { editor.insertContent('WPExplorer.com is awesome!'); } }); }); })();

Alt Menülü Buton Ekleme

Daha önce TinyMCE çubuğuna bir ton yeni simge eklemenin kötü bir fikir olduğundan bahsetmiştim (ve öyle), bu yüzden özel düğmeniz için bir alt menüyü görüntülemek üzere javascript'i nasıl düzenleyebileceğinizi görmek için aşağıdaki kodu kontrol edin. Eylemde görmek istiyorsanız Symple Kısa Kodlar Videoma bakın.

 (function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton( 'my_mce_button', { text: 'Sample Dropdown', icon: false, type: 'menubutton', menu: [ { text: 'Item 1', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('WPExplorer.com is awesome!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('WPExplorer.com is awesome!'); } } ] }, { text: 'Item 2', menu: [ { text: 'Sub Item 1', onclick: function() { editor.insertContent('WPExplorer.com is awesome!'); } }, { text: 'Sub Item 2', onclick: function() { editor.insertContent('WPExplorer.com is awesome!'); } } ] } ] }); }); })();

Tıkladığınızda Düğmenize Açılır Pencere Ekleme

Yukarıdaki örnekte, her düğmenin basitçe “WPExplorer.com harika!” metnini eklediğini fark edebilirsiniz. bu harika, peki ya kullanıcının metne eklenenleri değiştirebileceği bir açılır pencere oluşturmaya ne dersiniz? Şimdi bu çok tatlı olurdu! Ve bu, Symple Kısa Kodlarımın 1.6 sürümüne eklediğim ve eklentiyi çok daha kullanıcı dostu hale getirdiğim bir şey.

 (function() { tinymce.PluginManager.add('my_mce_button', function( editor, url ) { editor.addButton( 'my_mce_button', { text: 'Sample Dropdown', icon: false, type: 'menubutton', menu: [ { text: 'Item 1', menu: [ { text: 'Pop-Up', onclick: function() { editor.windowManager.open( { title: 'Insert Random Shortcode', body: [ { type: 'textbox', name: 'textboxName', label: 'Text Box', value: '30' }, { type: 'textbox', name: 'multilineName', label: 'Multiline Text Box', value: 'You can say a lot of stuff in here', multiline: true, minWidth: 300, minHeight: 100 }, { type: 'listbox', name: 'listboxName', label: 'List Box', 'values': [ {text: 'Option 1', value: '1'}, {text: 'Option 2', value: '2'}, {text: 'Option 3', value: '3'} ] } ], onsubmit: function( e ) { editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]'); } }); } } ] } ] }); }); })();

Bu harika… Şimdi Ne?

İyi soru! Şimdi bu harika tweaks'leri alıp epik bir şey yaratmanın veya eklentilerinizi/temalarınızı WordPress 3.9'daki yeni TinyMCE ile uyumlu olacak şekilde güncellemenin zamanı geldi. Aşağıdaki yorumlarda ne bulduğunuzu bana bildirin!