WordPress 3.9+ Tinymce 4 Tweaks: Stil, düğmeler, yazı tipleri, açılır ve amp;Açılır
WordPress 3.9’daki en sevdiğim güncellemelerden biri Tinymce sürüm 4.0’ın çekirdeğini yapmak. Yeni Tinymce daha temiz görünüyor (WP gösterge paneli için çok uygun) ve birkaç ek işlevi var. Birçok eski tema ve eklenti, yeni Tinymce ile çalışacak şekilde güncellenmem gerekiyor, bu yüzden ateşi kazmak ve bazı harika şeyler bulmak için biraz zaman harcıyorum. Aşağıda Tinymce işlevselliğini nasıl genişletebileceğinize dair bazı örnekler vereceğim. Tüm gerçek adımlar veya anlamlar boyunca size rehberlik etmeyeceğim (bu geliştiriciler için tasarlanmıştır), ancak temanıza veya eklentinize kopyalayıp yapıştırabileceğiniz ve ardından ayarlayabileceğiniz doğru kodu vereceğim.
Yazı Tipi Boyutu ve Fontal Yazı Tiplerinin Seçimi Ekleme Varsayılan olarak, özel yazı tipleri ve yazı tipi boyutları Tinymce düzenleyicisine eklenmez. Aşağıdaki işlev, ikinci sıradaki en soldaki editöre iki açılır menü ekleyecektir. Farklı bir satırda isterseniz ‘MCE_BUTTONS_2’ söylendiği yerde değiştirin (örneğin: 3. satır için ‘MCE_BUTTONS_3’ kullanın). // yazı tipi boyutu ve yazı tipi ailesi, (! Function_exists (‘wpex_mce_buttons’)) {function wpex_mce_buttons ($ buttons) {array_unshift ($ buttons, ‘fontCect’); // yazı tipi ekle array_unshift ($ buttons, ‘fontSizeeseLect’); // Yazı tipi ekle $ Döndür $ düğmelerini seçin; }} add_filter (‘MCE_BUTTONS_2’, ‘wpex_mce_buttons’);
Varsayılan olarak özel bir yazı tipi boyutu ekleyen yazı tipi boyutu, her zaman ideal olmayan PT değerine ayarlanır.Piksel değerlerini (12px, 13px, 14px, 16px..TC) kullanmayı ve daha iyi esneklik için daha fazla seçenek sunmayı tercih ediyorum.Aşağıdaki işlev, açılır seçmendeki varsayılan yazı tipi boyutu seçeneğini değiştirecektir.// (! Function_exists (‘wpex_mce_text_sines’ ‘)) {işlev wpex_mce_text_seses ($ initArray) {$ initArray [‘ fontSize_Formats ‘] =Return $ initArray;}} add_filter (‘tiny_mce_before_init’, ‘wpex_mce_text_seses’);Font Family seçmenlerine varsayılan yazı tipi özel yazı tipi eklemek, varsayılan olarak “Aman-Web” yazı tipleridir, ancak seçmenlere daha fazla yazı tipi eklemek istiyorsanız?Belki biraz Google yazı tipi?Aşağıdaki örneği görmemiz çok kolay olacağız.
// Yazı tipleri listesine özel yazı tipleri ekleyin (! function_exists (‘wpex_mce_google_fonts_array’)) {function wpex_mce_google_fonts_array ($ initarray) {$ initarray [‘font_formats’] = ‘lato; arial, sans-serial; aro; arial; arial; arial; Siyah, avant garde; kitap antiqua = kitap antiqua, palatino; çizgi roman sans ms = çizgi roman sans ms, sans-serif; kurye yeni = kurye yeni, kurye; georgia = georgia, palatino; helvetica = helveteti; etki = etki, chicago; sembol = Sembol; Tahoma = Tahoma, Arial, Helvetica, Sans-Serif; Terminal = Terminal, Monaco; Times New Roman = Times New Roman, Times; Trebuchet MS = Trebuchet MS, Cenevre, Ceneva, Ceneva, Ceneva Verdana = Verdan, Geneva ; Webdings = webdings; kanatdings = kanatdings, zapf dingbats ‘; Return $ initArray; }} add_filter (‘tiny_mce_before_init’, ‘wpex_mce_google_fonts_array’); Yukarıdaki kod listesine nasıl “Lato” eklediğime dikkat edin? Kadar basit! Total WordPress temamda, Sitede kullanılan her özel yazı tipini tema panelinde tanımlandığı gibi tekrarlıyorum ve Seçim kutusuna ekliyorum, böylece yayın/sayfanızı (Sweet) düzenlerken de kullanılabilir. Ancak kod, yazı tiplerini yalnızca açılır menüde reklamı yapar, komut dosyasını mucizevi bir şekilde yüklemez, böylece düzenleyicideki metninizi değiştirdiğinizde, ona uygulanan özel yazı tipini gerçekten görebilirsiniz … Kod aşağıda yapılır !
// If (! function_exists (‘wpex_mce_google_fonts_styles’)) {işlev wpex_mce_google_fonts_styles () {$ font_url = ‘http://fontadd_ditor_style (str_replace (‘,’, ‘%2c’, $ font_url));}} add_ace (‘init’, ‘wpex_mce_google_fonts_styles’);WP 3.8’deki “Force” açılır menüsünü hatırlamak için açılır format (stil) menüsünü etkinleştirin ve yeni bir stil ekleyin?Çok havalı!Editör postasında kullanmak için bazı harika sınıflar eklemek için kullanabilirsiniz (düğmeler, renk aralıkları, kutular..dll için gerçek wpexplorer üzerinde kullanıyorum).WP 3.9’da olacağız, yine de stil ekleyebilirsiniz, ancak biraz farklı işlev görmesi için bir “format” olmak için Tinymce 4.0’da değiştirildi.Aşağıda açılır biçiminin nasıl etkinleştirileceğine ve ayrıca bazı yeni öğelerin nasıl ekleneceğine bir örnek verilmiştir.
// tinymce “formatı __ (‘özel stiller’, ‘wpex’), ‘öğeler’ => dizi (‘başlık’ => __ (‘tema düğmesi’, ‘wpex’), ‘seçici olarak yeni stiller ekleyin ‘=>’ A ‘,’ sınıflar ‘=>’ tema düğmesi ‘), dizi (‘ başlık ‘=> __ (‘ vurgu ‘,’ wpex ‘),’ satır ‘=>’ span ‘,’ sınıflar ‘= = > ‘metin yüksekliği’,),),),); // eski ve yeni stilleri birleştir $ ayarları [‘style_formats_merge’] = true; // yeni stiller ekle $ ayarları [‘style_formats’] = json_entencode ($ new_styles); // Yeni ayarları döndür $ ayarları döndür; }} add_filter (‘tiny_mce_before_init’, ‘wpex_styles_dropdown’); Tinymce düzenleyicisine yeni bir düğme eklemek basit bir MCE düğmesi ekleyin Kısa kodlar için çok kullanışlıdır, çünkü bir kullanıcı olarak herhangi bir kısa kodu hatırlamanıza gerek yoktur, düğmeyi tıklayıp girebilirsiniz. Tüm kısa kodlarınız için Tinymce’e 100 düğme eklemeyi söylemedim (geliştirici bunu yaptığında nefret ediyorum, kötü bir uygulama ve korkunç görünüyor) ama 1 veya daha fazla eklerseniz, isterseniz geçmesine izin vereceğim Birçok ekleyin, o zaman aşağıdaki bölümde açıklandığı gibi bir alt menü yapmanız gerekir. PHP Kodu-DECLEAR WP’de yeni bir MCE eklentisi Bu kod, yeni MCE eklentinizi bildirecek, dosyanızın konumuna (kod vereceğim Ayrıca bir sonraki alt bölümde) ve daha benzersiz bir şey için “Me” önekinin adını açıkça değiştirmenin yanı sıra! // İşlevinizi doğru filtrelere bağlar My_add_mce_button () {// (! current_user_can (‘edit_posts’) &&! current_user_can (‘edit_pages’))) {return; } // (‘true’ == get_user_option (‘rich_eliting’)) {add_filter (‘mce_teinymce_plugin’)); add_filter (‘mce_buttons’, ‘my_register_mce_button’); }} add_ace (‘admin_head’, ‘my_add_mce_button’); // Yeni düğme işlevi için betiği bildirme my_add_tinymce_plugin ($ plugin_array) {$ plugin_array [‘my_mce_button’] = get_template_directory_uri (). ‘/js/mce-button.js’; Dönüş $ Plugin_Array; } // düzenleyici işlevine yeni düğmeyi kaydedin my_register_mce_button ($ buttons) {array_push ($ buttons, ‘my_mce_button’); $ düğmeleri döndür; } Js kodu – MCE JS Koduna Ekle Düğmesi Yukarıdaki alıntıda listelenen JS dosyasını girin “Simple_shortcodes_add_tinymce_plugin dosyasında”. Bu, düzenleyicinize “Yeni Düğme” yazan yeni bir metin düğmesi eklemeli ve tıklandığında “wpexplorer.com Amazing!” (elbette).
(function () {tinymce.pluginmanager.add (‘my_mce_button’, function (editör, url) {editor.addbutton (‘my_mce_button’, {text: ‘yeni düğme’, simge: false, onclick: function () {editör. insertContent (‘wpexplorer.com harika!’);}});});}) (); Yukarıdaki yeni MCE düğmenize özel simgeyi ekleyin, editörde “yeni bir düğme” olarak görüntülenecek yeni bir düğme nasıl ekleneceğinizi gösteriyorum, bu biraz felç … böylece değişen değişiklikler size gösterilecek Kendi özel simgeni nasıl ekleyebilirsiniz. Stil Sayfasını CSS ile Yükle Bu işlevi, yönetici panelinizde kullanmak için yeni bir stil sayfası yüklemek için kullanırsınız – bazı eklentiler/temalar, temalarınız/eklentileriniz bunu yaparsa ve sadece özel CSS’nizi eklediyse ve JS’yi ayarlamış olabilir. (görüntülenir (aşağıda görüntülenir). işlev 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, daha önce yayınlanan stil sayfasını eklemek için CSS’dir. I.My-McE-Icon {arka plan-image: url (‘simge url’); } Tweak JavaScript artık metin parametrelerini silmek için daha önce eklediğiniz basit JavaScript ayarlığınız ve simgeleri yanlış olarak ayarlamak yerine özel sınıf adları verin. (function () {tinymce.pluginmanager.add (‘my_mce_button’, function (editör, url) {editor.addbutton (‘my_mce_button’, onclick: function () (‘wpexplorer. com harika! ‘);}});});}) (); Alt menü ile düğmeler ekleyin
Daha önce Tinymce Blades’e yeni bir simge eklemenin kötü bir fikir olduğunu söylemiştim (ve gerçekten), bu nedenle JavaScript’i özel düğmeleriniz için görüntülemek için JavaScript’i nasıl düzenleyebileceğinizi görmek için aşağıdaki kodu kontrol edin. Onu çalışırken görmek istiyorsanız, basit kısa kodlar videomu görün. (function () {tinymce.pluginmanager.add (‘my_mce_button’, function (editör, url) {editor.addbutton (‘my_mce_button’, {text: ‘örnek açılır tabaka’, simge: false, tip: ‘menubutton’, menü: [{text: ‘öğe 1’, menü: [{text: ‘alt madde 1’, onclick: function () {editor.insertcontent (‘wpexplorer.com harika!’);}, {metin: ‘metin:’ Alt madde 2 ‘, onclick: function () {editor.insertcontent (‘ wpexplorer.com harika! ‘);}}]}, {text:’ Öğe 2 ‘, menü: [{{text:’ alt madde 1 ‘ , onClick: function () {editor.insertContent (‘wpexplorer.com harika!’);}}, {text: ‘alt madde 2’, onclick: function () {editor.insertcontent (‘wpexplorer.com harika! ‘);}}]}]});});}) (); Yukarıdaki örneğe tıklarken düğmenize bir açılır pencere ekleyin, her bir düğmenin yalnızca “wpexplorer.com harika olduğunu!” Harika, ama kullanıcıların metne girilenleri değiştirebilecekleri bir açılır pencere yapmaya ne dersiniz? Şimdi tatlı olacak! Ve bu, basit kısa kodlarımdan 1.6 sürümüne eklediğim ve eklentiyi daha kullanıcı dostu hale getirdiğim bir şey.
