WordPress’te Özel Kısa Kod Nasıl Oluşturulur

WordPress 2.5’in piyasaya sürülmesinden bu yana, eklenti ve tema geliştiricileri arasında özel özellikler ve işlevler eklemenin tercih edilen yolu kısa kodlar olmuştur. Kısa kodları kullanarak kaydırıcılar, resim galerileri, düğmeler, özel yazı tipi metni, iletişim formları ve çok daha fazlasını ekleyebilirsiniz. Çok güçlü olmalarına rağmen, Elementor veya WPBakery gibi daha yeni ve daha popüler sayfa oluşturucuların bazılarına entegre edilmedikçe, kısa kodların yeni başlayanlar için uygun olduğu bilinmiyordu. Bu yüzden okuyucularımızın çoğunun zaten kısa kod kullandığından, fakat muhtemelen kendi kodlarını oluşturmaya cesaret edemediğinden oldukça eminiz.

Kodlama çoğu kişi için korkutucu görünse de, kısa kod oluşturma süreci ilk bakışta göründüğünden çok daha kolaydır. Bu yüzden bu makaleyi oluşturmaya ve süreci derinlemesine açıklamaya karar verdik. Gelecek bölümlerde, kısa kodların tam olarak ne olduğunu, zorluk derecesine göre değişen örnekler kullanarak nasıl oluşturulacağını ve web sitenizin çeşitli bölümlerinde nasıl kullanılacağını açıklayacağız. Başlamadan önce, önceki WordPress bilginize bağlı olarak, tartışılan konuları takip etmek ve anlamak için ek araştırmaya ihtiyaç duyulabileceğini belirtmeliyiz. Dilerseniz bu makalenin farklı bölümlerine geçmek için aşağıdaki bağlantıları kullanabilirsiniz:

• Özel kısa kodlar oluşturma

• Özel kısa kod örnekleri

• Özel kısa kodları kullanma

• Ek ipuçları

Özel kısa kodların ne olduğunu anlamak

WordPress kısa kodları, köşeli parantezlerle tanımlanan basit kod kısayollarıdır (örneğin, [shortcode_name]), önceden tanımlanmış bir işlevi veya bir dizi işlevi gerçekleştiren. Kullanılan işleve/işlevlere bağlı olarak, bir kısa kodun amacı bir “Merhaba dünya” metni eklemek kadar küçük veya tüm bir web sayfasının içeriğini oluşturmak kadar önemli bir şey olabilir.

Kısa kodları birkaç farklı şekilde sınıflandırabilirsiniz. WordPress varsayılan olarak altı yerleşik kısa koda sahiptir: [ caption ], [ gallery ], [ audio ], [ video ], [ playlist ] Ve [ embed ]. Bu kısa kod adları oldukça açıklayıcı olduğundan, şu anda bunlara girmeyeceğiz. Eklenti veya tema geliştiricileri veya sizin tarafınızdan oluşturulan diğer tüm kısa kodlara özel kod denir. Kısa kodları sınıflandırmanın başka bir yolu, ilişkili işlevin parametreleri kabul edip etmediğine bağlıdır. Fakat çoğunlukla iki türe ayrılırlar: nasıl kullandığınıza bağlı olarak kendi kendine kapanan kısa kodlar ve çevreleyen kısa kodlar. Kendiliğinden kapanan kısa kodlar yalnızca açılış kısa kod etiketini kullanır. Öte yandan, çevreleyen kısa kodlar, bu iki etiket arasına eklenen içeriği kullandıklarından, açılış etiketinin yanı sıra bir kapanış etiketi gerektirir. Uygulamada, şuna benzerler:

[shortcode_name] – kendi kendine kapanan kısa kod

[shortcode_name]Kısa kodda kullanılan ek içerik[/shortcode_name] – çevreleyen kısa kod

Çoğu durumda, aşağıdaki bölümde eklediğimiz örneklerden de görebileceğiniz gibi, her iki kısa kod türü de karşılık gelen işlevler içinde tanımlanan parametreleri kabul eder.

Özel kısa kodlar oluşturma

WordPress’in Kısa Kod API’si, bir kısa kodun kaydedilmesine ve sağlanan özniteliklerin getirilmesine ve ayrıştırılmasına izin veren bir dizi işlevi temsil eder. Ayrıca bir sayfa veya gönderi işlenirken, Kısa Kod API’si sayesinde kayıtlı tüm kısa kod etiketleri karşılık gelen çıktıyla değiştirilir. Bu yüzden herhangi bir özel kısa kod oluşturmaya başlamadan önce, bir kısa kodun nasıl kaydedileceğini anlamak önemlidir.

Bir kısa kodu kaydetmek için add_shortcode işlevini kullanmanız gerekir. Fonksiyonun iki parametresi vardır. İlki, kısa kodun adını temsil eden benzersiz bir kısa kod etiketidir. İkincisi, kısa kod kaydedildikten sonra yürütülen işleyici işlevinin (veya daha iyi bilindiği şekliyle geri aramanın) adıdır. Aşağıda verilen örnekte bu kodun nasıl görüneceğini görebilirsiniz:

add_shortcode( 'shortcode_name', 'handler_function_name' );

Açıklığa kavuşturmak için, shortcode_name benzersiz kısa kod etiketi iken, handler_function_name geri arama işlevi adıdır.

Fakat bir kısa kodun kaydedilmesi yeterli değildir. Bir adım daha atmanız gerekiyor ve bu işleyici işlevini yazmaktır. Bu işlev, kısa kodunuza amacını verir.

İşte bir kısa kodun kaydına ve buna karşılık gelen işleyici işlevinin eklenmesine ilişkin genelleştirilmiş bir örnek.

function handler_function_name( $atts, $content, $shortcode_tag ){
// Some code goes here
}
add_shortcode( 'shortcode_name', 'handler_function_name' );

Bu kod bloğunu detaylı bir şekilde açıklayalım.

Geri aramanın adı, add_shortcode işlevinin (bizim örneğimizde işleyici_işlev_adı) ikinci argümanıyla eşleşmelidir.

Ek olarak geri arama en fazla üç parametreyi kabul eder. $atts değişkeni, işleve iletilen bir ilişkisel nitelikler dizisini temsil eder. Kullanıcı tarafından eklenen nitelikleri kabul etmeyen bir kısa kod yazmayı seçerseniz, bu parametre atlanabilir. $content değişkeni, bir kullanıcının bir kısa kodun açılış ve kapanış etiketleri arasına eklediği içeriği temsil ettiğinden, çevreleme tipi kısa kodlar için ayrılmıştır. Bu değişken, aşağıda verilen örnekte kullanıcı tarafından eklenen içeriğin bulunduğu kısma karşılık gelir.

[shortcode_name]this is the user-inserted content[/shortcode_name]

Elbette, kendi kendine kapanan bir kısa kod oluşturmaya karar verirseniz, bu parametre atlanmalıdır.

Son parametreye gelince, $shortcode_tag değişkeni, kısa kodun kendisinin adı olan kısa kod etiketini temsil eder. Örneğimizde shortcode_name olan kısımdır. Üç parametreden nadiren ihtiyaç duyulduğu için en çok $shortcode_tag atlanır. Yalnızca iki kayıtlı kısa kod aynı geri arama işlevini paylaştığında gereklidir.

Son olarak kodun yorumla belirtilen kısmı // Buraya bazı kodlar gelir, yeni bir özelliği etkinleştiren kodu eklemeniz gereken yerdir. Yorumu kodunuzla değiştirmeniz yeterlidir.

Artık kodun her bir parçasının ne yaptığını bildiğinize göre örneklere geçebiliriz. Herhangi bir noktada kısa kod kaydının veya işleyici işlevlerinin ve özelliklerinin ayrıntılarını hatırlatmaya ihtiyacınız olursa bu bölüme geri dönebilirsiniz. Ek olarak bir kısa kod oluşturma sürecini hızlandırmak istiyorsanız, bir kısa kod oluşturucu kullanmayı deneyebilirsiniz. Yukarıdaki örneğimizde verilene benzer bir temel kod almanıza yardımcı olacak, böylece üzerine inşa edebilirsiniz.

Özel kısa kod örnekleri

Aşağıdaki bölümde, üç farklı kısa kod örneğini gösterecek ve dikkatlice açıklayacağız. Örnekler zorluk derecesinde farklılık gösterse de, ortak olan tek şey dönüş ifadesidir. Kısa kodlar oluşturulurken dönüş etiketi zorunludur, çünkü dönüş çıktısı kısa kod etiketinin yerini alır ([shortcode_name]) kullanıldığında. Bundan sonraki bölümde kısa kodların kullanımı hakkında daha derinlemesine konuşacağız.

Yeni bir kısa kod oluşturmaya çalışmadan önce şiddetle tavsiye ettiğimiz şey, web sitenizi yedeklemenizdir. Özellikle söz dizimindeki herhangi bir hata web sitenizi bozabilir. Bunu yapar yapmaz, kısa kod oluşturmaya dönebilirsiniz.

Bu bölümde gösterilen kodu temanızın functions.php dosyasına ekleyebilirsiniz. Fakat kodu ayrı bir dosyaya yerleştirmeniz veya hatta bunun için özel bir eklenti oluşturmanız daha iyidir. Ek ipuçları bölümünün bir parçası olarak bu konuya daha sonra değineceğiz.

Örnek 1:

Bir kısa kodun en temel örneği, parametresiz kendi kendine kapanan bir kısa koddur. Yukarıda açıklandığı gibi, işleyici işlevinin adı ve add_shortcode işlevinin ikinci argümanı aynı olmalıdır. Ayrıca aynı işlevin ilk argümanı kısa kodu nasıl kullanacağımızı, dönüş etiketinden sonraki dize ise ekranda ne göreceğinizi belirler. Bu örnekte kullanılan tarih işlevi, eklediğimiz saat biçimini temel alan bir tarih dizesi döndürür. Kullandığımız biçim, çıktıda sayısal olarak ifade edilen gün-ay-yıl anlamına gelen dmY’dir. Son olarak üç diziyi bir dizide birleştirmek ve web sayfasında görüntülemek için dize birleştirme işleçleri olan noktalar(.) kullandık.

// Adding a basic custom shortcode that tells the current date
function custom_date_shortcode( ) {
return '<p>The current date is ' . date('d-m-Y') . '.</p>';
}
add_shortcode( 'current_date', 'custom_date_shortcode' );

Kodun okunabilirliğini artırmak için yorumlar ve girintiler de kullandığımızı lütfen unutmayın. Yaptığınız tüm özel kısa kodlarda aynısını yapmanızı öneririz. Bunu söyledikten sonra, bir web sitesinde kullanıldığında geçerli tarih kısa kodumuz böyle görünüyor.

Örnek 2:

Biraz daha zorlu bir görev, kullanıcının ekleyebileceği bağımsız değişkenleri kabul eden kendi kendine kapanan bir kısa kod oluşturmaktır. Bunu yapmak için, işleyici işlevinin üç parametresinden biri, bu durumda $atts değişkeni kullanılmalıdır. Aşağıdaki örnekte, kısa kod oluşturmanın çeşitli aşamalarını açıklayan çok basit ama eğitici bir kısa kod sergilemeyi seçtik.

// Adding a colored text shortcode
function custom_colored_text( $atts ) {
$default_atts = array(
"title" => '',
"title_color" => ''
);
$params = shortcode_atts( $default_atts, $atts );
$title_styles = "";
// generate color style
if( ! empty( $params['title_color'] ) ) {
$title_styles .= "color: " . $params['title_color'] . ";";
}
return '<div class="text-holder"><span class="text-title" style="' . $title_styles . '">' . esc_html( $params['title'] ) . '</span></div>';
}
add_shortcode( 'colored_text', 'custom_colored_text' );

İşleyici işlevin parametrelerini ve bir kısa kodun nasıl kaydedilebileceğini önceki bölümlerde açıkladığımız için burada tekrar ele almayacağız. Bunun yerine, her seferinde bir kod bloğu işleyici işlevinin içeriğini açıklamaya odaklanacağız. Blokların her biri, kısa kod oluşturma sürecinde farklı bir aşamayla ilgilidir, bu nedenle her birine uygun adlar verdik.

• Nitelikleri çıkarma

$default_atts = array(
"title" => '',
"title_color" => ''
);
$params = shortcode_atts( $default_atts, $atts );

Fark edebileceğiniz ilk şey, ilişkisel bir dizi olan $default_atts değişkenidir. Ne anlama geldiğini biraz daha açık hale getirmek için bilerek $default_atts adını verdik. Bu değişken, kısa kodda kullanılan tüm özniteliklerin tüm varsayılan değerlerini içerir. Daha sonra Shortcode API tarafından sağlanan shortcode_atts işlevi sayesinde, varsayılan değerler $atts değişkeninde depolanan kullanıcı tarafından eklenen değerlerle karşılaştırılır. Bir kullanıcı bir kısa kodun özniteliğini kullanmayı atlarsa, $atts değişkeni içinde saklanmaz. $default_atts dizisi aynı zamanda mevcut tüm kısa kod özniteliklerinin bir listesi olarak hizmet ettiğinden, bunun yerine atlanan kısa kod özniteliğine karşılık gelen bir varsayılan değer kullanılacaktır. Ayrıca bir kullanıcı yanlışlıkla geçersiz bir kısa kod özelliği eklerse, aynı işlev sayesinde bu özellik dikkate alınmaz.

Bu örneği basit tutmak amacıyla, bu kısa koda yalnızca iki olası öznitelik ekledik, bunların her ikisi de varsayılan değerler olarak boş dizelere sahiptir. Shortcode_atts işlevini kullanarak özniteliklere ve değerlerine çapraz referans verdikten sonra sonuç, aynı zamanda bir ilişkisel dizi olan $params değişkeninin içinde depolanır.

• Nitelikler ile etkileşim

Belirli işlemleri gerçekleştirmek veya edinilen özniteliklerle etkileşim kurmak, bir kısa kod oluşturmanın ana parçasıdır. Kısa kodun karmaşıklığına bağlı olarak, kodun bu bölümünün uzunluğu önemli ölçüde değişebilir. Buna rağmen, bu bölümün bölümleri bazen anlamsal olarak yapılandırılmış ayrı işlevlere bölünebilir ve bunlar olarak yazılabilir, bunlar daha sonra işleyici işlevi içinde kullanılabilir. Fakat bunlar oldukça gelişmiş ve karmaşık örnekler olduğu için bu yazıda bunlara değinmeyeceğiz.

Örneğimizde kullanılan kod bölümünü inceleyelim.

İlk olarak, bir okuyucu yeni bir $title_styles değişkeninin yaratıldığını ve bunun boş bir dizeye ayarlandığını görebilir. Aşağıda yer alan if bloğunda da aynı değişkeni kullanacağız. Daha önce de belirttiğimiz gibi, nitelikler ve bunlara karşılık gelen değerler, $params ilişkilendirmesi içine yerleştirilir…