woof_slideout
woof_slideout
[woof_slideout] shortcode 创建一个从屏幕边缘滑出的筛选面板。这是一个节省空间的解决方案，它使筛选器保持隐藏状态，直到用户需要它时才显示——非常适合移动设备、产品归档页面或任何屏幕空间有限的布局。
滑出面板支持图像和文本触发器、可配置的动画、移动设备特定行为，并将所有未知属性传递给内部的 [woof] shortcode。
属性
| 属性 | 默认值 | 描述 |
|---|---|---|
image | 插件默认图标 | 触发图像的 URL。设置为 null 以使用文本按钮代替。 |
image_h | 50 | 触发图像的高度（像素） |
image_w | 50 | 触发图像的宽度（像素） |
action | click | 触发动作：click 或 hover |
location | right | 滑出位置：left、right、top 或 bottom |
speed | 100 | 动画速度（毫秒） |
offset | 100px | 距顶部（对于左/右位置）或距左侧（对于顶部/底部位置）的偏移量。支持 px、%、em 等。 |
onloadslideout | true | 页面加载时面板是否应打开（true 或 false） |
mobile_behavior | 0 | 可见性控制：0 = 在所有设备上显示，1 = 仅在移动设备上显示，2 = 仅在桌面设备上显示 |
width | auto | 面板宽度（例如，350px、30%、auto） |
height | auto | 面板高度（例如，500px、auto） |
text | Filter | 当 image 设置为 null 时显示的按钮文本。也用作手柄标签。 |
class | '' | 滑出容器的附加 CSS 类 |
redirect | '' | 应用筛选器后的重定向 URL |
基本用法
[woof_slideout]
从右侧渲染一个带有默认设置的滑出筛选面板。该面板包含标准的 [woof] 筛选器。
从左侧滑出
[woof_slideout location="left" speed="300" width="400px"]
从左侧滑出，带有 300 毫秒的动画和 400 像素的面板宽度。
使用文本按钮代替图像
[woof_slideout image="null" text="Filter Products"]
使用文本按钮（“Filter Products”）而不是图像作为触发手柄。
仅限移动设备的筛选器
[woof_slideout mobile_behavior="1" location="bottom" height="80%"]
滑出面板仅在移动设备上显示，从底部滑出，占据屏幕高度的 80%。非常适合移动优先设计。
加载时自动打开并支持悬停触发
[woof_slideout onloadslideout="true" action="hover" speed="200"]
面板默认打开，并响应悬停（而非点击）。动画时间为 200 毫秒。
高级：内部自定义内容
[woof_slideout location="right" width="350px"] [woof taxonomies="product_cat" sid="slideout-cat"] [/woof_slideout]
放置在开始和结束标签之间的任何内容都将用作滑出内容。在此示例中，一个带有分类法筛选的特定 [woof] shortcode 被放置在滑出面板内部。
将属性传递给内部的 [woof] Shortcode
[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]
不属于滑出面板本身的属性（例如 taxonomies、sid、by_text 等）会自动转发到内部的 [woof] shortcode。这意味着任何 [woof] 属性都可以透明地工作。
仅限桌面设备并带有偏移量
[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]
仅在桌面设备上可见，位于右侧，距顶部偏移 200 像素，宽度 320 像素。
PHP 示例：覆盖滑出模板
您可以通过将文件放置在以下位置来覆盖滑出模板：
wp-content/themes/your-theme/woof/ext/slideout/views/shortcodes/woof_slideout.php
或者通过编程方式筛选滑出行为：
add_filter('woof_slideout_options', function($options) {
if (is_product_category()) {
$options['width'] = '100%';
$options['location'] = 'bottom';
}
return $options;
});
注意事项
- 必须在 HUSKY 插件设置中启用滑出扩展，此 shortcode 才能工作。
- 当使用图像作为触发器时，建议尺寸约为 50×50 像素。
redirect属性设置后，将在选择筛选值后将页面重定向到指定的 URL。- 同一页面上支持多个滑出实例——每个实例都会获得一个唯一的键。