woof_slideout
woof_slideout
[woof_slideout] kısa kodu, ekranın kenarından çıkan bir kayar filtre paneli oluşturur. Bu, kullanıcı ihtiyaç duyana kadar filtreyi gizli tutan, yer tasarrufu sağlayan bir çözümdür — mobil cihazlar, ürün arşiv sayfaları veya ekran alanının sınırlı olduğu herhangi bir düzen için idealdir.
Kayar panel, hem görsel hem de metin tetikleyicileri, yapılandırılabilir animasyon, mobil cihaza özel davranışları destekler ve tüm bilinmeyen nitelikleri dahili [woof] kısa koduna iletir.
Nitelikler
| Nitelik | Varsayılan | Açıklama |
|---|---|---|
image | Eklenti varsayılan simgesi | Tetikleyici görselin URL'si. Bunun yerine bir metin düğmesi kullanmak için null olarak ayarlayın. |
image_h | 50 | Tetikleyici görselin piksel cinsinden yüksekliği |
image_w | 50 | Tetikleyici görselin piksel cinsinden genişliği |
action | click | Tetikleyici eylem: click veya hover |
location | right | Kayar konum: left, right, top veya bottom |
speed | 100 | Milisaniye cinsinden animasyon hızı |
offset | 100px | Üstten (sol/sağ konum için) veya soldan (üst/alt konum için) ofset. px, %, em vb. destekler. |
onloadslideout | true | Sayfa yüklendiğinde panelin açık olup olmayacağı (true veya false) |
mobile_behavior | 0 | Görünürlük kontrolü: 0 = tüm cihazlarda göster, 1 = yalnızca mobilde göster, 2 = yalnızca masaüstünde göster |
width | auto | Panel genişliği (örn. 350px, 30%, auto) |
height | auto | Panel yüksekliği (örn. 500px, auto) |
text | Filter | image null olarak ayarlandığında görüntülenen düğme metni. Ayrıca tutamaç etiketi olarak da kullanılır. |
class | '' | Kayar kapsayıcı için ek CSS sınıfı |
redirect | '' | Filtre uygulandıktan sonra yönlendirme URL'si |
Temel Kullanım
[woof_slideout]
Sağ taraftan varsayılan ayarlarla bir kayar filtre paneli oluşturur. Panel, standart [woof] filtresini içerir.
Soldan Kayarak Açılma
[woof_slideout location="left" speed="300" width="400px"]
Sol taraftan 300ms animasyon ve 400px panel genişliği ile kayarak açılır.
Görsel Yerine Metin Düğmesi
[woof_slideout image="null" text="Filter Products"]
Tetikleyici tutamaç olarak bir görsel yerine bir metin düğmesi ("Filter Products") kullanır.
Yalnızca Mobil Filtre
[woof_slideout mobile_behavior="1" location="bottom" height="80%"]
Kayar panel yalnızca mobil cihazlarda, alttan, ekran yüksekliğinin %80'ini kaplayarak görünür. Mobil öncelikli tasarımlar için mükemmeldir.
Yüklemede Otomatik Açılma ve Üzerine Gelme Tetikleyicisi
[woof_slideout onloadslideout="true" action="hover" speed="200"]
Panel varsayılan olarak açıktır ve üzerine gelmeye (tıklamaya değil) yanıt verir. 200ms içinde animasyon yapar.
Gelişmiş: İçeride Özel İçerik
[woof_slideout location="right" width="350px"] [woof taxonomies="product_cat" sid="slideout-cat"] [/woof_slideout]
Açılış ve kapanış etiketleri arasına yerleştirilen herhangi bir içerik, kayar içerik olarak kullanılır. Bu örnekte, kategori taksonomi filtrelemesi olan belirli bir [woof] kısa kodu kayar panelin içine yerleştirilmiştir.
Nitelikleri Dahili [woof] Kısa Koduna İletme
[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]
Kayar panelin kendisinin bir parçası olmayan nitelikler (taxonomies, sid, by_text vb.) otomatik olarak dahili [woof] kısa koduna iletilir. Bu, herhangi bir [woof] niteliğinin şeffaf bir şekilde çalıştığı anlamına gelir.
Yalnızca Masaüstü ve Ofsetli
[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]
Yalnızca masaüstünde görünür, sağda, üstten 200px ofsetli, 320px genişliğinde konumlandırılmıştır.
PHP Örneği: Kayar Panel Şablonunu Geçersiz Kılma
Kayar panel şablonunu, bir dosyayı şu konuma yerleştirerek geçersiz kılabilirsiniz:
wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php
Veya kayar panel davranışını programatik olarak filtreleyebilirsiniz:
add_filter('woof_slideout_options', function($options) {
if (is_product_category()) {
$options['width'] = '100%';
$options['location'] = 'bottom';
}
return $options;
});
Notlar
- Kısa kodun çalışması için HUSKY eklenti ayarlarında kayar uzantının etkinleştirilmesi gerekir.
- Tetikleyici olarak bir görsel kullanıldığında, önerilen boyut yaklaşık 50×50 pikseldir.
redirectniteliği ayarlandığında, filtre değerleri seçildikten sonra sayfayı belirtilen URL'ye yönlendirecektir.- Aynı sayfada birden fazla kayar panel örneği desteklenir — her biri benzersiz bir anahtar alır.