Yönetici Düzenleyicisi'nde Kısa Kod oluşturma yöntemi

Bu soruyu yaklaşık bir yıl önce sordum ve hedefime ulaşmamı sağlayacak basit bir çözüm olduğunu umuyorum. İşte böyle:

Yönetici Düzenleyicisi'nde sıklıkla kısa kodlar kullanıyorum, ancak bunu müşteriye teslim ettiğimde, genellikle nasıl çalıştıklarını anlamıyorlar.

Ne arıyorum sadece otomatik olarak yönetici WYSIWYG editörü içinde kısa kodların ilişkilendirme çıktısını yapacak bir çözümdür.

Görsel bir bakış açısından, bunun "daha fazla" satırının gösterilmesine veya düzenleyicide bir görüntünün gösterilmesine benzer şekilde görüntülenmesini istiyorum. Bununla, kullanıcının çıktıyı göreceğini, ancak yalnızca silebildiğini, ancak oluşturulan kısa kodun içeriğini düzenleyemeyeceğini kastediyorum.

functions editor shortcode

— NetConstructor.com
kaynak

Bu ( wp.tutsplus.com/tutorials/theme-development/… ) makaleyi okudunuz mu? TinyMCE bölümünü kontrol edin.

— cr0z3r

Bunu okudum ama söyleyebildiğim kadarıyla kısa kodlar oluşturma / kaydetme ve editör için kısa kodlar eklemek için düğmeler oluşturma ile ilgileniyor ... Ama açıkladığım gibi HTML blok meslektaşları ile bu kısa kodları oluşturma hakkında bilgi yok.

— NetConstructor.com

Yani, dahil ettiğiniz kısa kodu temsil eden ve aslında kısa kodu gerçek anlaşma HTML'siyle değiştirmeyen görsel bir yardım eklemek mi istiyorsunuz? yani galeri yer tutucusu, aslında galeri kodu değil, kullanıcıya yalnızca "Hey, burada bir galeri var" diye bilgi veren görsel bir yer tutucu?

— Matthew Boynes

Kesinlikle! Ve biraz esnek olmasını istiyorum, böylece kısa kod temelinde özelleştirmeme izin veriyor (galeri söylediğiniz gibi veya bir resim eklendiğinde)

— NetConstructor.com

wordpress.org/plugins/shortcode-ui

— jgraup

Yanıtlar:

Aslında sorduğunuz şeyi yapmak çok da kötü değil. Bu, ilkini yapmak için yaklaşık bir saat ve daha sonra yapmak için 10 dakika sürecektir.

Sonuçta yapacağınız şey bir TinyMCE eklentisi oluşturmak. Başlamak için kendinizi silahlandırmanız gerekenler:

Tinymce eklentisi oluşturmak için genel kılavuz
WordPress Core örnek kodu
WordPress'e TinyMCE eklentisi ekleme hakkında genel bir kılavuz. Bunu buldum , ki bu yeterli görünüyor.

Artık halletmek için gerekli tüm araçlara sahipsiniz! Tüm bunlardan en çok ilginizi çekecek olan kod, WP örnek kodundaki bu bloktur:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

Burada, bir galerinin kısa kodu bir imgetiketle değiştirilir . imgEtiket sınıfı vardır wp-gallerytarafından tarz alır, burada bulunan CSS .

Edit 2016-04-06: TinyMCE 4 ve WordPress 4.4 için güncellenmiş içerik ve bağlantılar

— Matthew Boynes
kaynak

ilginç! size sorayım ... tüm kısa kodların gerçek içeriğinin otomatik olarak ilişkilendirici içeriğe dönüştürülmesiyle ilgili düşünceleriniz nelerdir?

— NetConstructor.com

Bunların hepsi içeriğe bağlıdır. İlk olarak, bazı HTML'nin soyulduğunu, TinyMCE'de vb. Oluşturmada sorun yaşadığını unutmayın. İkinci olarak, kısa kodunuzun karmaşık bir HTML bloğu oluşturduğunu varsayalım. Üçüncüsü, kısa kodunuzda seçenekler varsa, HTML bloğunun tamamını öldürüp kısa kodu yeniden yapmadığınız sürece bu seçenekler artık düzenlenemez hale gelir. Şansınız, eğer kodunuz kısa koda ihtiyacınız olacak kadar karmaşıksa, yer tutucunun en iyi bahsiniz olduğunu düşünüyorum.

— Matthew Boynes

bu konuda başka birinin çözümünü gördünüz mü hiç?

— NetConstructor.com

Bu tam bir cevap değil, sadece bir tasarım yönü. Bence en iyi yaklaşım şöyle bir şey:

Yönetici düzenleme yayınında

Kaydedilen gönderideki tüm kısa kodları kopyalayın ve düzenleyicinin dışında bir meta kutunun içinde işleyin . Minik Editör'de kısa kodlar ile aynı sırada göründüklerinden emin olun.

TinyMCE javascript API'sında

Bir jQuery işlevi yapın, kullanıcı bir kısa kodu tıklattığında, HTML'yi meta kutusundan düzenleyiciye değiştirir. Ve tam tersi. Siparişin kendileri ilişkilendirme olarak iyi olmalıdır, ancak kısa kodları kuşatmaktan emin değilim. Bununla birlikte, hoş bir kimlik bağlantısı tasarlamanın birçok yolu vardır. Kısa kodların güncellemeleri ajax ile anında yapılabilir.

Oluşturulan kısa kod durumunu asla kaydetme

Editörleri değiştirmeden, taslakları, otomatik taslakları ve yayınlamayı kaydetmeden önce, geri yüklemeyi tetiklemek için bir API çağrısı yapın, böylece oluşturulan kısa kod durumu asla kaydedilmez ...

Bu yapılabilir, ancak editörün içeriğine nerede ve ne zaman erişileceğini anlamak ve 'kaydet' ve daha önce javascript işlemlerine katılmak için tinyMCE API ile aileniz olmanız gerekir.

Aynı düzenleme sonrası sayfa yükünde birkaç tinyMCE editörü olabilir.

Geri yükleme kısmı , kısa [gallery]kod beaviour'a bakarak araştırılabilir . Ancak tıklama [MY_SHORTCODE]bazı jQuery hileleri ile yapılmalıdır.

admin_footer betiğinde imlecin etkin olduğu içeriğe şu yolla erişin:

var $editor_content = $(tinymce.activeEditor.getBody());

nasıl başlayacağınıza dair bir ipucudur.

— Jonas Lundman
kaynak

Kısa kodları grafik olarak görüntülemek ve ayarlamak için bir yol arıyordum. Ve son olarak, tam olarak bunu yapan bir öğretici buldum: https://generatewp.com/take-shortcodes-ultimate-level/

Ben arama motorları almak böylece açıklama ekleyin:

Kısa kod ile basit bir eklenti oluşturacağız, daha sonra bu kısa kodu eklemek için bir TinyMCE düzenleyici düğmesi ekleyeceğiz. Ardından, TinyMCE düzenleyicisindeki kısa kodu, WordPress'in yerel galerisine (bilmediğiniz durumda aslında bir kısa koddur) benzeyen bir yer tutucu görüntüyle değiştireceğiz ve son olarak - düzenlemeye izin vereceğiz kısayolunu ve özniteliklerini yer tutucu resme çift tıklayarak görüntüleyebilirsiniz.

— Marc Chéhab
kaynak