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

トリガーハンドルとして画像の代わりにテキストボタン（「商品をフィルター」）を使用します。

モバイル専用フィルター


[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 にページがリダイレクトされます。
同じページに複数のスライドアウトインスタンスを配置することが可能で、それぞれに一意のキーが割り当てられます。

属性