WordPress Shortcode: Neden ve Nasıl Kendi Yapabilirsiniz?
WordPress kısa kodu, sitenizi ayarlamak için çok kullanışlıdır. Bir blok olmadan önce, insanlar karmaşık düzen öğelerine girerdi. Ancak, Gutenberg’de bile kısa kodlar hala var. Örneğin, kendi bloğunuzu yeteneklerinizin ötesinde yaparsanız (sizi suçlamıyorum), kısa bir kod geçerli bir alternatiftir. Ayrıca sadece WordPress becerilerinizi genişletmek istiyorsanız dalış yapmayı hak ediyorlar. Bu yazıda, WordPress kısa kodu hakkında bilmeniz gereken her şeyi öğreneceksiniz: kısa kod, artıları ve eksileri nedir, nasıl kullanılacağının yanı sıra kendi özel kısa kodunuzu nasıl oluşturacağınız.
Tartışacak çok şeyimiz var, o zaman başlayalım, tamam mı? WordPress kısa kodu – bu nedir? Peki, her şeyden önce, kısa kodlar hakkında konuşurken ne hakkında konuşuyoruz? Adından da anlaşılacağı gibi, kodu sayfaya girmek için kısayollardır. Örneğin, WordPress düzenleyicisine aşağıdakileri ekleyebilirsiniz: [Galeri IDS = “316,315,372”] Ancak, sayfayı gördüğünüzde, sonuçlar böyle (Sitenizde bu özel kimliğe sahip görüntüler varsa)::
Kısa kod konsept konsept Kısa Kısa Tarih Kısa Kodu çok yeni değil. Uzun zamandır forumda bulunuyorlar ve kullanıcıların tehlikeli olabilecek komut dosyalarını ve kod parçacıklarını yürütme yeteneği olmadan içeriklerini biçimlendirmelerine izin veriyorlar. WordPress, 2.5 sürümünde aynı nedenden ötürü bir kısa kod tanıttı. Hızla birçok temanın ve eklentinin temeli oldular. Örneğin, birçok ilk sayfa yapımı kullanıcıların arka planda kısa kodlar dışında herhangi bir şey çalıştırarak düzen yapmalarına izin verir. Bu, insanlar onlardan göç etmeye ve kapatıldıktan sonra sayfalarını artık parantezlerle dolu bulmaya çalıştıklarında kolayca görülebilir. Yukarıdaki örnekte gördüğünüz gibi WordPress kısa kod türleri, WordPress kısa kodları dirsek parantezleri tarafından kolayca tanınır. Genellikle şöyle görünürler: [someshortcode] Bununla birlikte, WordPress’in iki farklı türden kısa kod türü bildiğini belirtmek önemlidir: kendini kapama ve kapsama. Yukarıda görebileceğiniz ilk tür bağımsızdır ve bir kapanış etiketi eklemenizi gerektirmez. Tahmin edebileceğiniz gibi, bundan farklı, ekli kısa kod manuel olarak kapatmanızı gerektirir. Bu genellikle içeriğinizin kısmını belirli bir şekilde saran kısa bir koddur.
[someshortcode] … [/someshortCode] birçok kısa kodun görünümlerini veya diğer özelliklerini değiştiren öznitelikler alabileceğini belirtmek için de önemlidir. [Galeri ids = “316,315,372” sütunlar = “2” boyut = “orta”] Yukarıdaki kod, önceki galerimizin görünümünü buna değiştirir:
Kısa kodun artıları ve eksileri, neden kısa bir kod kullanıyorsunuz? Pek çok fayda sunuyorlar: Esnek – Kısa kod neredeyse her şeyi içerebilir ve sayfanıza her türlü öğeyi eklemenizi sağlar.
Yeniden kullanılabilir – bir eklenti olarak ayarlayabilir ve kısa kodunuzu birkaç WordPress sitesinde yeniden kullanabilirsiniz.
Değiştirilebilir – Aşağıda göreceğiniz gibi, kullanıcıların kontrol sahibi olması ve öznitelikleri ve içeriği değiştirebilmesi için bunu yapabilirsiniz.
Ancak, elbette, kısa kodların da en belirgin olan eksiklikleri vardır:
Belirsiz işlevsellik – sadece ona bakarak kısa kodların ne yaptığını bulamazsınız.
Çok sezgisel değil – çok sayıda kısa kod bulundurmak sayfada biraz dağınık görünebilir. Buna ek olarak, genellikle manuel olarak girmeniz gerekir ve diğer öğeler gibi kullanıcı arayüzünden seçemezsiniz.
Sitenizi yavaşlatabilirler – her kısa kod sunucunuza ek istekler ekler. Çok fazla girerseniz, yükleme sürenizi azaltabilirler.
WordPress Kısa Kod Varsayılan Platform WordPress, kutunun dışında çalışan ve bu yazının başında gördüğünüz bir dizi kısa kodla birlikte gelir.
Audio – Ses dosyalarını temel oynatma kontrolü ile web sitenize yerleştirmenizi sağlar.
Altyazı – Genellikle görüntü açıklaması eklemek için kullanılır, ancak aynı şeyi diğer içerik için de yapabilir.
Gömme – Gömülü öğeyi sarmanıza ve onlara maksimum boyutlar vermenizi sağlar.
Galeri – yukarıda belirtildi. Birkaç resmi galeri olarak gösterin ve görünümü yapılandırın.
Oynat Listesi – Ses veya video dosyalarında bir oynatma listesi oluşturun. Dark mod ile donatılmış. Video – sabitlenmiş ve çeşitli biçimlerden video dosyaları oynatın.
Ayrıca, eklentiler, temalar veya kendiniz yaparak sitenize daha fazla kısa kod ekleyebilirsiniz. Yakında bunun hakkında daha fazla bilgi.
Kısa Kod Kısayol Kodları Nasıl Kullanılır Kısa kod, WordPress sitenizdeki çeşitli yerlerde kullanılabilir. Nereye yerleştirmek istediğinize bağlı olarak, bunu yapmak için farklı bir yöntem kullanmanız gerekir. WordPress Editor’da en net örnek, içeriğinizdeki kısa kodu girmektir. Gutenberg’de bunun için özel bir bloğunuz var.
Sadece bloğu girin, kısa kodunuzu doldurun ve yapmaya hazırsınız. Klasik bir editör kullanıyorsanız, doğrudan kısa bir kod girebilirsiniz.
Bu durumda, bu öğreticide açıklandığı gibi kısa kodunuz için kendi Tinymce düğmenizi de oluşturabilirsiniz.
Yan çubukta, WordPress tarafında veya diğer widget alanında kısa bir kod kullanmak istiyorsanız, metin widget’ından yapabilirsiniz. Seçtiğiniz widget alanına ekleyin ve klasik editörde yaptığınız gibi metnin metnine doğrudan kısa bir kod yazın. Kaydettiğinizde, sitenizin ön ucunda görünecektir. PHP aracılığıyla. WordPress bunun için özel bir işlevle geliyor. Nasıl kullanılacağı aşağıda açıklanmıştır: Bunu, kısa kodları temyizde kodlamak için header.php, footer.php veya diğer tema dosyalarına veya şablonlarına girebilirsiniz. Dirsek braketleri eklediğinizden emin olun, aksi takdirde işe yaramaz! PHP dosyasına eklenmiş kısa bir kod kullanmak da mümkündür: Kendi WordPress kısa kodunuzu manuel olarak nasıl yapabilirsiniz, elbette, elle bir WordPress kısa kodu oluşturabilirsiniz. Bu nedenle, kısa kod yangınlarını tanımak mantıklıdır. Bu, WordPress’teki kısa kodla ilgili her şeyi işler. WordPress ile oluşturulan sayfa dekore edildiğinde ve kısa bir kod içerdiğinde temel bilgileri anlamak, kısa kod ateşi devralır ve dizeyi içerikle değiştirir.
Kısa bir kodun kaydedilmesi şu şekilde yapılır: add_shortcode (‘someshortcode’, ‘someshortcode_handler’); İşte bazı açıklamalar: SomeshortCode – Braketler arasında görünecek etiketler. Küçük harf, sayılar ve alt çizgilerden oluşmalıdır.
SomeshortCode_Handler – Kısa kod varsa gerçekleştirilecek işlev.
İşleyici işlevleri şu şekilde tanımlanır: işlev someshortcode_handler ($ atts, $ content, $ tag) {} $ atts – öznitelik dizisi. Tanımlamazsanız, varsayılan olarak boş bir dize olarak işlenir.
$ Content – $ içerik ekli (ekli kısa kod kullanırken). Yankılanmadan değeri geri yüklediğinizden emin olun.
$ Tag – Değer $ Tag Shortcode (SomeshortCode Yukarıdaki örnekte). Birden fazla kısa kod aynı dönüş çağrısı işlevini kullanıyorsa kullanışlıdır.
Kısa kod komut dosyalarının işlevini yerleştirmenin, eklentinin bir parçası olarak veya tema dosyasına function.php.Php’e yerleştirilebileceği durumlarda. Son durumda, Add_ShortCode () işlevini doğrudan gerçekleştirebilirsiniz, diğer tüm durumlarda bunu şöyle sarmalısınız: function code_init () {add_shortcode (‘someshortcode’, ‘someshortcode_handler’); } Add_action (‘init’, ‘Shortcode_init’); Bu, işlevin yalnızca WordPress yüklendikten sonra etkin olmasını sağlar. Pekala, teoriyle yeterince, gerçek hayatın bazı örneklerine bakalım. Örnek 1: Davet düğmesi, ilk örnek kendini kapatan kısa bir koddur. Bunun için, içeriğinize herhangi bir yere koyabileceğiniz ve kullanıcıları çevrimiçi mağazalara getirebileceğiniz bir düğme yapmak istiyoruz.
Bunun statik bir varlık olmasını istiyoruz, bu yüzden göründüğü gibi, bağlantının nerede olduğu ve içerik gibi zor bir kod yapacağız. Bu nedenle, aşağıdaki işlevleri Function.php’de kullanabiliriz. İşlevi Jortcode_init () {add_shortcode (‘ctabutton’, ‘ctabutton_handler’); } Add_action (‘init’, ‘Shortcode_init’); İşlev ctayutton_handler () {return ‘
alışverişe başlayın! } İlk kısım, daha önce açıklandığı gibi kısa bir kodu kaydetmek için sadece ambalaj işlevidir. İkinci kısım, konteynerdeki div öğesini yapar. İçeride, kendisine ve belirtilen ankraj metnine eklenen /mağazalarla sitenin URL’sine bir bağlantısı var. Tüm öğelerin de bunları düzenleyebilmek için CSS sınıfı vardır. Bu arada, ek olarak, aşağıdaki CSS kodunu stil sayfanıza yerleştirin. .Shop-cta-button {arka plan-color: #ff4a1c; Border-Radius: 4px; Box-Shadow: 0px 1px 3px 0px RGBA (37,45,74,1); Marj: 0 otomatik! Önemli; Dolgu: 0.67em 1em; Metin-align: merkez; Genişlik:%32.5; -Webkit-Box-Shadow: 0px 1px 3px 0px RGBA (37,45,74,1); -Moz-box-shadow: 0px 1px 3px 0px RGBA (37,45,74,1); } .shop-cta-button-link {color: #fff; Yazı tipi ailesi: “Segoe UI”, sans-serif; Yazı tipi-ağırlık: kalın; Metin dekorasyonu: yok;
} Her şeyden sonra, artık editöre kısa bir kod koyabilirsiniz. Bunu yaptığınızda, bu bölümün başlangıcından itibaren düğme görünecektir. Örnek 2: ayarlanabilen CTA, ancak hareket etme davetinin içeriğini, renk ve bağlantı nerede? Bunun için, yukarıdakileri ekli kısa bir kodda değiştireceğiz. Bu, bunun için değiştirilmiş işleyici işlevidir (add_shortcode () işlevi aynı kalır): ctabutton_handler işlevi ($ atts) {$ a = shortcode_atts (‘link’ => ‘#’, ‘color’ => ‘kırmızı’ , ‘Boyut’ => ‘küçük’, ‘etiket’ => ‘beni tıklayın’), $ atts); Dönüş ‘
<div class = "cta-button'. Esc_attr ($ a ['renk']). ''. Esc_attr ($ a ['boyut']). '. ESC_ATTR ($ A ['etiket']). ' ‘; } Temel olarak, burada yaptığımız şey, düğmeler (hedef bağlantılar, renkler, boyutlar ve düğme etiketleri) ve varsayılan olarak sahip olabilecek belirli öznitelikleri belirlemektir. Ardından, çıktı kodunu bu öznitelikler sayfada hesaplanacak şekilde değiştiririz. Bu şekilde, değerini kısa bir kodda belirleyerek değiştirebilirsiniz. Makyaj yapmak? Bununla birlikte, bu çalışacak şekilde, stilde izin vermek istediğimiz özellikler için tasarım değişikliklerini de tanımlamalıyız. .CTA-BUTTON {Border-Radius: 4px; Box-Shadow: 0px 1px 3px 0px RGBA (37,45,74,1); Marj: 0 otomatik! Önemli; Metin-align: merkez;
-Webkit-Box-Shadow: 0px 1px 3px 0px RGBA (37,45,74,1); -Moz-box-shadow: 0px 1px 3px 0px RGBA (37,45,74,1); } .cta-button.red {arka plan-color: #ff4a1c; } .cta-button.green {arka plan-color: #5FB49C; } .cta-button.blue {arka plan-color: #3F88C5; } .cta-button.mall {dolgu: 0.27em 0.6em; Genişlik:%28; } .cta-button.medium {dolgu: 0.67em 1em; Genişlik:%32.5; } .cta-button.big {dolgu: 1.1em 1.8em; Genişlik:%38.5; }. Cta-Button-Link {color: #fff; Yazı tipi ailesi: “Segoe UI”, sans-serif; Yazı tipi-ağırlık: kalın; Metin dekorasyonu: yok; } Yukarıdakilerle, içeriğinize aşağıdakiler gibi özel CTA ekleyebilirsiniz: ve bu sayfadaki sonuçtur:
Kısacası, WordPress kısa kodu WordPress kısa kodu, savaş tabutunda sahip olmak için yararlı bir araçtır. Küçük bir stand aracılığıyla sayfanıza karmaşık düzen öğeleri ve kod görüntüleri girmenize izin verir. Yukarıda, ne olduğunu, nasıl çalıştığını, artılarını ve eksilerini, sitenizde nasıl kullanılacağını ve kendiniz nasıl yapılacağını öğrendik. Tabii ki, kendiniz yapmak istemiyorsanız, kullanabileceğiniz geniş bir kısa kod koleksiyonunuz da var. Uzun vadede, blok kısa kodla yapılanları ele geçirecek olsa da, şimdilik, depounuzda hala iyi bir şey. WordPress kısa kodları için en sevdiğiniz kullanımlar nelerdir? Yukarıda eklemek isteyen var mı? Aşağıdaki yorum bölümünde bize bildirin!
