WordPress

Wordpress İle Özel Bir Dinamik Çoklu Görsel Galeri Sistemi Nasıl Yapılır?

Mert Çelik Mert Çelik · · 5 dakika okuma
Wordpress İle Özel Bir Dinamik Çoklu Görsel Galeri Sistemi Nasıl Yapılır?
Wordpress İle Özel Bir Dinamik Çoklu Görsel Galeri Sistemi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Geliştirme sürecine başlamadan önce yerel bir WordPress kurulumuna (LocalWP veya benzeri bir ortam) sahip olmanız gerekmektedir. PHP 8.2 ve üzeri sürümlerin kullanılması, 2026 yılı standartları gereği zorunludur. Ayrıca, WordPress'in yerleşik Media Uploader kütüphanesini kullanacağımız için temel seviyede JavaScript bilgisi süreci kolaylaştıracaktır.

  • WordPress 6.5+ sürümü
  • PHP 8.2+
  • Temel düzeyde HTML, CSS ve PHP bilgisi
  • Bir alt tema (Child Theme) dosyası

Adım 1: Özel Meta Kutusu (Meta Box) Oluşturma

Galeri görsellerini saklamak için WordPress'in "post meta" yapısını kullanacağız. Öncelikle, admin panelinde galeri görsellerini seçebileceğimiz bir arayüz oluşturmamız gerekiyor. Aşağıdaki kod bloğunu temanızın functions.php dosyasına ekleyerek özel meta kutusunu tanımlayın.


function ozel_galeri_meta_box() {
    add_meta_box(
        'ozel_galeri_metabox',
        'Galeri Görselleri',
        'ozel_galeri_render_metabox',
        'post', // Sadece yazılar için, ihtiyaca göre 'page' eklenebilir
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'ozel_galeri_meta_box');

Bu kod, WordPress editör ekranında "Galeri Görselleri" adında bir panel oluşturur. add_meta_box fonksiyonu, verinin nerede ve hangi içerik türünde görüneceğini kontrol eder.

Adım 2: Görsel Seçici Arayüzünü Hazırlama

Admin panelinde kullanıcıların görselleri seçebilmesi için WordPress'in yerleşik wp.media JavaScript kütüphanesini kullanacağız. Aşağıdaki kod, meta kutusunun içine görselleri seçmek için gerekli HTML yapısını ve tetikleyici butonları yerleştirir.


function ozel_galeri_render_metabox($post) {
    $galeri_gorselleri = get_post_meta($post->ID, '_ozel_galeri_ids', true);
    $gorsel_ids = $galeri_gorselleri ? explode(',', $galeri_gorselleri) : [];
    
    echo '
';
    foreach ($gorsel_ids as $id) {
        echo '
Wordpress İle Özel Bir Dinamik Çoklu Görsel Galeri Sistemi Nasıl Yapılır?
Wordpress İle Özel Bir Dinamik Çoklu Görsel Galeri Sistemi Nasıl Yapılır?
';
    }
    echo '
';
    echo 'Görsel Ekle';
    echo '';
}

Burada esc_attr fonksiyonu, XSS (Cross-Site Scripting) saldırılarını önlemek adına veriyi güvenli hale getirmek için kullanılmıştır. Gizli bir input alanı, seçilen görsel ID'lerini virgülle ayrılmış şekilde saklar.

Adım 3: JavaScript ile Medya Kütüphanesini Yönetme

Medya kütüphanesini açmak ve seçilen görselleri almak için bir JavaScript dosyasına ihtiyacımız var. admin-galeri.js adında bir dosya oluşturun ve temanızın js klasörüne ekleyin.


jQuery(document).ready(function($) {
    var frame;
    $('#galeri-ekle-btn').on('click', function(e) {
        e.preventDefault();
        if (frame) { frame.open(); return; }
        frame = wp.media({
            title: 'Galeri İçin Görsel Seç',
            button: { text: 'Ekle' },
            multiple: true
        });
        frame.on('select', function() {
            var attachments = frame.state().get('selection').toJSON();
            var ids = attachments.map(function(a) { return a.id; }).join(',');
            $('#ozel_galeri_ids').val(ids);
            // Burada görsel önizlemelerini güncelleme mantığı eklenebilir
        });
        frame.open();
    });
});

Bu script, kullanıcının çoklu seçim yapmasına izin verir ve seçilen ID'leri gizli input alanına aktarır. wp.media, WordPress'in çekirdek kütüphanesidir ve güvenli bir şekilde dosya yönetimi sağlar.

Adım 4: Verileri Kaydetme ve Güvenlik

Admin panelinde "Kaydet" veya "Güncelle" butonuna basıldığında, bu verilerin veritabanına güvenli bir şekilde yazılması gerekir. sanitize_text_field kullanarak gelen veriyi temizliyoruz.


function ozel_galeri_kaydet($post_id) {
    if (isset($_POST['ozel_galeri_ids'])) {
        $ids = sanitize_text_field($_POST['ozel_galeri_ids']);
        update_post_meta($post_id, '_ozel_galeri_ids', $ids);
    }
}
add_action('save_post', 'ozel_galeri_kaydet');
Kritik Güvenlik Uyarısı: Veritabanına veri gönderirken her zaman sanitize_text_field veya absint gibi temizleme fonksiyonlarını kullanın. Aksi takdirde, kötü niyetli kullanıcılar SQL injection yöntemleriyle veritabanınıza müdahale edebilir.

Adım 5: Ön Yüzde Dinamik Galeri Gösterimi

Şimdi sıra, kaydettiğimiz bu verileri kullanıcıya göstermeye geldi. Temanızın single.php dosyasında veya galeri göstermek istediğiniz yerde şu kodu kullanın:


$galeri_ids = get_post_meta(get_the_ID(), '_ozel_galeri_ids', true);
if ($galeri_ids) {
    $id_dizisi = explode(',', $galeri_ids);
    echo '
';
    foreach ($id_dizisi as $id) {
        $gorsel = wp_get_attachment_image($id, 'medium');
        echo '
' . $gorsel . '
';
    }
    echo '
';
}

wp_get_attachment_image fonksiyonu, görselin boyutunu ve gerekli HTML etiketlerini otomatik olarak oluşturur. Bu, performans açısından görselin doğru boyutta yüklenmesini sağlar.

Yöntem Karşılaştırması

Yöntem Avantaj Dezavantaj
Özel Meta Box Tam kontrol, hızlı performans Kodlama bilgisi gerektirir
Hazır Eklentiler Hızlı kurulum Siteyi yavaşlatır, güvenlik riski
Gutenberg Bloğu Modern, görsel düzenleme Geliştirme süreci daha karmaşık

Sıkça Sorulan Sorular

Galeri görsellerini nasıl sıralayabilirim?

Sıralama için JavaScript tarafında sortable() kütüphanesini kullanabilir ve ID'leri dizi olarak güncelleyip veritabanına kaydedebilirsiniz.

Görsel boyutlarını nasıl değiştirebilirim?

wp_get_attachment_image fonksiyonunun ikinci parametresine 'thumbnail', 'medium', 'large' veya özel tanımladığınız görsel boyutlarını girebilirsiniz.

Bu sistem neden eklentilerden daha iyi?

Eklentiler genellikle ihtiyaç duyulmayan CSS ve JS dosyalarını yükleyerek site hızını düşürür. Özel kod, sadece ihtiyacınız olanı çalıştırır.

Çok fazla görsel eklersem site yavaşlar mı?

Görsellerin optimize edilmesi ve wp_get_attachment_image ile doğru boyutların çağrılması, performans kaybını minimuma indirir.

Mobil uyumlu (responsive) galeri nasıl yapılır?

CSS Grid veya Flexbox kullanarak .dinamik-galeri sınıfına grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); stilini tanımlayarak kolayca responsive hale getirebilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kodlar eğitim amaçlıdır. Canlı sitenizde uygulamadan önce mutlaka veritabanı yedeği alınız. Kodların güvenliği ve site üzerindeki etkisi tamamen uygulayıcının sorumluluğundadır.

Lightbox Entegrasyonu ile Kullanıcı Deneyimini Geliştirme

Galeri sisteminizi kurduktan sonra görsellerin üzerine tıklandığında tam ekran açılmasını sağlamak, profesyonel bir görünüm için olmazsa olmazdır. Bunun için en hafif ve popüler kütüphanelerden biri olan PhotoSwipe veya GLightbox tercih edilebilir. Aşağıdaki örnekte, basit ve bağımlılık gerektirmeyen bir Lightbox yapısının nasıl entegre edileceğini göreceksiniz.

Öncelikle, temanızın functions.php dosyasına gerekli scriptleri kaydedin:

function enqueue_gallery_lightbox_assets() {
    wp_enqueue_style('glightbox-css', 'https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css');
    wp_enqueue_script('glightbox-js', 'https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js', [], null, true);
    
    wp_add_inline_script('glightbox-js', '
        document.addEventListener("DOMContentLoaded", function() {
            const lightbox = GLightbox({ selector: ".gallery-item a" });
        });
    ');
}
add_action('wp_enqueue_scripts', 'enqueue_gallery_lightbox_assets');

Ardından, single.php veya galeri şablonunuzdaki HTML çıktısını şu şekilde güncelleyin:


    
        




Sonuç



WordPress ile özel bir dinamik çoklu görsel galeri sistemi oluşturmak, sitenizin yönetimini kolaylaştırırken aynı zamanda performanslı bir yapı sunar. Bu rehberde öğrendiğiniz Meta API ve medya kütüphanesi entegrasyonu, sadece galeriler için değil, diğer özel içerik türleriniz için de temel teşkil eder. Bir sonraki adım olarak, bu görsellere "Lightbox" (büyüteç) efekti ekleyerek kullanıcı deneyimini bir üst seviyeye taşıyabilirsiniz.
                


                                

                    Etiketler:
                                        PHP
                                        Web Geliştirme
                                        wordpress
                                        özel galeri
                                        wp.media
                                    

                
                

                    
                    
                    
                    
                    
                    
                    
                


                

                    
Bu yazıya tepkinizi paylaşın:

                    

                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                                
                                            

                    
                


                

                    Mert Çelik
                    

                        
Mert Çelik

                        

                            Yazar
                        

                                                
Kendin yap (DIY) projeleri ve ev içi bakım rehberleri üzerine içerik geliştiriyorum. Detaylı ve anlaşılır anlatım diliyle karmaşık işleri keyifli hale getiriyorum.

                                            

                


                                

                
                                

                    

                        
İlgili Yazılar

                    

                    

                                                
                                                
                                            

                

                
                

                    

                        
Yorumlar (0)

                    


                    
                                        
                    
                    

                        
Yorum Yaz