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.

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 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.

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 oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

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' ),));

Ürünlerinizi internet üzerinden mi satmak istiyorsunuz?

Fiziksel ve dijital ürünlerinizi WordPress'te satmak ve çevrimiçi mağazanızı kolayca oluşturmak için en iyi e-ticaret eklentileri olan WooCommerce'i ücretsiz indirin. Yeni başlayanlar için mükemmel.

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.

insertpostelement

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

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!

7 hisseleri
hisse7
cıvıltı
Enregistrer