یکی از روش‌های مخفی یا مرتب کردن متن و پاراگراف‌ها در صفحات سایت، استفاده از المان‌های بازشدنی است که یکی از انواع آنها، المان آکاردئونی است. با کلیک روی المانی مثل دکمه یا تب و یا آیکون + و آیکون فولدر، متن و عکس پنهان شده به شکل کادر یا شکل‌های دیگر باز و نمایان می‌شود.
در این مقاله می‌خواهیم چند افزونه برای نرم‌افزار مدیریت سایت WordPress معرفی کنیم که قرار دادن متن پنهان به صورت منوی بازشونده یا Accordion یا همان ساز معروف آکاردئون را ساده میکنند. با ما باشید.
مزایای استفاده از المان آکاردئونی در مطالب و صفحات سایت‌ها
در سایت‌هایی که طراح و مدیر سایت تصمیم گرفته که صفحات و مقالات بسیار طولانی نباشند، از روش‌های مختلف برای کوتاه کردن صفحه یا مطلب استفاده می‌شود. یکی از روش‌ها استفاده از پلاگین‌ها یا افزونه‌های ساخت Accordion است که محتوا را مخفی میکنند و با کلیک روی دکمه یا متن و آیکونی، نوشته‌ها ظاهر می‌شود.
در این پلاگین‌ها علاوه بر استفاده از HTML ساده، از JavaScript برای متحرک‌سازی و نمایش محتوا استفاده شده و همین‌طور برخی دارای تنظیمات سفارشی استایل و حتی CSS اضافی هستند تا بتوانید به سادگی ظاهر المان آکاردئونی را با طراحی سایت خود هماهنگ کنید.
علاوه بر کوتاه‌تر کردن ارتفاع صفحه‌ی وب، استفاده از المان آکاردئون برای مرتب‌تر نمایش دادن محتوا و توضیحات مناسب است. به عنوان مثال می‌توانید چند عنوان یا هدینگ در صفحه قرار دهید که ویژگی‌های شاخص خدمات و محصولات شما را بیان میکنند و کاربر با توجه به سلیقه و اهمیتی که برای برخی موضوعات قائل می‌شود، روی یک عنوان کلیک می‌کند و فقط در مورد همان ویژگی مطالب و عکس‌ها را بررسی می‌کند.
همان‌طور که در تصویر زیر مشاهده می‌کنید، حتی می‌توان لیست سوالات متداول را به صورت آکاردئونی طراحی کرد. با کلیک روی هر سوال، پاسخ آن به صورت بازشونده، نمایان می‌شود.
البته می‌توانید به جای طراحی آکاردئونی از طراحی چند تب استفاده کنید و هر مورد را به صورت یک تب قرار دهید. به این ترتیب کاربر با کلیک کردن روی تب‌های مختلف، عکس و متن مربوط به همان تب را مشاهده می‌کند.
و صرف‌نظر از مقصودی که از استفاده از منوهای بازشونده و آکاردئونی دارید، در مخزن وردپرس چند افزونه‌ی مفید و قدرتمند برای این کار وجود دارد که در ادامه بررسی خواهیم کرد.
Accordion
نام اولین اولین افزونه دقیقاً Accordion است، نه بیشتر و نه کمتر!
با نصب کردن این پلاگین می‌توانید در صفحات و پست‌های وردپرس و حتی در فایل‌های قالب سایت وردپرسی خویش از آکاردئون‌های جالب و زیبا استفاده کنید. در واقع این افزونه چند شورت‌کد مفید برای استفاده در بخش‌های مختلف سایت دارد که کار شما را بسیار ساده می‌کند.
این افزونه از نظر طراحی نیز ریسپانسیو است و لذا در نمایشگر کوچک گوشی هم المان‌های آکاردئونی شما، نمایش خوبی خواهند داشت.
در پلاگین Accordion از فونت معروف آیکون‌ها که Font Awesome نام دارد استفاده شده و لذا می‌توانید در کنار عنوان منوهای بازشونده‌ای که می‌سازید، از آیکون‌های مرتبط با آن موضوع استفاده کنید که نمونه‌ی آن آیکون فولدر و شیپور و + و - و مانند آن است.
Accordion FAQ برای طراحی بخش سوال و پاسخ در وردپرس
افزونه‌ی بعدی Accordion FAQ است که با توجه به کلمه‌ی FAQ به معنی سوالات متداول، دقیقاً برای بخش پاسخ به سوالات متداول مشتریان یا بازدیدکنندگان سایت وردپرسی شما بهینه شده است.
این افزونه برای سادگی استفاده، از روش درگ و دراپ استفاده می‌کند. به این ترتیب اضافه کردن متن مخفی به صورت آکاردئونی در جای‌جای صفحات سایت، ساده است. به علاوه برای تغییر دادن ترتیب سوالات و هر نوع آیتم دیگری، می‌توانید به سادگی المان‌ها را به پایین یا بالای لیست جابجا کنید.
در افزونه‌ی Accordion FAQ وردپرس، تعدادی قالب یا تمپلیت هم وجود دارد که برای کاربری‌های مختلف مناسب است. می‌توانید رنگ‌بندی را به صورت دلخواه انتخاب کنید و همین‌طور از آیکون‌های فونت اوسام (تلفظ صحیح Awesome، آسام است) استفاده کنید. برای ریسپانسیو شدن المان‌های بازشو، از بوت‌استرپ استفاده شده و در مجموع طراحی پلاگین برای بارگذاری سریع صفحات، بهینه شده است.
طراحی منوهای بازشونده و جعبه‌های چند تب با Tab, Accordion and FAQ
پلاگین دیگری که برای طراحی کردن المان‌های آکاردئونی در وردپرس موجود است، پلاگین Tab, Accordion and FAQ است که با توجه به نامش، نه تنها برای منوهای بازشونده‌ی آکاردئونی بلکه برای ساخت جعبه‌های محتوا دارای چند تب نیز عالی است.
با این پلاگین می‌توانید تب‌ها و آکاردئون‌های متحرک زیبا در WordPress و بخش‌های مختلف آن مثل پست‌ها، صفحات و ستون کناری یا سایدبار بسازید. طراحی به صورت افقی و عمودی و متحرک امکان‌پذیر است و در همه‌ی حالت‌ها، طراحی ریسپانسیو است. لذا از جهت به هم ریختن چیدمان و بدریخت شدن در نمایشگر گوشی‌ها و تبلت‌ها، خیالتان راحت است.
در این افزونه چند نوع انیمیشن و قالب آماده برای طراحی عناصر در نظر گرفته شده و می‌توانید با روش ساده‌ی درگ و دراپ، طراحی خود را تکمیل کنید.
Arconix Shortcodes و مجموعه‌ای از شورت‌کدهای کاربردی برای وردپرس
افزونه‌ی Arconix Shortcodes یکی از افزونه‌هایی است که با ارایه کردن تعداد زیادی Shortcode برای کارهای مختلف، مدیریت سایت وردپرسی را ساده می‌شود. یکی از شورت‌کدهای آن نیز المان‌های چند تبی و المان‌های آکاردئونی است.
طراحی این المان‌ها ریسپانسیو و زیباست. بنابراین با نصب کردن این پلاگین، می‌توانید از تعداد زیادی Shortcode مفید و جالب استفاده کنید تا مطالب و صفحات سایت وردپرسی شما، از حالت بی‌روح و یکنواخت خارج شود.
Easy Accordion و ساخت آسان منوهای بازشونده
افزونه‌ی بعدی که مختص طراحی آکاردئون است، Easy Accordion نام دارد.
با استفاده از این افزونه هم می‌توانید به سرعت منوهای بازشونده برای نمایش محتوای اضافی طراحی کنید و در بخش‌های مختلف سایت وردپرسی و حتی فایل‌های قالب سایت استفاده کنید.
البته این پلاگین مفید دارای نسخه‌ی پولی هم هست که در آن قابلیت‌های اضافی مثل شورت‌کدهای پیشرفته‌تر و نمایش دسته‌ها و برچسب‌ها و طبقه‌بندی‌های سفارشی سایت‌های وردپرسی به صورت آکاردئون نیز وجود دارد.
Shortcodes Ultimate و ده‌ها شورت‌کد کاربردی برای طراحی صفحات و مطالب
یکی دیگر از افزونه‌های همه‌فن‌حریف برای زیباسازی مطالب و صفحات وردپرس، افزونه‌ی شورت‌کد آلتیمیت است. این افزونه هم با تعداد زیادی شورت‌کد برای طراحی کردن انواع المان‌ها، سایت و مقالات شما را از یکنواختی خارج می‌کند.
یکی از انواع شورت‌کد در پلاگین معروف و محبوب Shortcodes Ultimate، جعبه‌های چند تبی به صورت افقی یا عمودی و با طراحی ریسپانسیو است. المان دیگر منوهای بازشونده یا آکاردئونی است.
افزونه‌ی Shortcodes Ultimate یکی از افزونه‌های برتر وردپرس برای استفاده از شورت‌کدهای متنوع است و مرتباً بروزرسانی می‌شود. لذا با قالب‌های مدرن و جالب WordPress سازگاری بسیار خوبی دارد.
Smooth Accordion
افزونه‌ی بعدی لیست ما، Smooth Accordion نام دارد.
با نصب کردن این افزونه، آیکونی به ادیتور وردپرس اضافه می‌شود که با کلیک کردن روی آن، می‌توانید سریعاً المان‌های آکاردئونی خود را طراحی و در مطالب قرار دهید.
انتخاب رنگ پس‌زمینه، استفاده از استایل‌های سفارشی و دلخواه و تغییر چیدمان محتویات المان آکاردئونی با پلاگین Smooth Accordion به سادگی انجام می‌شود.
wpbeginnerسیاره‌ی آی‌تی