[woof_slideout]

[woof_slideout] 短代码创建一个从屏幕边缘滑出的筛选面板。这是一种节省空间的解决方案，将筛选器隐藏起来，直到用户需要时才显示——非常适合移动设备、产品归档页面或任何屏幕空间有限的布局。

该滑出面板支持图像和文本触发器、可配置动画、移动端特定行为，并将所有未知属性传递给内部的 [woof] 短代码。

属性

属性	默认值	描述
`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"]

从左侧滑出，动画时长300ms，面板宽度400px。

使用文本按钮代替图像


[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"]

面板默认打开，响应悬停（而非点击）。动画时长200ms。

高级：自定义内容


[woof_slideout location="right" width="350px"]
  [woof taxonomies="product_cat" sid="slideout-cat"]
[/woof_slideout]

开始标签和结束标签之间的任意内容均用作滑出内容。在此示例中，一个带有产品分类筛选的特定 [woof] 短代码被放置在滑出面板内。

将属性传递给内部的 [woof] 短代码


[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]

不属于滑出面板本身的属性（taxonomies、sid、by_text 等）会自动转发给内部的 [woof] 短代码。这意味着任何 [woof] 属性都能透明工作。

仅桌面端并带偏移


[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]

仅在桌面端可见，位于右侧，距顶部200px偏移，宽度320px。

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 插件设置中启用滑出扩展，短代码才能正常工作。
使用图像作为触发器时，推荐尺寸约为 50×50 像素。
设置 redirect 属性后，会在筛选值选定后重定向页面到指定URL。
同一页面上支持多个滑出实例——每个实例都会获得一个唯一键。

属性