woof_slideout
woof_slideout
[woof_slideout] ショートコードは、画面の端から現れるスライドアウトフィルターパネルを作成します。これは、ユーザーが必要とするまでフィルターを非表示にする省スペースソリューションであり、モバイルデバイス、商品アーカイブページ、または画面スペースが限られているあらゆるレイアウトに最適です。
スライドアウトパネルは、画像とテキストの両方のトリガー、設定可能なアニメーション、モバイル固有の動作をサポートし、すべての不明な属性を内部の [woof] ショートコードに渡します。
Attributes
| Attribute | Default | Description |
|---|---|---|
image | Plugin default icon | トリガー画像の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 |
Basic Usage
[woof_slideout]
デフォルト設定で右側からスライドアウトフィルターパネルを表示します。パネルには標準の [woof] フィルターが含まれています。
Slide-out from the Left
[woof_slideout location="left" speed="300" width="400px"]
左側から300ミリ秒のアニメーションと400ピクセルのパネル幅でスライドアウトします。
Text Button Instead of Image
[woof_slideout image="null" text="Filter Products"]
トリガーハンドルとして画像ではなくテキストボタン（「Filter Products」）を使用します。
Mobile-Only Filter
[woof_slideout mobile_behavior="1" location="bottom" height="80%"]
スライドアウトはモバイルデバイスのみに表示され、下から画面の高さの80%を占めます。モバイルファーストデザインに最適です。
Auto-Open on Load with Hover Trigger
[woof_slideout onloadslideout="true" action="hover" speed="200"]
パネルはデフォルトで開いており、ホバー（クリックではない）に反応します。200ミリ秒でアニメーションします。
Advanced: Custom Content Inside
[woof_slideout location="right" width="350px"] [woof taxonomies="product_cat" sid="slideout-cat"] [/woof_slideout]
開始タグと終了タグの間に配置されたコンテンツは、スライドアウトコンテンツとして使用されます。この例では、カテゴリタクソノミーフィルタリングを持つ特定の [woof] ショートコードがスライドアウト内に配置されています。
Passing Attributes to the Inner [woof] Shortcode
[woof_slideout location="left" taxonomies="product_cat" sid="sidebar-filter" by_text="1"]
スライドアウト自体の一部ではない属性（taxonomies、sid、by_textなど）は、内部の [woof] ショートコードに自動的に転送されます。これは、任意の [woof] 属性が透過的に機能することを意味します。
Desktop-Only with Offset
[woof_slideout location="right" offset="200px" mobile_behavior="2" width="320px"]
デスクトップのみで表示され、右側に配置され、上から200ピクセルのオフセットがあり、幅は320ピクセルです。
PHP Example: Override the Slideout Template
次の場所にファイルを配置することで、スライドアウトテンプレートを上書きできます。
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;
});
Notes
- ショートコードが機能するには、HUSKYプラグイン設定でスライドアウト拡張機能を有効にする必要があります。
- 画像をトリガーとして使用する場合、推奨サイズは約50×50ピクセルです。
redirect属性が設定されている場合、フィルター値が選択された後、ページは指定されたURLにリダイレクトされます。- 同じページでの複数のスライドアウトインスタンスがサポートされており、それぞれに一意のキーが割り当てられます。