افزونه Accordion FAQ

افزونه Accordion FAQ

افزونه Accordion FAQ یکی از بهترین افزونه های وردپرس برای نمایش آکاردئونی سوالات متداول است که مشکلات بازدیدکنندگان و خوانندگان سایت را به صورت پرسش و پاسخ نشان می دهد.از سری مقاله های آموزش رایگان طراحی سایت امروز به آموزش افزونه Accordion FAQ می پردازیم.

این افزونه از استایل محبوب آکاردئونی برای صفحات FAQ استفاده می کند که در آن پاسخ ها به صورت پیش فرض پنهان بوده و هنگامی که بازدیدکننده روی آیکون کنار سوال کلیک می کند، باز می شود.

افزونه Accordion FAQ که یکی از بهترین افزونه های سوالات متداول وردپرس است کاملاً رسپانسیو بوده و برای صفحات کوچک موبایل و تبلت مناسب است.

?برخی از دیگر ویژگی های این افزونه عبارت است از:

• ساخت تعداد نامحدود آکاردئون در هر جایی از سایت که بخواهید
• سازنده کشیدن و رها کردن برای مرتب سازی پرسش و پاسخ ها
• آیتم های قابل کشیدن
• استفاده از شورت کد
• فیلد ورودی بسیار جذاب برای محتوای آکاردئون ها
• گزینه های رنگ نامحدود
• فریم ورک مبتنی بر بوت استرپ
• و بسیاری ویژگی های دیگر

❇️آموزش ساخت پرسش و پاسخ آکاردئونی

ابتدا افزونه را دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید.

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه، منوی جدیدی به نام Responsive Accordion در پیشخوان وردپرس نشان داده می شود. با کلیک بر روی این منو صفحه ای مشابه شکل زیر برای شما باز می شود.

در این صفحه می توانید تمام پرسش و پاسخ های آکاردئونی ساخته شده با افزونه Accordion FAQ را مشاهده کنید.

برای ساخت پرسش و پاسخ آکاردئونی جدید روی دکمه Add New Accordion کلیک کنید. یا در پیشخوان وردپرس به مسیر Responsive Accordion » Add New Accordion کلیک کنید. صفحه ای مشابه شکل زیر مشاهده خواهید کرد.

در باکس “افزودن عنوان” یک عنوان برای پرسش و پاسخ مورد نظر خود وارد کنید.

در نسخه رایگان افزونه Accordion FAQ تنها یک قالب برای ساخت پرسش و پاسخ ها ارائه شده است. برای دریافت قالب های بیشتر باید نسخه Pro افزونه را خریداری کنید. در نسخه Pro این افزونه 8 قالب طراحی مختلف عرضه شده است.

حال نوبت به ساخت پرسش و پاسخ ها می رسد. در افزونه Accordion FAQ دو پرسش و پاسخ به صورت پیش فرض وجود دارد که باید آنها را ویرایش کنید.

?Accordion Title: در قسمت Accordion Title متن پرسش را وارد کنید.

?Accordion Description: در این قسمت متن پاسخ را وارد کنید.

با کلیک بر روی باکس Use WYSIWYG Editor صفحه ویرایشگر Accordion مشابه ویرایشگر کلاسیک وردپرس به شکل زیر برای شما باز می شود.

شما در این صفحه می توانید متن پاسخ و توضیحات را استایل دهی کرده و به آن تصویر و لینک اضافه کنید. سپس در انتهای صفحه روی دکمه Ok کلیک کنید.

?Accordion Icon: در این قسمت می توانید یک آیکون انتخاب کنید. این آیکون در باکس پرسش و در کنار آن نشان داده می شود.

?Display Above Icon: در این قسمت می توانید انتخاب کنید که آیکون انتخاب شده در قسمت Accordion Icon نشان داده شود یا خیر. اگر Yes را قرار دهید، آیکون نشان داده می شود.

در انتهای باکس یک آیکون سطل زباله قرار دارد که با کلیک بر روی آن می توانید پرسش و پاسخ ایجاد شده را پاک کنید.

شما می توانید با کلیک بر روی دکمه Add New Accordion به هر تعداد که بخواهید پرسش و پاسخ آکاردئونی ایجاد کنید. همچنین با کلیک بر روی دکمه Delete All می توانید همه آکاردئون های ایجاد شده را پاک کنید.

پرسش و پاسخ های آکاردئونی ایجاد شده را می توانید با کشیدن و رها کردن مجدداً مرتب کنید.

با اسکرول کردن به پایین صفحه باکسی به نام Accordion Shortcode را مشاهده خواهید کرد.

در این باکس می توانید شورت کد ایجاد شده توسط افزونه Accordion FAQ را مشاهده کرده و آن را کپی کنید. شما می توانید شورت کد کپی شده را در هر نوشته یا برگه ای که می خواهید بخش سوالات متداول داشته باشد، وارد کنید.

افزونه Accordion FAQ یک باکس Custom Css در اختیار شما قرار می دهید که با استفاده از آن می توانید کدهای CSS سفارشی خود را وارد کرده و بخش سوالات متداول سایت خود را شخصی سازی کنید.

توجه داشته باشید که کدهای CSS را بدون تگ <style></style> وارد کنید.

در سمت چپ صفحه باکس هایی قرار دارد که در آنها می توانید تنظیمات افزونه Accordion FAQ را پیکربندی کنید. در ادامه آموزش به بررسی این تنظیمات می پردازیم.

❇️تنظیمات افزونه Accordion FAQ

?Display Accordion Section Title: در این قسمت می توانید انتخاب کنید که عنوان بخش پرسش و پاسخ آکاردئون نمایش داده شود یا خیر.

?Accordion Open/Close Icon Alignment: در این بخش می توانید محل قرارگیری آیکون +/- که مربوط به باز و بسته کردن آکاردئون است را در سمت راست (Right) یا چپ (left) تنظیم کنید.

?Display open Close Icon: اگر می خواهید آیون +/- مربوط به باز و بسته کردن آکاردئون نمایش داده نشود، دکمه موجود در این بخش را روی No قرار دهید.

?Display Accordion Title Font Icon: در این بخش با انتخاب No می توانید آیکون نشان داده شده در کنار پرسش را پنهان کنید.

?Enable Accordion Radius: در این بخش می توانید گرد شدن گوشه های باکس پرسش و پاسخ آکاردئونی را غیرفعال کنید. کافی است دکمه را روی حالت No قرار دهید.

?Enable Accordion Margin/Space: در این بخش با انتخاب No می توانید فضای موجود بین پرسش/پاسخ ها را از بین ببرید. یعنی هیچ فاصله ای بین پرسش/پاسخ ها وجود نداشته باشد.

?Enable Toggle/Collapse: اگر این گزینه را در حالت Yes قرار دهید می توانید همزمان همه آکاردئون ها را باز نگه دارید. در غیر این صورت با باز شدن یکی، آکاردئون قبلی بسته می شود.

?Display Accordion Border: در این قسمت از تنظیمات افزونه Accordion FAQ می توانید انتخاب کنید که مرز آکاردئون ها نشان داده نشود.

?Expand/Collapse Accordion Option On Page Load: در این قسمت می توانید انتخاب کنید که هنگام بارگذاری صفحه چه اتفاقی بیفتد. گزینه هایی که در این بخش در اختیار شما قرار دارد عبارتند از:

• اولین آکاردئون باز باشد.
• تمام آکاردئون ها باز باشند.
• تمام آکاردئون ها بسته/پنهان باشند.

?Accordion Styles: در این بخش می توانید یکی از سه استایل Simple، Soft و Noise را انتخاب کنید.

?Accordion Title Background Colour: در این قسمت می توانید رنگ پس زمینه قسمت پرسش را انتخاب کنید.

?Accordion Title/Icon Font Colour: در این بخش می توانید رنگ فونت قسمت پرسش آکاردئون و آیکون آن را انتخاب کنید.

?Accordion Description Background Colour: در این قسمت می توانید رنگ پس زمینه قسمت پاسخ را انتخاب کنید.

?Accordion Description Font Colour: در این باکس می توانید رنگ فونت قسمت پاسخ را انتخاب کنید.

?Title/Icon Font Size: در این بخش می توانید اندازه فونت قسمت پرسش و آیکون آن را انتخاب کنید.

?Description Font Size: در این قسمت می توانید اندازه فونت قسمت پاسخ را انتخاب کنید.

بقیه تنظیمات موجود در این صفحه مربوط به نسخه Pro افزونه Accordion FAQ است و در این آموزش از آنها صرف نظر می کنیم.

پس از اعمال تنظیمات مورد نظر خود روی دکمه انتشار کلیک کنید.

سپس شورت کد پرسش و پاسخ های خود را در یک نوشته یا برگه جدید یا یکی از نوشته ها یا برگه های موجود در سایت که می خواهید بخش سوالات متداول خود را در آن قرار دهید، وارد کنید.

توجه داشته باشید که در ویرایشگر گوتنبرگ وردپرس باید این کار را از طریق بلوک کد کوتاه انجام دهید. با انتشار نوشته یا برگه می توانید بخش پرسش و پاسخ خود را ببینید.