افزونه وردپرس فلای اوت | FacetWP – Flyout

FacetWP – Flyout

این افزونه یک سایدبار ایجاد می کند که می تواند به پشتیبانی تلفن همراه کمک کند.

برای دیدن آن در عمل، به دموی ما بروید و سپس عرض مرورگر خود را کوچک کنید تا دکمه بنفش “نمایش فیلترها” را ببینید.

موارد استفاده

یک دکمه یا لینک با کلاس Css از facetwp-flyout-open اضافه کنید تا شروع به کار کند.

<button class = "facetwp-flyout-open"> فیلتر </ Button>

اگر می خواهید دکمه را برای کاربران دسکتاپ مخفی کنید، این را به style.css اضافه کنید:

@media (min-width: 780px) {
.facetwp-flyout-open {
display: none;
}
}

مهم: اگر از لینک استفاده می کنید، مطمئن شوید که href حاوی  (“#”) نیست. برخی از سازندگان صفحه هنگام ایجاد یک دکمه یا لینک عنصر، آن را بصورت خودکار اضافه می کنند.

خودشه! همه موارد زیر کاملاً اختیاری است.

JS hooks

(function($) {

FWP.hooks.addFilter('facetwp/flyout/facets', function(facets) {
return ['facet3', 'facet1', 'facet2']; // change the facet display order
});


FWP.hooks.addAction('facetwp/flyout/open', function() {
// flyout opened
});


FWP.hooks.addAction('facetwp/flyout/close', function() {
// flyout closed
});

})(jQuery);

افزودن محتوای اضافی

برای افزودن محتوای اضافی ، یک عنصر HTML .facetwp-flyout-tpl در صفحه اضافه کنید. با CSS بصورت خودکار پنهان می شود.

در این عنصر، یک نگهدارنده {content} اضافه کنید تا بصورت خودکار خارج شود. سپس محتوا را در بالا یا پایین این نگهدارنده اضافه کنید. در اینجا یک مثال کامل آورده شده است:

<div class="facetwp-flyout-tpl">
This text appears above the facets!
{content}
This text goes below the facets.
</div>