Kısayollarla WordPress’e kısa kod kullanıcı arayüzü nasıl eklenir

Müşteriler için bir WordPress sitesi geliştirirseniz, müşterinizin kullanımı için kısa bir kodunuz olacaktır. Sorun şu ki, yeni başlayanlar kısa kodların nasıl ekleneceğini bilmiyor ve karmaşık parametreler varsa, o zaman daha da zor. Shortcake, kısa kod için kullanıcı arayüzü ekleyerek bir çözüm sağlar. Bu makalede, WordPress’teki kısa kodlar için bir kısayol ile nasıl bir kullanıcı arayüzü ekleyeceğinizi göstereceğiz. Kısayol nedir? WordPress, kısa kodlar kullanarak yayınlarda ve sayfalarda yürütülebilen kodlar eklemenin daha kolay bir yolunu sunar. Birçok WordPress teması ve eklentisi, kullanıcıların kısa kodlar kullanarak ek işlevler eklemelerine olanak tanır. Ancak, kullanıcının ayarlama parametresini girmesi gerektiğinde bazen bu kısa kod karmaşık olabilir.
Örneğin, düğmeye girmek için kısa bir kod varsa, tipik bir WordPress temasında, kullanıcının en az iki ila beş parametre eklemesi gerekebilir. Bunun gibi: [adı url = “http://example.com” title = “Şimdi indir” color = “purple” hedef = “newwindow”] kurban bir WordPress eklentisi ve önerilen gelecekteki WordPress özelliğidir. Bu değerleri girmesi için kullanıcı arayüzü sağlayarak bu sorunu çözmeyi amaçlamaktadır. Bu, kısa kodların kullanımını kolaylaştıracaktır.

Bu öğreticiye başlamak, WordPress’in geliştirilmesinde yeni olan kullanıcılar için tasarlanmıştır. Yeni başlayanlar -WordPress temasını değiştirmek isteyen seviyelerde kullanıcılar da bu yararlı öğreticiyi bulacaklar.
Bu nedenle başlayalım. Yapmanız gereken ilk şey, Shortcake eklentisini (UI kısa kodu) yüklemek ve etkinleştirmektir. Artık birkaç kullanıcı giriş parametresi alan kısa bir koda ihtiyacınız var. Biraz tazelemeye ihtiyacınız varsa, WordPress’e kısa bir kod nasıl ekleneceğiniz. Bu öğretici uğruna, kullanıcıların düğmeyi WordPress yayınlarına veya sayfalarına girmesine izin veren basit bir kısa kod kullanacağız. Kısa kodumuz için kodun bir örneği ve bunu temanızın dosya işlevine veya özel siteye ekleyerek kullanabilirsiniz.
CTA_BUTTON_SHORTCODE işlevi ($ atts) {
Extract (Shortcode_atts (
dizi (
‘başlık’ => ‘başlık’,
‘Url’ => ”
),
$ Atts
));
Return ‘ . $ başlık. ‘ ‘;
}
Ayrıca düğmenizi düzenlemek için bazı CSS eklemeniz gerekir. Bu CSS’yi tema stili sayfanızda kullanabilirsiniz.
.CTA-BUTTON {
Dolgu: 10 piksel;
yazı tipi boyutu: 18px;
Sınır: 1 piksel katı #fff;
Border-Radius: 7px;
Renk: #fff;
Arka plan-rengi: #50a7ec;
}
Kullanıcı, yayınlarında ve sayfalarındaki kısa kodu bu şekilde kullanır:
[Cta-button title = “Şimdi indir” url = “http://example.com” Şimdi bir parametre alan kısa bir kodumuz var, bunun için bir kullanıcı arayüzü yapalım. Kısa Kod Kullanıcı Arabiriminizi API Kısayolu Kısa Kısa Kısa Kod Kullanıcı Arabiriminizi Kaydetmenize olanak tanır. Kısa kodunuza, giriş türüne ve hangi yazı türüne kısa bir kod kullanıcı arayüzü görüntüleyeceğini açıklamanız gerekir. Kısa kod kullanıcı arayüzümüzü kaydetmek için kullanacağımız kod snippet’inin bir örneği. Her adımı bir dizi yorumla açıklamaya çalıştık. Temanızın dosya işlevine veya özel eklenti sitesine ekleyebilirsiniz.
/** Kısa kodu tutamağınız*/
‘CTA-Button’,
/** Kısa kod etiketiniz ve simgeniz*/
dizi (
/** Kısa kod kullanıcı arayüzünüz için etiket. Bu bölüm gereklidir. */
‘Etiket’ => ‘ekle düğmesi’,
/** Kısa kod için bir görüntü veya görüntü eki. İsteğe bağlı. SRC veya Dashicons- $ simgesi. */
‘ListItemImage’ => ‘Dashicons-Lightbulb’,
/** Kısa kod özellikleri*/
‘Attrs’ => dizi (
/**
* Kullanıcı girişini kabul eden her özniteliğin bu şekilde tanımlanması olacaktır.
* Kısa kodumuz iki parametre veya öznitelik kabul eder, başlık ve URL
* Önce 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ısay kodu için kullanılan kodda kullanılan gerçek attr*/
‘Attr’ => ‘başlık’,
/** Giriş türünü tanımlayın. Desteklenen türler metin, onay kutusu, textAea, radyo, seçme, e -posta, url, numara ve tarihtir. */
‘Type’ => ‘metin’,
/** Kullanıcılar için yararlı bir açıklama ekleyin
‘Açıklama’ => ‘Lütfen düğme metnini gir’,),)
/** Şimdi UI Alanı için kullanıcı arayüzü tanımlayacağız*/
dizi (
‘etiket’ => ‘url’,
‘Attr’ => ‘url’,
‘Type’ => ‘metin’,
‘Açıklama’ => ‘tam url’,
),
),
),
/** Hangi gönderi türlerinin Kısay Kodunu Göstereceğini seçebilirsiniz*/
‘post_type’ => dizi (‘yazı’, ‘sayfa’),
)
);
Hepsi bu, artık yayınları düzenleyerek kısa kod kullanıcı arayüzünü eylemde görebilirsiniz. Editör yayınının üzerindeki Medya Ekle düğmesini tıklamanız yeterlidir. Bu, sol sütunda yeni ‘Post öğesi ekleme’ öğesini göreceğiniz yükleyici ortamını getirecektir. Kodunuzu girmek için düğmeyi görüntüler.
Ampul ve kısa kek etiket simgeni içeren mini bir görüntüyü tıklamak kısa bir kod kullanıcı arayüzü görüntülenir.
İlk örneğe çok sayıda girişli kısa kod ekleyin, çok temel bir kısa kod kullanıyoruz. Şimdi biraz daha karmaşık ve çok daha kullanışlı hale getirelim. Kullanıcıların düğmenin rengini seçmelerine izin veren kısa bir kod ekleyelim. Önce kısa bir kod ekleyeceğiz. Bu, neredeyse aynı olan kısa bir koddur, ancak şimdi renk için kullanıcı girişi hariç.
add_shortcode (‘mybutton’, ‘my_button_shortcode’);

İşlev my_button_shortcode ($ atts) {

Extract (Shortcode_atts (
dizi (
‘Renk’ => ‘mavi’,
‘başlık’ => ‘başlık’,
‘Url’ => ”
),
$ Atts
));
Dönüş ‘ . $ başlık. ‘ ‘;
}
Kısa kodumuz farklı renklerde düğmeleri görüntüleyeceğinden, CSS’imizi de güncellememiz gerekiyor. Bu CSS’yi tema stili sayfanızda kullanabilirsiniz .. MyButton {
Dolgu: 10 piksel;
yazı tipi boyutu: 18px;
Sınır: 1 piksel katı #fff;
Border-Radius: 7px;
Renk: #fff;
}
.Blue-Button {
Arka plan-rengi: #50a7ec;
}
.orange-Button {
Arka plan-rengi:#ff7b00;
}
.yeşil buton {
Arka Plan rengi:#29B577;
}
Düğme böyle görünecek:
Şimdi kısa kodumuz hazır, bir sonraki adım UI kısa kodunu kaydetmektir. Temel olarak aynı kodu kullanacağız, ancak bu sefer renkler için başka parametrelerimiz var ve kullanıcılara mavi, turuncu veya yeşil düğmeler arasından seçim yapmalarını sunuyoruz.
Jortcode_UI_REGISTER_FOR_SHORTCODE (
/** Kısa kodu tutamağınız*/
‘Mybutton’,

/** Kısa kod etiketiniz ve simgeniz*/
dizi (
/** Kısa kod kullanıcı arayüzünüz için etiket. Bu bölüm gereklidir. */
‘Etiket’ => ‘renkli bir düğme ekle’,
/** Kısa kod için bir görüntü veya görüntü eki. İsteğe bağlı. SRC veya Dashicons- $ simgesi. */
‘ListItemImage’ => ‘Dashicons-Fag’,
/** Kısa kod özellikleri*/
‘Attrs’ => dizi (
/**
* Kullanıcı girişini kabul eden her özniteliğin bu şekilde tanımlanması olacaktır.
* Kısa kodumuz iki parametre veya öznitelik kabul eder, başlık ve URL
* Önce 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ısay kodu için kullanılan kodda kullanılan gerçek attr*/
‘Attr’ => ‘başlık’,
/** Giriş türünü tanımlayın. Desteklenen türler metin, onay kutusu, textAea, radyo, seçme, e -posta, url, numara ve tarihtir. */
‘Type’ => ‘metin’,
/** Kullanıcılar için yararlı bir açıklama ekleyin*/’açıklama’ => ‘Lütfen düğme metnini gir’,,
),
/** Şimdi UI Alanı için kullanıcı arayüzü tanımlayacağız*/
dizi (
‘etiket’ => ‘url’,
‘Attr’ => ‘url’,
‘Type’ => ‘metin’,
‘Açıklama’ => ‘tam url’,
),
/** Sonunda Renk Seçimi için kullanıcı arayüzünü tanımlayacağız*/
dizi (
‘Etiket’ => ‘renk’,
‘Attr’ => ‘renk’,
/** Metin metinini seçme alanını kullanacağız*/
‘Type’ => ‘seç’,
‘Seçenekler’ => dizi (
‘Mavi’ => ‘mavi’,
‘Turuncu’ => ‘turuncu’,
‘Yeşil’ => ‘yeşil’,
),
),
),
/** Hangi gönderi türlerinin Kısay Kodunu Göstereceğini seçebilirsiniz*/
‘post_type’ => dizi (‘yazı’, ‘sayfa’),
)
);
Hepsi bu, artık yayınları veya sayfaları düzenleyebilir ve medya düğmesini tıklayabilirsiniz. ‘Post Elemanı’ altına yeni eklenmiş yeni bir kod göreceksiniz.
Az önce yaptığınız kısa kodu tıklamak, değeri girdiğiniz kısa kod kullanıcı arayüzünü getirecektir.
Bu öğreticide kullanılan kodu bir eklenti olarak indirebilirsiniz. WPB-Shortcake-Tutorials CSS ekledik, böylece daha kolay bir kullanıcı arayüzü kullanarak WordPress’te kendinize göre hareket etmek için davet düğmesini öğrenmek veya kullanmak için kullanabilirsiniz. Kaynağı değiştirmek ve onunla oynamaktan çekinmeyin. Bu makalenin WordPress’te kısa kutularla kısa kodlar için bir kullanıcı arayüzü ekleyeceğinizi öğrenmenize yardımcı olur. WordPress’te bir kısa kod kullanmak için bu 7 önemli ipucunu da görmek isteyebilirsiniz.