WordPress FSE’de Query Loop ile İçerik Filtreleme Nasıl Yapılır?

WordPress’in blok tabanlı temalarındaki en kullanışlı özelliklerden biri Query Loop, yani Sorgu Döngüsü bloğu. Bu blok sayesinde özel bir tema dosyası hazırlamadan yazılarınızı kart, liste veya farklı düzenlerde gösterebiliyorsunuz. Ancak yalnızca içerikleri listelemek her zaman yeterli olmuyor.

İkinci Öğretmen için materyal arşivi tasarlarken ziyaretçilerin yüzlerce içerik arasında dolaşmak yerine ihtiyaç duydukları materyali seçerek bulmalarını istedim.

Örneğin bir öğretmen “Din Kültürü → 5. Sınıf → Video” seçimlerini yaptığında yalnızca bu koşulları karşılayan materyaller gösterilmeliydi. Bu ihtiyacı karşılamak için WordPress’in Query Loop yapısını ve Search & Filter eklentisini araştırdım.

Başlangıç: Query Loop ile materyalleri listelemek

Benim sitemde çevrim içi eğitim materyalleri materyal adındaki özel gönderi türünde bulunuyor.

Bir Query Loop bloğu üzerinden bu gönderi türünü seçip içerikleri listeleyebiliyorum.

Blok editörünün kod görünümünde ilgili sorgunun bazı özellikleri şu şekilde görünüyor:

{
  "perPage": 10,
  "postType": "materyal",
  "order": "desc",
  "orderBy": "date",
  "inherit": false
}

Burada postType, listelenecek gönderi türünü; perPage, bir sayfada gösterilecek içerik sayısını belirliyor. WordPress ayrıca taxQuery özelliği sayesinde belirli kategorilere veya taksonomi terimlerine göre içerik listeleyebiliyor.

Ancak benim ihtiyacım sabit bir liste oluşturmaktan farklıydı. Ziyaretçinin seçimine göre sorgunun değişmesi gerekiyordu.

Search & Filter ile ilk yaklaşımım

Bu amaçla Search & Filter eklentisini değerlendirdim. Önceden kullandığım kısa kod yaklaşımında arama, kategori, etiket ve özel taksonomi alanları aynı forma eklenebiliyordu. Örneğin şu yapıyı deneme konusu olarak ele aldım:

[searchandfilter fields="search,category,post_tag,wpdmcategory,wpdmtag,materyal-kategori"]

Buradaki alanların bir kısmı standart WordPress taksonomileri, diğerleri ise özel içerik türlerine ait taksonomilerdi. Bu çalışmada asıl fark ettiğim şey, bir filtre formunun hazırlanmasıyla mevcut Query Loop bloğunun filtrelenmesinin aynı işlem olmadığıydı. Formdan gönderilen değerlerin sonuçları üreten sorguya da uygulanması gerekiyor. Ayrıca post_tag içerisinde sınıf, ders ve süre gibi farklı bilgileri bir arada tutarsam bunları üç bağımsız filtre olarak göstermek mümkün olmuyor.

Bu nedenle önce taksonomi düzenini ele almak gerektiğini gördüm.

Filtrelerin sırasını nasıl belirledim?

Bir materyal arşivinde çok sayıda seçeneği aynı anda göstermek ziyaretçiyi yorabiliyor. Bu nedenle filtreleri kullanıcının düşünme biçimine göre sıralamak istedim:

1. Ders: Din Kültürü, Peygamberimizin Hayatı, Kur’an-ı Kerim vb.
2. Sınıf: 4, 5, 6, 7 veya 8. sınıf.
3. İçerik türü: Video, oyun, harita veya başka bir materyal.
4. Ünite: Gerekirse daha ayrıntılı filtreleme.

Ders ve sınıf için açılır menü, içerik türleri için ise seçim kutuları kullanılabilir. Burada dikkat edilmesi gereken nokta, görsel sıralama ile bağımlı filtrelemenin farklı olması. Örneğin 5. sınıf seçildiğinde yalnızca bu sınıfa ait ünitelerin görünmesi, dinamik filtreleme gerektiriyor.

Search & Filter Free yeterli mi?

Search & Filter’ın güncel sürümünde ücretsiz seçenekle kategoriler, etiketler, özel taksonomiler ve özel gönderi türleri üzerinden temel filtreleme yapılabiliyor. Gutenberg bloklarıyla da çalışıyor. Bununla birlikte seçime göre seçeneklerin anlık daralması, sonuçların AJAX ile sayfa yenilemeden güncellenmesi ve gelişmiş sorgu kontrolleri gibi özellikler Pro sürümün kapsamına giriyor. Benim gibi FSE kullanan biri için önemli olan nokta, Query Loop ile uyumun ve seçilen eklenti sürümünün yeteneklerinin ayrıca kontrol edilmesi.

Bu nedenle önce ücretsiz sürümle basit ve sayfa yenilemeli bir filtreleme oluşturup daha sonra gerçekten ihtiyaç duyulan gelişmiş özellikleri değerlendirmek daha mantıklı.

Eklentisiz bir Query Loop filtresi nasıl hazırlanabilir?

WordPress, query_loop_block_query_vars filtresi üzerinden Query Loop bloğunun sorgu parametrelerini değiştirmeye izin veriyor. Bu özellikten yararlanarak URL parametreleriyle çalışan bir filtreleme sistemi oluşturabiliriz.

Örneğin filtre formumuzun ders ve sinif adında iki alanı olsun. Aşağıdaki PHP kodu, yalnızca filterlenebilir-materyaller CSS sınıfına sahip Query Loop bloğuna uygulanmak üzere hazırlanmış bir örnektir:

add_filter(
    'query_loop_block_query_vars',
    function( $query, $block ) {

        $class = $block->attributes['className'] ?? '';

        if (
            ! in_array(
                'filterlenebilir-materyaller',
                preg_split( '/\s+/', trim( $class ) ),
                true
            )
        ) {
            return $query;
        }

        $filters = array();

        foreach ( array( 'ders', 'sinif' ) as $taxonomy ) {

            if (
                ! taxonomy_exists( $taxonomy ) ||
                ! isset( $_GET[ $taxonomy ] ) ||
                ! is_string( $_GET[ $taxonomy ] )
            ) {
                continue;
            }

            $term = sanitize_title(
                wp_unslash( $_GET[ $taxonomy ] )
            );

            if ( ! term_exists( $term, $taxonomy ) ) {
                continue;
            }

            $filters[] = array(
                'taxonomy' => $taxonomy,
                'field'    => 'slug',
                'terms'    => $term
            );
        }

        if ( ! empty( $filters ) ) {
            $query['tax_query'] = array_merge(
                array( 'relation' => 'AND' ),
                $filters
            );
        }

        return $query;

    },
    10,
    2
);

Bu örneğin çalışması için ders ve sinif taksonomilerinin kayıtlı olması, Query Loop bloğuna belirtilen CSS sınıfının eklenmesi ve ziyaretçinin seçimini aynı URL’ye ders ve sinif parametreleriyle gönderen bir GET formu bulunması gerekiyor.

Örneğin:

/materyaller/?ders=din-kulturu&sinif=5-sinif

Kod, ziyaretçinin seçtiği terimleri doğrulayıp sorguya ekliyor.

Bu örnekte temel iki filtre kullanıldı. Ünite ve içerik türü taksonomileri de aynı mantıkla eklenebilir. Mevcut Query Loop sorgunuzda önceden tanımlanmış taksonomi koşulları varsa bunların nasıl birleştirileceğini ayrıca düzenlemelisiniz.

Ayrıca WordPress’in bu filtresi ön yüzdeki sorguyu etkiliyor; blok editöründeki önizlemenin aynı sonucu göstermesi garanti değil.

Sayfalama ve SEO konusuna dikkat

Filtreleme sistemi kurarken yalnızca ilk sayfadaki sonuçları kontrol etmek yeterli değil. İkinci sayfaya geçildiğinde seçili filtrelerin korunması, boş sonuçların anlaşılır gösterilmesi ve filtre URL’lerinin arama motorlarında gereksiz sayıda benzer sayfa oluşturmaması gerekiyor. Özellikle çok sayıda taksonomi kullanan sitelerde her filtre kombinasyonunu ayrı bir SEO açılış sayfasına dönüştürmeyi doğru bulmuyorum.

Bunun yerine önemli ders, sınıf ve materyal kategorileri için düzenli arşiv sayfaları oluşturmayı; geri kalan kombinasyonları kullanıcı odaklı filtreleme olarak değerlendirmeyi tercih ediyorum.

Sonuç

Query Loop, WordPress’in kendi özellikleriyle gelişmiş bir materyal arşivi hazırlamak için sağlam bir başlangıç sunuyor.

Ancak filtreleme konusunda başarılı olmak için üç unsuru birlikte düşünmek gerekiyor: doğru taksonomiler, ziyaretçi açısından anlaşılır filtreler ve sonuçları doğru üreten sorgu yapısı.

Benim bu çalışmadan çıkardığım temel sonuç, önce içeriklerin nasıl sınıflandırılacağını belirlemek, ardından bunları nasıl filtreleyeceğimize karar vermek gerektiği.

Paylaş