[woof_slideout]
[woof_slideout] kısa kodu, ekranın kenarından açılan bir kayar filtre paneli oluşturur. Bu, filtreyi kullanıcı ihtiyaç duyana kadar gizli tutan yerden tasarruf 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 resim hem de metin tetikleyicilerini, yapılandırılabilir animasyonu, mobil cihazlara özgü davranışı destekler ve bilinmeyen tüm nitelikleri iç [woof] kısa koduna iletir.
Nitelikler
| Nitelik | Varsayılan | Açıklama |
|---|---|---|
image | Eklenti varsayılan simgesi | Tetikleyici resminin URL'si. Bunun yerine metin düğmesi kullanmak için null olarak ayarlayın. |
image_h | 50 | Tetikleyici resminin piksel cinsinden yüksekliği |
image_w | 50 | Tetikleyici resminin piksel cinsinden genişliği |
action | click | Tetikleyici eylemi: click veya hover |
location | right | Kayar çıkış konumu: 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 | Panelin sayfa yüklendiğinde 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 (örneğin, 350px, 30%, auto) |
height | auto | Panel yüksekliği (örneğin, 500px, auto) |
text | Filter | image null olarak ayarlandığında görüntülenen düğme metni. Ayrıca tutamaç etiketi olarak kullanılır. |
class | '' | Kayar konteyner için ek CSS sınıfı |
redirect | '' | Filtre uygulamasından sonra yönlendirme URL'si |
Temel Kullanım
[woof_slideout]
Varsayılan ayarlarla sağ taraftan bir kayar filtre paneli oluşturur. Panel, standart [woof] filtresini içerir.
Sola Kayar
[woof_slideout location="left" speed="300" width="400px"]
300ms animasyon ve 400px panel genişliği ile sol taraftan kayar.
Resim Yerine Metin Düğmesi
[woof_slideout image="null" text="Filter Products"]
Tetikleyici tutamaç olarak bir resim yerine metin düğmesi (“Ürünleri Filtrele”) kullanır.
Yalnızca Mobil Filtre
[woof_slideout mobile_behavior="1" location="bottom" height="80%"]
Kayar panel yalnızca mobil cihazlarda, alttan görünür ve ekran yüksekliğinin %80’ini kaplar. 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ş: İçinde Ö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 İç [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 iç [woof] kısa koduna iletilir. Bu, herhangi bir [woof] niteliğinin şeffaf bir şekilde çalıştığı anlamına gelir.
Ofset ile Yalnızca Masaüstü
[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]
Yalnızca masaüstünde görünür, sağda konumlandırılmış, üstten 200px ofset ile, 320px genişliğinde.
PHP Örneği: Kayar Şablonu Geçersiz Kılma
Kayar şablonunu aşağıdaki yola bir dosya yerleştirerek geçersiz kılabilirsiniz:
wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php
Veya kayar davranışını programlı olarak filtreleyin:
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ısı etkinleştirilmelidir.
- Tetikleyici olarak bir resim 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önlendirir.- Aynı sayfada birden fazla kayar örneği desteklenir — her biri benzersiz bir anahtar alır.