WordPress’te Shortcode Nasıl Oluşturulur?

WordPress'te Shortcode Nasıl Oluşturulur
WordPress’te Shortcode Nasıl Oluşturulur

WordPress’te Shortcode Nasıl Oluşturulur? Detaylı Rehber ve Pratik Örnekler

WordPress ile çalışırken, sürekli aynı içeriği farklı sayfalarda tekrarlamaktan yorulmuş musunuz? Özellikle iletişim formları, fiyat tabloları veya özel düğmeler gibi karmaşık elementleri her seferinde yeniden kodlamak gerçekten zaman kaybı yaratıyor. İşte tam bu noktada shortcode’lar devreye giriyor ve WordPress deneyiminizi tamamen değiştiriyor.

Geçtiğimiz yıl, bir kurumsal müşterimiz için geliştirdiğimiz WordPress sitesinde, müşteri referanslarını gösteren karmaşık bir bölüm vardı. Bu bölümü her sayfa için ayrı ayrı kodlamak yerine, bir shortcode oluşturduk ve sadece [musteri-referanslari] yazarak istediği her yerde bu bölümü kullanabilir hale geldi. Bu yaklaşım hem zaman tasarrufu sağladı hem de site yönetimini inanılmaz kolaylaştırdı.

Shortcode’lar, WordPress’in en güçlü özelliklerinden biri olmasına rağmen, birçok site sahibi bu potansiyeli tam olarak kullanamıyor. Bu yazıda, shortcode oluşturmanın tüm inceliklerini, pratik örneklerle birlikte ele alacağız.

Shortcode Nedir ve Neden Bu Kadar Önemli?

Shortcode’lar, WordPress’te karmaşık işlevleri basit kod parçacıklarıyla çağırmanıza olanak sağlayan sistemlerdir. Köşeli parantezler içinde yazılan bu kısa kodlar, arka planda çok daha karmaşık PHP fonksiyonlarını çalıştırır.

Düşünün ki, müşterilerinize özel bir hesap makinesi sunmak istiyorsunuz. Normal şartlarda bu hesap makinesini her sayfaya ayrı ayrı kodlamanız gerekirdi. Ancak shortcode ile bunu bir kez oluşturup, [hesap-makinesi] yazarak istediğiniz her sayfada kullanabilirsiniz.

Shortcode’ların en büyük avantajı esneklikleridir. Parametreler kullanarak aynı shortcode’u farklı şekillerde çalıştırabilirsiniz. Örneğin, [dugme renk=”kirmizi” boyut=”buyuk”] şeklinde kullanarak, aynı düğme shortcode’unu farklı özelliklerle çağırabilirsiniz.

İlk Shortcode’unuzu Oluşturmak: Temel Yapı ve Fonksiyonlar

Shortcode oluşturmanın en temel yolu, WordPress’in add_shortcode() fonksiyonunu kullanmaktır. Bu fonksiyon, theme’nizin functions.php dosyasına veya özel bir eklentiye eklenebilir.

En basit shortcode örneğiyle başlayalım. Diyelim ki sitenizde sürekli güncel yılı göstermek istiyorsunuz:

Temel Shortcode Yapısı:

function guncel_yil_shortcode() {
return date('Y');
}
add_shortcode('yil', 'guncel_yil_shortcode');

Bu kod parçası, [yil] shortcode’unu her kullandığınızda güncel yılı otomatik olarak gösterecektir. Özellikle footer’da telif hakkı metinlerinde çok kullanışlıdır.

Shortcode fonksiyonlarında dikkat edilmesi gereken en önemli nokta, echo kullanmak yerine return kullanmaktır. WordPress shortcode’ları, fonksiyondan dönen değeri alıp yerine yerleştirdiği için, doğrudan çıktı vermek istenmeyen sonuçlara yol açabilir.

Parametreli Shortcode’lar: Esneklik ve Özelleştirme İmkanları

Gerçek gücün ortaya çıktığı nokta, parametreli shortcode’lar oluşturmaktır. Bu yaklaşım sayesinde, tek bir shortcode ile birçok farklı senaryo çalıştırabilirsiniz.

Örneğin, farklı renklerde ve boyutlarda düğmeler oluşturabilen bir shortcode geliştirdim:

Parametreli Shortcode Örneği:

function ozel_dugme_shortcode($atts) {
$varsayilan_degerler = array(
'renk' => 'mavi',
'boyut' => 'orta',
'link' => '#',
'metin' => 'Tıkla'
);

$degerler = shortcode_atts($varsayilan_degerler, $atts);

$html = '<a href="' . $degerler['link'] . '" class="dugme ' . $degerler['renk'] . ' ' . $degerler['boyut'] . '">';
$html .= $degerler['metin'];
$html .= '</a>';

return $html;
}
add_shortcode('dugme', 'ozel_dugme_shortcode');

Bu shortcode’u şu şekillerde kullanabilirsiniz:

  • [dugme] – Varsayılan özelliklerle
  • [dugme renk=”kirmizi” boyut=”buyuk”] – Kırmızı ve büyük boyutta
  • [dugme link=”https://example.com” metin=”Hemen Başla”] – Özel link ve metin ile

shortcode_atts() fonksiyonu burada kritik bir rol oynuyor. Bu fonksiyon, kullanıcının verdiği parametreleri varsayılan değerlerle birleştirerek, eksik parametreler için güvenli değerler sağlıyor.

İleri Seviye Shortcode Teknikleri ve Gerçek Proje Örnekleri

Shortcode’lar yalnızca basit HTML döndürmekle sınırlı değil. Veritabanı sorguları yapabilen, dinamik içerik üreten ve hatta diğer shortcode’ları içeren karmaşık yapılar oluşturabilirsiniz.

Son projem olan bir emlak sitesinde, öne çıkan gayrimenkulleri listeleyen bir shortcode geliştirdim. Bu shortcode, özel post type’lardan veri çekerek dinamik bir liste oluşturuyordu:

Dinamik İçerikli Shortcode Örneği:

function ozel_gayrimenkul_listesi($atts) {
$parametreler = shortcode_atts(array(
'sayi' => 3,
'kategori' => '',
'sirala' => 'tarih'
), $atts);

$args = array(
'post_type' => 'gayrimenkul',
'posts_per_page' => $parametreler['sayi'],
'orderby' => $parametreler['sirala']
);

if (!empty($parametreler['kategori'])) {
$args['meta_query'] = array(
array(
'key' => 'kategori',
'value' => $parametreler['kategori']
)
);
}

$query = new WP_Query($args);
$output = '<div class="gayrimenkul-listesi">';

if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$fiyat = get_post_meta(get_the_ID(), 'fiyat', true);

$output .= '<div class="gayrimenkul-item">';
$output .= '<h3>' . get_the_title() . '</h3>';
$output .= '<p>Fiyat: ' . $fiyat . ' TL</p>';
$output .= '</div>';
}
}

wp_reset_postdata();
$output .= '</div>';

return $output;
}
add_shortcode('gayrimenkul_listesi', 'ozel_gayrimenkul_listesi');

Bu örnek shortcode, [gayrimenkul_listesi sayi=”5″ kategori=”satilik”] şeklinde kullanılarak, satılık gayrimenkullerin ilk 5’ini listeleyebiliyor.

Shortcode’larda güvenlik de kritik bir konudur. Özellikle kullanıcı girişi alan parametrelerde, sanitize_text_field() ve esc_html() gibi WordPress güvenlik fonksiyonlarını mutlaka kullanmalısınız.

Shortcode Yönetimi ve Performans Optimizasyonu

Shortcode’lar güçlü olmakla birlikte, yanlış kullanıldığında site performansını olumsuz etkileyebilirler. Özellikle veritabanı sorguları içeren shortcode’larda caching mekanizmaları kullanmak kritik önem taşır.

WordPress’in Transients API’sini kullanarak shortcode sonuçlarını önbellekleyebilirsiniz:

function cached_shortcode_ornegi($atts) {
$cache_key = 'shortcode_cache_' . md5(serialize($atts));
$cached_result = get_transient($cache_key);

if ($cached_result !== false) {
return $cached_result;
}

// Ağır işlemler burada yapılır
$result = // karmaşık hesaplama veya sorgu

set_transient($cache_key, $result, HOUR_IN_SECONDS);
return $result;
}

Shortcode’ları organize etmek için, bunları ayrı bir eklenti dosyasında toplamanızı öneririm. Bu yaklaşım, tema değişikliklerinde shortcode’ların kaybolmasını engeller ve kod yönetimini kolaylaştırır.

Ayrıca shortcode’larınızı dokumentasyonla birlikte sundığınızdan emin olun. Özellikle ekip çalışması yapılan projelerde, her shortcode’un ne yaptığı, hangi parametreleri aldığı ve nasıl kullanıldığına dair açık bilgiler bulundurmak çok değerlidir.

Sonuç ve Eylem Planınız

Shortcode’lar, WordPress sitenizdeki tekrarlayan işleri otomatikleştirmenin ve karmaşık işlevleri basit hale getirmenin en etkili yoludur. Basit bir metin değişikliğinden, karmaşık veritabanı sorgularına kadar geniş bir kullanım alanına sahipler.

Bugün shortcode’lara başlamak için şu adımları izleyin: Öncelikle sitenizde sürekli tekrarladığınız içerikleri belirleyin. Bunlar iletişim formları, düğmeler, özel listeler veya hesap makineleri olabilir. Ardından en basit olanından başlayarak ilk shortcode’unuzu oluşturun.

Unutmayın ki, shortcode’lar sitenizin esnekliğini artırırken, aynı zamanda yönetimi de kolaylaştırır. Doğru kullanıldığında, hem sizin hem de müşterilerinizin WordPress deneyimini önemli ölçüde geliştirecektir. İlk shortcode’unuzu oluşturduktan sonra, daha karmaşık örneklere geçerek WordPress sitenizin potansiyelini tam anlamıyla keşfedebilirsiniz.

Tavsiye Edilen Yazılar