در این آموزش گامبهگام، به شما نشان میدهیم که چطور با JetEngine فیلد تکرار شونده (Repeater) برای بخش سوالات متداول (FAQ) بسازید و سپس محتوای آن را به صورت آکاردئون داینامیک در قالب تکپستهای المنتور نمایش دهید. این روش کاملاً داینامیک است و تعداد سوالات و جوابها بسته به محتوای هر پست به طور خودکار تغییر میکند. این کار نه تنها ظاهر سایت شما را حرفهایتر میکند، بلکه برای سئوی سایت هم بسیار مفید است چون میتوانید schema FAQ را هم اضافه کنید.
این آموزش مخصوص کاربرانی است که از Elementor Pro، JetEngine و ترجیحاً JetTabs (از مجموعه Crocoblock) استفاده میکنند.
چرا بخش FAQ داینامیک مهم است؟
- بهبود تجربه کاربری (UX) با نمایش سوالات به صورت آکاردئون
- افزایش زمان ماندگاری کاربر در صفحه
- کمک به سئو با امکان افزودن schema FAQ (که در نتایج گوگل به صورت Rich Snippet نمایش داده میشود)
- مدیریت آسان محتوا بدون نیاز به کد نویسی پیچیده
پیشنیازها
قبل از شروع، مطمئن شوید این افزونهها نصب و فعال هستند:
- Elementor (ترجیحاً Pro)
- JetEngine (از Crocoblock)
- JetTabs (برای ویجت Classic Accordion – توصیه میشود)
- JetThemeCore (اگر میخواهید قالب تکپست را با المنتور بسازید)
گام ۱: ساخت Meta Box و فیلد Repeater در JetEngine
۱. به پیشخوان وردپرس بروید → JetEngine > Meta Boxes → Add New.
۲. نامی مانند “FAQ بخش پستها” وارد کنید.
۳
. در بخش Meta Box for گزینه Posts (یا پست تایپ دلخواه خود) را انتخاب کنید.
۴. روی New Meta Field کلیک کنید و نوع فیلد را Repeater انتخاب کنید.
۵. نام فیلد (Field Name/ID) را مثلاً faq_repeater بگذارید.
۶. حالا داخل Repeater دو فیلد زیر را اضافه کنید:
- فیلد اول: نوع Text یا Textarea → نام/ID: faq_question → برچسب: “سوال”
- فیلد دوم: نوع WYSIWYG Editor یا Textarea → نام/ID: faq_answer → برچسب: “پاسخ”
۷. تنظیمات دلخواه مانند توضیحات یا آیکون را اعمال کنید و Meta Box را ذخیره کنید.
نتیجه: حالا در ویرایشگر هر پست، بخش جدیدی به نام “FAQ بخش پستها” ظاهر میشود که میتوانید به تعداد دلخواه سوال و جواب اضافه یا حذف کنید.
گام ۲: ساخت Query برای Repeater (توصیه میشود)
برای اینکه آکاردئون کاملاً داینامیک شود و تعداد تبها خودکار تنظیم شود، یک Query بسازید:
۱. به JetEngine > Query Builder بروید → Add New.
۲. نامی مانند “FAQ Repeater Query” بگذارید.
۳. در بخش Query Type گزینه Repeater Query را انتخاب کنید.
۴. تنظیمات:
- Source: JetEngine Meta Field
- JetEngine Field: faq_repeater (فیلد Repeater ساختهشده)
- Object ID: Current Object ID (یا ماکرو %current_id%)
۵. Query را ذخیره کنید.
گام ۳: ساخت قالب تکپست با Elementor و نمایش آکاردئون
۱. اگر از JetThemeCore استفاده میکنید: به Theme Builder > Single Post بروید و قالب دلخواه را ویرایش کنید. یا مستقیماً با Elementor صفحه تکپست را ویرایش کنید.
۲. ویجت Classic Accordion از افزونه JetTabs را به محل دلخواه (معمولاً زیر محتوا) اضافه کنید.
۳. تنظیمات ویجت:
- تیک Use JetEngine Query را بزنید.
- Query ساختهشده (“FAQ Repeater Query”) را انتخاب کنید.
۴. همه آیتمهای پیشفرض آکاردئون را حذف کنید و فقط یک تب (Toggle #1) نگه دارید.
۵. در تب باقیمانده:
- Label (عنوان تب): روی آیکون Dynamic Tags کلیک کنید → JetEngine → Current Object Field → faq_question
- Content (محتوای تب): دوباره Dynamic Tags → JetEngine → Current Object Field → faq_answer
۶. استایلدهی دلخواه انجام دهید (رنگ، فونت، آیکون باز/بسته شدن، انیمیشن و …).
۷. صفحه را ذخیره و منتشر کنید.
نتیجه نهایی
حالا در هر پست:
- بخش FAQ به صورت آکاردئون زیبا و داینامیک نمایش داده میشود.
- تعداد تبها دقیقاً برابر با تعداد آیتمهای اضافهشده در Repeater است.
- محتوا کاملاً از متافیلدهای پست کشیده میشود و نیاز به ویرایش دستی قالب نیست.
نکات پیشرفته و سئو
- افزودن Schema FAQ: با افزونههای Rank Math یا Yoast SEO میتوانید فیلدهای Repeater را به schema متصل کنید (در Rank Math گزینهای برای JetEngine وجود دارد).
- اگر JetTabs ندارید: میتوانید از ویجت Posts یا Dynamic Loop در JetEngine استفاده کنید و داخل آن یک آکاردئون ساده با HTML/CSS/JS بسازید، اما روش JetTabs حرفهایتر است.
- برای عملکرد بهتر، کش سایت را پاک کنید و تست کنید.
در وب سایت اروند گرافیک هم دقیقا از همین روش در قالب المنتور پست ها استفاده شد.
اگر سوالی داشتید، در کامنتها بپرسید. موفق باشید!
