WordPress Kısa Kodlarını Anlamak

WordPress'i herhangi bir süredir kullanıyorsanız, muhtemelen zaten bazı kısa kodlar kullanmışsınızdır.

Kısa kodlar, içeriğinize başka türlü mümkün olmayacak bir tür özel işlevsellik eklemenize izin veren kullanışlı küçük parçacıklardır. Örnek olarak: çok sayıda resim galerisi ve kaydırıcı eklentisi size, uygun resimlerin orada görünmesini sağlamak için içeriğinize istediğiniz herhangi bir yere kolayca ekleyebileceğiniz bir kısa kod verir. Kısa kodlar genellikle şuna benzer:

[example shortcode]

Başka bir deyişle: kısa kodlar, metninizde yerleştirildikleri her yerde özel bir şeyin olmasına neden olur.
Ancak önceden tanımlanmış kısa kodlarla sınırlı değilsiniz; ne istersen yapmak için özel kısa kodlar tanımlayabilirsin! Basit, karmaşık veya aradaki herhangi bir şey olabilirler.

Bu dizide, basit bir kısa kodla başlayacağız ve daha karmaşık (ve hatta daha kullanışlı!) örneklere doğru yol alacağız.

Not: Burada, özellikle temanızın functions.php dosyasında ağırlıklı olarak PHP ile çalışacağız. Bir alt tema (veya güncellemelerin değişikliklerinizin üzerine yazılmasından korkmadan düzenleyebileceğiniz özel/başlangıç ​​teması) kullanmıyorsanız, başlamadan önce bir alt tema oluşturmak isteyeceksiniz.

Ayrıca not: Bu yazıyı okumak için herhangi bir PHP bilgisine ihtiyacınız yok, ancak en azından temel bilgileri bilmek yardımcı olacaktır. Buradaki kod oldukça basittir ve kopyalamayı ve özelleştirmeyi mümkün olduğunca kolaylaştırmaya çalıştık. İlerlerken kodun her bir parçasını açıklayacağız, ancak WordPress teması PHP'de tamamen yeniyseniz, functions.php dosyanızdaki bir parça hatalı kodun siteyi bozabileceğini unutmayın.

Kullanışlı Basit Bir Kısa Kod Örneği

Diyelim ki bir yazıya özel bir yazar bilgisi bölümü ekleyen bir kısa kod istiyoruz, bunun gibi:

WordPress görsel düzenleyicisinde kutu, resim ve metin oluşturmak ve biçimlendirmek yerine, tüm bunları basit bir pasajla çıkarmak için bir kısa kod oluşturacağız!

(Yan not: WordPress'in yazar profilleriyle çalışmanın daha iyi yolları vardır, ancak bu örneğe bağlı kalıyoruz çünkü bir sayfaya belirli içerik bloklarını koymak için kısa kodları kullanmanın ne kadar kolay olduğunu güzel bir şekilde gösteriyor.)

1. Adım: Temanızın functions.php Dosyasına Kısa Kodu Ekleyin

Kısa kodunuza bir ad vermek için add_shortcode işlevini kullanacaksınız ve kısa kod kullanıldığında WordPress'e ne yapması gerektiğini söyleyeceksiniz. Bu satırı temanızın functions.php dosyasına ekleyin:

 [php]add_shortcode( 'author_bio', 'create_author_bio' );[/php]

functions.php içinde nerede olduğu gerçekten önemli değil, ancak çakışmaları önlemek için onu en sona koymanızı öneririz. (Dosya kapanış ?> etiketiyle bitiyorsa, bundan sonra değil, hemen önce gelmelidir.)

Daha ileri gitmeden önce, hadi bu çizgiyi biraz açalım, böylece burada gerçekte neler olup bittiğini anlayabiliriz. Parantez içindeki iki metin parçası veya "argümanlar" gerçekten özel değil; onlar sadece isimler. Her birinin ne anlama geldiğini inceleyelim:

1. İlk argüman: bu durumda, author_bio – WordPress'e kısa kodunuzun gerçek adını söyler. Bu, kullanıcıların kısa kodu kullanmak için parantez içinde yazabilecekleri metin olacaktır. Yani yazıldığı gibi bu kodla [author_bio] , yazar biyografi kutumuzu tetikleyecek kısa kodumuz olacaktır.
   Bu metin herhangi bir şey olabilir, ancak benzersiz olmaya çalışmak her zaman en iyisidir. Bu şekilde, kısa kod adınızın yüklü başka bir eklenti veya temadan başka birininkiyle çakışma riskini üstlenmezsiniz.
2. İkinci argüman: bu durumda, create_author_bio – WordPress'i bu kısa kod her kullanıldığında yürütmesi gereken gerçek PHP işlevine yönlendirir. Bir sonraki adımda o fonksiyonu oluşturacağız; şimdilik, WordPress'in adının ne olacağını bilmesine izin veriyoruz. (Çatışmaları önlemek için bu ad da benzersiz olmalıdır.)

Eğer yardımcı olacaksa, kodu şöyle düşünebilirsiniz:

 [php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );[/php]

Daha ayrıntılı ayrıntılarla ilgileniyorsanız, add_shortcode Codex girişine göz atın.

2. Adım: Kısa Kodu İşleyecek İşlevi Oluşturun

Şimdi az önce adlandırdığımız işlevi gerçekten yapmamız gerekiyor!

Son adımda WordPress'e fonksiyonumuzun adının create_author_bio olduğunu söylediğimiz için, yeni fonksiyonu ekledikten sonra kodumuz şu şekilde görünmelidir:

 [php]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ //Code goes here! }[/php]

Bu işlevin aslında henüz bir şey yapmadığını fark edebilirsiniz; içindeki tek şey bir yorum. Bir sonraki adımda bununla ilgileneceğiz. Şimdilik burada gerçekten sadece iki parça olduğunu belirtmek istiyoruz: kısa kodun kaydı ve her kullanıldığında gerçekleşen işlev. WordPress PHP korkutucu görünebilir, ancak gerçekten bu kadar basit!

Yan not: create_author_bio işlevinin add_shortcode işlevinden sonra mı yoksa ondan önce mi geldiği önemli değil. Bu durumda sıra önemli değil.

3. Adım: İşlevin Bir Şey Yapmasını Sağlayın

Şimdi geriye kalan tek şey fonksiyonumuzun istediğimizi yapmasını sağlamak!

Bunun gibi bir işlev her şeyi yapabilir, ancak ne olursa olsun, sonunda tek bir değer (metin dizisi veya sayı gibi) döndürmelidir . Bu değer herhangi bir uzunluk veya karmaşıklık olabilir, ancak işlevin döndürdüğü şey, kısa kodumuzun kullanıldığı her yerde görünecek olandır.

Amaçlarımız açısından, bu sadece basit bir HTML olacaktır. İşte yazar resmimizi ve biyografisini özel bir sınıfla bir <aside> öğesinin içine eklemek için işaretleme (ancak bunu henüz herhangi bir yere koymayın; şu an için sadece önizleme olarak bakıyoruz):

 [html]<aside class="author-bio-box"></span> <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"> <p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p> <p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p> </aside>[/html]

Sonunda, biyografiyi CSS ile biçimlendirmek için ilk satırdaki yazar-biyo-kutusu sınıfını kullanacağız. (Birden fazla yazar tarafından yazılan içerik için birden fazla yazar kısa kodu eklemek istemeniz durumunda, kimlik yerine bir sınıf kullanacağız.) Ancak unutmayın, bu sayfaya koymak istediğimiz herhangi bir şey olabilir!

Şimdi tek yapmamız gereken, kısa kodumuzun işlevinin yukarıdaki HTML'yi döndürmesini sağlamak!

functions.php dosyası sadece PHP fonksiyonlarını (ve ayrıca düzenlilik için) içermesi gerektiğinden, az önce incelediğimiz bu HTML öğeleri arasındaki satır sonlarını ve boşlukları kaldırdık ve bunları bir dizeye (tek tırnak içinde) sıkıştırdık. . Ancak işlevsel olarak, yukarıda gördüğümüz HTML parçacığının aynısıdır ve son PHP kodumuz şöyle görünmelidir:

 [html]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>'; }[/html]

PHP ile işimiz bitti! functions.php dosyamızı yukarıdaki son kodla kaydettikten sonra, herhangi bir yazar herhangi bir sayfaya veya gönderiye [author_bio] girebilir ve yukarıdaki HTML, kısa kodun yerinde görünecektir!

Artı, gerçekten harika olan şey şu: Biyografimizi güncellememiz gerekirse, göründüğü her yeri düzenlememize gerek kalmayacak! Bunun yerine, tek yapmamız gereken functions.php dosyamızdaki kodu düzenlemek ve her yerde aynı anda güncellenecek. Temiz, ha?

Bununla birlikte, bundan en iyi şekilde yararlanmak için, muhtemelen biyo kutusuna bazı özel stiller eklemek isteyeceğiz.

4. Adım: Biraz CSS Ekleyin

Kısa kod, biraz stil olmadan harika değil, o yüzden ekleyelim! Kendi sitenizin yazı tiplerine (yukarıdaki resimdeki Fanwood Metni'dir) ve halihazırda yürürlükte olan CSS kurallarına bağlı olarak bazı değerleri biraz ayarlamanız gerekebilir. Ya da sadece farklı bir şey denemek isteyebilirsiniz!

Bu CSS, (alt) temanızın style.css dosyasına kopyalanabilir veya WordPress 4.7 veya üstünü çalıştırıyorsanız (ki öyle olmalısınız!), bu CSS'yi Özelleştir'deki "Ek CSS" kutusuna yapıştırabilirsiniz. ekran:

 [css].author-bio-box { background: #d4ead9; padding: 2em; overflow: auto; font-family: Fanwood Text; font-size: 1.2em; line-height: 1.4em; } .author-bio-box img { float: left; max-width: 128px; height: auto; margin: 0 1em 0 0; } .author-bio-box > p:first-of-type:first-letter { font-size: 3.1em; line-height: 1; float: left; margin-bottom: -.2em; } .author-bio-box > p:last-of-type { margin: 0; }[/css]

Şimdi işler çok daha iyi görünüyor olmalı. Ancak, yazar kutusunu kendinize ait hale getirmek ve sitenizde evinizde hissettirmek için CSS ile oynamaktan çekinmeyin!

Önerilen: İşlevi "Takılabilir" Yapın

Bu, kısa kodlara özgü değildir ve kodun çalışması için kesinlikle gerekli değildir, ancak en iyi uygulamadır ve bundan bahsetmenin tam zamanı.

İlk olarak, PHP'nin nasıl çalıştığına dair biraz arka plan :

create_author_bio işlevimizi kendimiz nasıl adlandırmamız gerektiğini hatırlıyor musunuz? Eh, create_author_bio; işlevimizi istediğimiz gibi kolayca adlandırabilirdik (yine de en iyisi, işlev adının size en azından ne yaptığına dair biraz ipucu vermesidir, bu yüzden create_author_bio seçtik).

Ancak şu da var: Eğer iki PHP işlevi aynı şekilde adlandırılırsa, PHP hangi işlevin doğru olduğu konusunda hiçbir fikre sahip olmayacağından, sonuç sitenin yüklenmesini önleyecek önemli bir hata olacaktır . PHP tahminde bulunmaz, bu yüzden durur.

Ve endişelenmemiz gereken sadece kodumuz değil; bir WordPress sitesi, kurulu eklentilere ve temalara bağlı olarak düzinelerce ve hatta yüzlerce farklı geliştiricinin kodunu kullanabilir. Aynı işlev adı iki kez kullanılırsa her şey bozulur!

Bu kötü ve açıkçası bunun asla olmayacağından emin olmak istiyoruz.

Bunu, fonksiyonumuzu "takılabilir" yaparak yapabiliriz; başka bir deyişle, aynı ada sahip başka bir işlev zaten varsa, WordPress'e işlevimizi oluşturmamasını söylemek. Zarif bir şekilde basit; mevcut kodumuzu bu kolay koşullu ifadenin içine sarıyoruz:

 [php]if( !function_exists( 'create_author_bio' ) ){ //Our existing PHP goes here! }[/php]

Bu koşullu if ifadesi, create_author_bio adlı bir işlevin zaten mevcut olmadığından emin olmak için kontrol eder. Şimdiye kadar kullandığımız tüm PHP kodumuz, bu ifadenin içinde, { } parantezleri arasında taşınabilir.

Yine de, işlevleri olabildiğince benzersiz bir şekilde adlandırmak en iyisidir! İşlevimizi takılabilir yapmak yalnızca önemli bir hatayı önler. Dolayısıyla, bir adlandırma çakışması olsaydı, kısa kodumuz yine de çalışmaz, ancak en azından site çalışır durumda olur ve başka hiçbir şey bozulmaz.

Çözüm

Bu kadar! Umarız özel bir yazar biyografisi kısa kodu oluşturmaktan keyif almışsınızdır! Takip ettiyseniz tek yapmanız gereken bir sayfada veya gönderide herhangi bir yere [author_bio] yazmak ve kodunuz görünecek!

Bu kısa kod, herhangi bir şeyi bir sayfaya çıkarmak için kolayca uyarlanabilir. Bir gif, özel bir HTML ve/veya JavaScript bloğu, bir resim veya video… istediğiniz her şey!

Ancak bu örnek, sayfanın herhangi bir yerinde tek bir statik değer çıktısı almanız gerekiyorsa yararlı olsa da, çok esnek değildir. Her seferinde tam olarak aynı şeyi döndürür ve bundan daha uyarlanabilir olmak için genellikle kısa kodlara ihtiyacımız vardır.

İyi haber: Kısa kodların yalnızca temellerini ele aldık ve çok, çok daha fazlasını yapabilirler!