Ana İçeriğe Geç

WordPress üzerinde bir shortcode arayüz eklemek nasıl

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Bir müşteri için bir WordPress sitesi geliştiriyorsanız, o müşteri için kısa kodlara sahip olma ihtimaliniz vardır. Sorun şu ki, birçok yeni kullanıcı bir kısa kodun nasıl ekleneceğini bilmiyor ve eklenen herhangi bir parametre varsa daha da karmaşık hale geliyor. Shortcake, kullanıcılara WordPress'e kısa kodlar eklemek için kolay bir çözüm sunar.

Bu eğitimde, yazılara ve sayfalara eklemeyi basitleştirmek için WordPress'e nasıl kısa kod arayüzü ekleyeceğinizi göstereceğim.

Shortcake nedir?

WordPress, kısa kodlar aracılığıyla yayınlara ve sayfalara çalıştırılabilir kod eklemenize izin veren bir özellik sunar. Birkaç WordPress teması ve eklentisi, kullanıcıların kısa kodlar kullanarak bloglarına işlevsellik eklemelerine olanak tanır. Bununla birlikte, bu kısa kodların kullanımı çok zor hale gelebilir ve bu da özelleştirmeyi zorlaştırır.

Örneğin, temel bir WordPress temasıyla, düğme eklemek için bir kısa kod varsa, kullanıcının muhtemelen kısa kod için aşağıdaki gibi yaklaşık beş parametreyi doldurması gerekecektir:

[url düğmesi = ”http://example.com” başlık = ”Daha fazlasını öğrenin” renk = ”mor” hedef = ”yeni pencere”]

Shortcake'in devreye girdiği yer burasıdır ve kısa kodlarınızı daha iyi yönetmenize olanak tanır.

kurabiye-fırın-eklentisi

ilk Adımlar

Bu eğitim, WordPress geliştirmede yeni olan kullanıcılar içindir. Temalarını özelleştirmek isteyen kullanıcılar da bu öğreticiyi ilginç bulacaklar.

İlk yapmanız gereken, uzantıyı yüklemek ve etkinleştirmektir. Shortcace (Kısa kod IU).

Şimdi birkaç parametreyi kabul eden bir kısa kodunuz olmalıdır. Bu eğitim için, kullanıcıların WordPress gönderilerine ve sayfalarına düğme eklemelerine izin veren basit bir kısa kod oluşturacağız. Bu, kısa kodumuz için basit bir örnektir ve bu kodu ekleyebilirsiniz. Eklentinizde veya çocuk temanızın functions.php dosyasında.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

add_shortcode ('cta-düğmesi', 'cta_button_shortcode'); function cta_button_shortcode ($ atts) {özüt (shortcode_atts (array ('title' => 'Title', 'url' => ''), $ atts)); dönüş ' '. $ başlık. ' '; }

Muhtemelen düğme için bazı CSS kodlarına da ihtiyacınız olacak.

.cta düğmeli {dolgu: 10px; yazı tipi boyutu: 18px; border: solid 1px #fff; Çerçeve-yarıçapı: 7px; Renk: #fff; Arka plan renkli: #50A7EC; }

Söz konusu düğmenin nasıl görüntüleneceği budur, kullanıcının aşağıdaki kısa kodu yazması gerekir:

[cta-button title = ”Şimdi İndirin” url = ”http://example.com”]

Artık parametreleri kabul eden bir kısa kodunuz var, şimdi bunun için bir arayüz oluşturacağız.

Nasıl ShortCacke ile SHORTCODE bir arabirim kayıt

Shortcake API, kullanıcı arayüzünde kısa kodları kaydetmenize olanak tanır. Kısa kodun hangi öznitelikleri kabul ettiğini, alanların türünü ve hangi yazı biçiminin kullanıcı arayüzünü (kullanıcı arayüzü) göstereceğini açıklamanız gerekir.

Shortcake kullanıcı arayüzünde bir kısa kodu kaydetmek için kullanabileceğiniz bir kod parçası örneği.

shortcode_ui_register_for_shortcode (/ ** Kısa kodunuz * / 'cta-button', / ** Kısa kodunuzun etiketi ve simgesi * / array (/ ** Etiket gereklidir. * / 'label' => 'Düğme Ekle', / ** Icone. Src veya dashicons- $ icon. * / 'ListItemImage' => 'dashicons-ampul', / ** Kısa Kod Nitelikleri * / 'attrs' => dizi (/ ** * Değerleri kabul edecek tüm alanlar kullanıcıların kendi dizileri aşağıdaki gibi tanımlanır. * Bu kısa kod, url ve başlık olmak üzere iki parametreyi kabul eder * Başlık için kullanıcı arayüzünü tanımlayacağız. * / dizi (/ ** Bu etiket kullanıcı arayüzünde görüntülenecektir. * / 'etiket' => 'Başlık', / ** bu, kısa kod için kullanılan özniteliktir * / 'attr' => 'başlık', / ** Alanın türünü tanımlayın, desteklenir: metin , onay kutusu, metin alanı, radyo, seç, e-posta, url, numara ve tarih. * / 'tür' => 'metin', / ** Açıklama ekle 'açıklama' => 'Açıklama',), / ** Biz şimdi * / array ('label' => 'URL', 'attr' => 'url', 'type' = bağlantı alanı için bir kullanıcı arayüzü tanımlayalım. > 'text', 'description' => 'Tam URL',),),), / ** Kullanıcı arayüzünün görüntüleneceği gönderi biçimi * / 'post_type' => array ('post', 'page' ),));

Kullanıcı arayüzünde kısa kodu görüntülemek için yapmanız gereken tek şey bu. Artık kısa kodu kullanabilmek için bir makaleyi düzenlemeye başlayabilirsiniz. Tek yapmanız gereken medya ekle düğmesine tıklamak. “ başlıklı yeni bir bölüm göreceksiniz.Eleman Yayınla takın". Üzerine tıklayarak, oluşturduğunuz farklı kısa kodları görebileceksiniz.

insertpostelement

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Simgeye tıklayarak, kısa kodu özelleştirmenize izin veren kullanıcı arayüzünü göreceksiniz.

shortcodeui

Birkaç alanları ile bir shortcode nasıl eklenir

İlk örnekte, oldukça basit bir kısa kod kullandık. Şimdi işleri biraz daha karmaşık ve daha kullanışlı hale getireceğiz. Kullanıcıların düğmenin rengini seçmelerini sağlayan bir kısa kod ekleyeceğiz.

Önce kısa kodu ekleyeceğiz. Esasen yukarıdakiyle aynı kod, tek istisna, renk için bir alan ekleyeceğimizdir.

add_shortcode ('düğmem', 'benim_button_shortcode'); function my_button_shortcode ($ atts) {extract (shortcode_atts (array ('color' => 'blue', 'title' => 'Title', 'url' => ''), $ atts)); dönüş ' '. $ başlık. ' '; }

Kısa kodumuz farklı renklerde düğmeler görüntülediğinden, CSS kodumuzu da güncellememiz gerekir.

.mybutton {dolgu: 10px; yazı tipi boyutu: 18px; border: solid 1px #fff; Çerçeve-yarıçapı: 7px; Renk: #fff; } .blue düğme {plan renkli: #50A7EC; } .orange düğme {plan renkli: #FF7B00; } .green düğme {plan renkli: #29B577; }

İşte bu düğme neye benzeyecek.

renkli-düğmeleri-shortcode

Artık kısa kodumuz hazır olduğuna göre, bir sonraki adım onu ​​Shortcake'e kaydetmektir. Aynı kodu kullanacağız, buradaki fark, bir renk alanını görüntülemek için ek bir parametre sağlayacağız.

shortcode_ui_register_for_shortcode (/ ** Kısa kod tutamacınız * / 'mybutton', / ** Kısa kod etiketiniz ve simgeniz * / array (/ ** Kısa kod kullanıcı arayüzünüz için etiket. Bu bölüm gereklidir. * / 'label' => 'Ekle renkli bir düğme ', / ** Simge veya kısa kod için bir resim eki. İsteğe bağlı. src veya dashicons- $ icon. * /' listItemImage '=>' dashicons-flag ', / ** Shortcode Attributes * /' attrs '=> array (/ ** * Kullanıcı girdisini kabul eden her özniteliğin, bu şekilde tanımlanmış kendi dizisi olacaktır * Kısa kodumuz iki parametre veya öznitelik kabul eder, başlık ve URL * Öncelikle başlık alanı için kullanıcı arayüzünü tanımlayalım. * / dizi (/ ** Bu etiket kullanıcı arayüzünde görünecektir * / 'etiket' => 'Başlık', / ** Bu, kısa kod için kullanılan kodda kullanılan gerçek özniteliktir * / 'attr' => 'başlık', / ** Giriş türünü tanımlayın. Desteklenen türler metin, onay kutusu, metin alanı, radyo, seç, e-posta, url, numara ve tarih. * / 'Tür' => 'metin', / ** Kullanıcılar için yararlı bir açıklama ekleyin * / 'açıklama' => ' Lütfen düğme metnini girin ',), / ** Şimdi * / array ('etiket' => 'URL', 'attr' => 'url', 'tür' => 'metin', 'açıklama' => 'Tam URL',) URL alanı için kullanıcı arayüzü tanımlayacaktır, / ** Son olarak Renk Seçimi için kullanıcı arayüzünü tanımlayacağız * / array ('label' => 'Color', 'attr' => 'color', / ** text * / 'type' yerine seçme alanını kullanacağız. => 'seç', 'seçenekler' => dizi ('mavi' => 'Mavi', 'turuncu' => 'Turuncu', 'yeşil' => 'Yeşil',),),), / ** Siz hangi gönderi türlerinin UI kısa kodunu göstereceğini seçebilir * / 'post_type' => array ('post', 'page'),));

Bu kadar ! Artık bir gönderiyi düzenlediğinizde veya yazdığınızda, yeni kısa kodu hala medya penceresinde aynı bölümde görebileceksiniz.

postelements

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Yeni kısa koda tıkladığınızda, kısa kod özelleştirme arayüzü görüntülenecek ve değerleri belirleyebilirsiniz.

colorui

Bu eğitim için bu kadar. Umarım WordPress'teki kısa kodlarınız için daha iyi bir arayüz oluşturmanıza yardımcı olur. Yeni yılınız kutlu olsun!

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
7 hisseleri
hisse7
cıvıltı
Enregistrer