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 makalelere ve sayfalara yürütülebilir kod eklemenizi sağlayan bir özellik sunar. Birçok temalar et WordPress eklentileri kullanıcıların kısa kodlar kullanarak bloglarına işlevsellik eklemelerine izin verir. Ancak, bu kısa kodlar çok hantal 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 button = "http://example.com" title = "Daha fazla bilgi edinin" color = "purple" target = "newwindow"]
Shortcake'in devreye girdiği yer burasıdır ve kısa kodlarınızı daha iyi yönetmenize olanak tanır.
ilk Adımlar
Bu eğitim, WordPress geliştirmede yeni olan kullanıcılar içindir. Kişiselleştirmeyi seven kullanıcılar temalar bu öğreticiyi de ilginç bulacaktır.
İ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.
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'nin API'si, kullanıcı arayüzünde kısa kodlar kaydetmenize olanak tanır. Gerekyazmak kısa kodun hangi nitelikleri kabul ettiği, alanların türü ve hangi yazı biçiminin kullanıcı arayüzünü (kullanıcı arayüzü) görüntüleyeceği.
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. Kısa kodu kullanabilmek için artık 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.
Simgeye tıklayarak, kısa kodu özelleştirmenize izin veren kullanıcı arayüzünü göreceksiniz.
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.
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.
Yeni kısa koda tıkladığınızda, kısa kod özelleştirme arayüzü görüntülenecek ve değerleri belirleyebilirsiniz.
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!
