WordPress Kısa Kodları Hakkında Her Şey

Daha önce bir WordPress temasıyla çalıştıysanız, muhtemelen bir WordPress kısa koduyla karşılaşmışsınızdır… biraz şuna benzeyen bir şey:

 [button type="twitter"]

Kısa kodun ne olduğunu ve nasıl çalıştıklarını anlayıp anlamadığınız başka bir konudur! Tema yazarları kısa kodları yoğun bir şekilde kullanır, ancak bazen kullanıcıların ne olduklarını ve nasıl çalıştıklarını bildiklerini 'varsayın', aslında bunlar oldukça kafa karıştırıcı olabilir!

İyi haber şu ki, kısa kodların hem anlaşılması hem de kullanımı kolaydır. Bu makalede, kendi kısa kodunuzu nasıl oluşturabileceğinize bakmadan önce, bunlardan en iyi şekilde nasıl yararlanabileceğinizi öğrenmek için kısa kodlara göz atacağız!

Hadi içeri atlayalım!

WordPress Kısa Kodları nedir?

WordPress, kısa kodları WordPress'in v2.5'ini (2008'deydi) yayınladıklarında tanıttı ve o zamandan beri çoğu tema ve eklentide yaygın olarak kullanıldı.

Peki, kısa kodlar tam olarak nedir? Kısacası (üzgünüm, dayanamadım), kısa kodlar, bir özellik veya işlev eklemek için web sitenizin hemen hemen her yerinde kullanılabilen bir kod parçasıdır. Bu nedenle, HTML kullanarak bir sosyal medya simgesini zahmetli bir şekilde kodlamak yerine, bunun yerine WordPress'e belirli bir kısa kodu eklediğiniz her yere bir sosyal medya simgesi eklemesini 'söyleyen' bir kısa kod ekleyebilirsiniz. (Bu örnekte) sosyal medya simgesinin stili ve işlevi, tema geliştiricisi tarafından önceden tanımlanmıştır, bu nedenle programlama perspektifinden tüm ağır işler sizin için yapılmıştır.

Bu nedenle, belki bir blog gönderisinin altına bir Facebook simgesi koymak istersiniz. Bunu manuel olarak eklemek, bir köprü eklemek, simgenin boyutunu güncellemek vb. yerine, tüm yapmanız gereken, tema yazarı tarafından 'önceden programlanmış' ve şöyle görünebilecek bir kısa kod koymaktır:

 social icon="facebook"]

Bu noktada, kendi tasarladığınız kısa kodları ekleyemeyeceğinizi ve bunların çalışmasını bekleyemeyeceğinizi tekrarlamak önemlidir. Temanıza bir seçenek olarak eklenmiş olmaları gerekir. Tipik olarak, temalar önceden oluşturulmuş birçok kısa kodla birlikte gelir ve tema talimatları, aralarından seçim yapabileceğiniz mevcut kısa kodların bir listesini içerir.

Kısa kodlar, geliştirici olmayanlar için kod yazmadan birçok içerik türünü görüntülemek için harika bir kısayol ve geliştiriciler için de zaman kazandırabilecek bir araçtır.

WordPress Kısa Kodlarıyla Neler Yapabilirsiniz?

Kısa kodlar, harekete geçirici mesaj (CTA) düğmesi, dinamik reklam kutusu, iletişim formu, resim galerileri, kaydırıcılar ve çok daha fazlasından geniş bir içerik yelpazesi eklemek için kullanılır… ancak yukarıda belirtildiği gibi, kısa kod seçenekleri nelerdir? Kullanabileceğiniz tema ve eklentilere bağlı olacaktır.

İletişim Formu 7 Eklentisini Kullanan Bir Kısa Kod Örneği

Kısa kodları kullanan sadece temalar değildir. Bugün mevcut olan en popüler İletişim Formu eklentilerinden biri olan Contact Form 7, kullanıcıların bir iletişim formunu kendi seçtikleri bir konuma hızlı ve kolay bir şekilde yerleştirmelerini sağlamak için kısa kodlar kullanır.

Bunu yapmak için, İletişim Formu 7'yi yükledikten sonra, bir sayfaya form eklemek veya web sitenizde yayın yapmak için yapmanız gereken tek şey aşağıdaki gibidir.

Adım bir:

Menü İletişim > İletişim Formları'na gidin ve yeni bir form oluşturun veya eklentiyle birlikte gelen mevcut formu kullanın.

Forma karşılık gelen [contact-form-7 title="Contact form 1"] kısa kodunu kopyalayın.

İkinci adım:

Kısa kodu, formun aşağıda gösterildiği gibi görünmesini istediğiniz yere yapıştırın:

Sayfayı kaydedin ve ardından şunu görmelisiniz:

Ve bu kadar! Web sitenize bir iletişim formu yerleştirmek için bir kısa kodu başarıyla kullandınız. Gördüğünüz gibi, kısa kodların kullanımı inanılmaz derecede kolaydır ve aksi takdirde karmaşık ve zaman alıcı olabilecek görevleri hızlandırabilir.

Varsayılan WordPress Kısa Kodlarını Kullanma

Muhtemelen kullanacağınız çoğu kısa kod, bir tema veya eklenti yüklemenin bir sonucu olarak tanıtılacaktır. Ancak WordPress'in kendisinde kullanabileceğiniz bir avuç 'varsayılan' kısa kod vardır. Bunlar şunları içerir:

• Ses
• Altyazı
• Göm
• Galeri
• çalma listesi
• Video

Bu kısa kodlar, örneğin bir müzik çalar gibi bir dizi içerik eklemek için sitenizin tamamında kullanılabilir. Aşağıdaki resimde bunun bir Altbilgi widget'ında kullanıldığını gösteriyoruz.

Bu kısa kodların nasıl kullanılacağını daha ayrıntılı olarak öğrenmek için bunlarla ilgili WordPress destek makalesine bakın.

Peki, WordPress veya kullandığınız tema/eklenti belirli amacınız için ihtiyacınız olan kısa kodu sağlamadığında ne yaparsınız? Kolay… kendinizinkini yaratın!

Kendi WordPress Kısa Kodunuzu Oluşturun

WordPress, kendi kısa kodlarınızı nispeten kolay bir şekilde geliştirmek için kullanılabilecek bir Kısa Kod API'sine sahiptir. Şimdi kendi kısa kodunuzu oluşturmak için atmanız gereken temel adımları gözden geçirelim.

Adım bir:

Bu örnekte, okuyucunun bir İletişim Formuna yönlendirilmek üzere tıklayabileceği bir CTA (Harekete Geçirici Mesaj) düğmesi oluşturacağız.

İşleri düzenli tutmaya yardımcı olmak için tüm kısa kodlarınızı ayrı bir dosyada tutmanızı öneririz (mevcut bir dosyaya kod eklemek yerine). Bunu yapmak için, temanızın functions.php dosyasıyla aynı klasör altında yeni bir boş dosya oluşturun ve buna my-shortcodes.php gibi bir ad verin. Bundan sonra bu dosyayı functions.php dosyanıza şu şekilde ekleyin:

 include('my-shortcodes.php');

Az önce söylediğimiz gibi, kısa kodlarınızı ayrı bir dosyada oluşturmanızı tavsiye ederken, bu makalenin amaçları doğrultusunda hemen devam edeceğiz ve örneği korumaya yardımcı olmak için yeni kodumuzu doğrudan functions.php dosyamıza ekleyeceğiz. olabildiğince açık.

wp-includes/shortcodes.php dosyasında tanıtılan add_shortcode işlevini kullanacağız. Bu işlevin iki parametreye ihtiyacı vardır, kısa kod etiketi ve geri arama işlevi.

 add_shortcode( string $tag, callable $callback )

İkinci adım:

functions.php dosyanıza koyabileceğiniz kod parçası:

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

Etiket ve işlev adlarının yalnızca küçük harf ve alt çizgi içerdiğini unutmayın.

Kullanıcıyı yönlendirmek istediğiniz iletişim formunun URL'sini 'THE_CONTACT_FORM_URL' ile değiştirmeyi unutmayınız.

Ayrıca, düğmenin görsel olarak daha çekici görünmesini sağlamak için isteğe bağlı olarak bu CSS kodunu style.css dosyanızda kullanabilirsiniz:

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

Adım üç:

Kısa kodunuzu web sitesi içeriğinde görüntülemek, diğer herhangi bir kısa kod için yaptığınız gibi yapılır. Bu örnekte [my_cta_button] olacaktır. Bunu bir Gönderiye veya Sayfaya ekleyin ve sayfayı görüntülediğinizde şöyle bir şey görmelisiniz:

Bu örnek, sağladığımız PHP kodunda önceden tanımlanmış içeriği verir. Yönetici kullanıcının gerekirse kısa kod çıktısını özelleştirmesine nasıl izin verebileceğinizi görelim.

Kullanıcı Özelliklerini Kabul Eden Bir Kısa Kod

Kullanıcı tarafından düzenlenebilir öznitelikleri olan bir kısa kod oluşturmak için, kullanıcının geri arama işlevinizde değiştirmesine izin vermek istediğiniz özniteliklerin bir dizisini tanımlamanız gerekir. Örneğin, varsayılan başlığı ve düğmenin url'sini değiştirebilmeyi isteyebilirsiniz.

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

Yukarıdaki kodda, kullanıcı tanımlı öznitelikleri bilinen özniteliklerle birleştirmek için shortcode_atts işlevini kullandık. Bu şekilde, ihtiyaç duyacağınız her CTA düğmesi için farklı bir kısa kod işlevi oluşturmanız gerekir, ancak yalnızca, kullanıcının her seferinde belirttiği herhangi bir yere yönlendiren bir işlev.

Bu kodun kullanımı şu şekilde belirtilmelidir: [my_cta_button title='My Custom Title' url='MY_URL']

Bir Şablon Dosyasına Kısa Kod Ekleme

Geliştiricilerin bakış açısından, kısa kodu ilgili şablon dosyasında çağırarak web sitenizde önceden tanımlanmış bir konuma zorla dahil etmenin hızlı bir yolu da vardır. Örneğin, CTA düğmesinin her bir Gönderi veya Sayfanın alt bölümünde görüntülenmesini istiyorsak, tekil şablonu düzenleyebilir ve do_shortcode işlevini kullanabiliriz. Twenty Twenty temasında singular.php dosyasını düzenledik ve bu satırı ana div kabının kapanışının altına ekledik:

 <?php echo do_shortcode('[my_cta_button]'); ?>

Sonuç, gönderi içeriğinin altında ve alt bilgi widget'larından önce görüntülenecektir.

Çözüm

Bu makaleyi tamamlamadan önce, temanız veya bir eklenti tarafından sağlanan kısa kodları kullanırsanız ve daha sonra bu temayı/eklentiyi devre dışı bırakırsanız, bu kısa kodların çalışmayı durduracağını unutmayın (sadece kısa kod braketinde gösterilir) web sitenizin ön ucu).

Bu küçük bir uyarı ile, bir web sitesi oluşturmaya gelince kısa kodlar gerçekten yararlı bir özelliktir. WordPress'te yaygın olarak kullanılırlar ve henüz bunları kullanmayı benimsemediyseniz, o zaman belki de şimdi kısa kodlara başka bir görünüm vermenin zamanı gelmiştir!