نمایش تب ها به صورت کشویی در وردپرس با Accordions

مهر دیزاین :

تب ها در وردپرس

سلام دوستان؛
حتماً مشاهده کرده اید که در بعضی از قسمت های یک وب سایت، علی الخصوص در قسمت سوالات متداول، برای ارائه ی محتوا از منو ها و تب ها در وردپرس استفاده می شود. که این موضوع منجر به افزایش زیبایی بصری وب سایت و بهبود تجربه ی کاربری مخاطب خواهد شد.
تا به امروز افزونه های متعددی برای این منظور در مهر دیزاین معرفی شده است که هر کدام قابلیت ها و امکانات خاصی را ارائه می دهند.
امروز قصد داریم افزونه ای را معرفی کنیم که امکانات جالبی برای طراحی تب ها در وردپرس به صورت زیبا و کاربر پسند، در اختیار
شما دوستان عزیز قرار می دهد.

نمایش تب ها به صورت کشویی در وردپرس با Accordions

این افزونه تا کنون بیش از ۱۰۰۰۰ نصب فعال داشته و با آخرین نگارش وردپرس موجود سازگار است. که تب ها در وردپرس را به صورت آکاردئونی یا کشویی نمایش می دهد.
پس از نصب و فعال سازی افزونه، در منوی اصلی از مسیر New Accordions<Accordions وارد محیط تنظیمات افزونه می شویم. تب های متعددی وجود دارند که در ادامه به توضیح گزینه های موجود در هر کدام می پردازیم.

آموزش تنظیمات افزونه ی Accordions

در ابتدای صفحه بخشی وجود دارد که می توانید عنوان کادر کشویی را در آن وارد کنید.

Shortcode

در این تب چهار کد به صورت مجزا قرار داده شده که در ادامه به محل استفاده ی هر کدام اشاره می کنیم.

قسمت اول: تب کشویی ساده

کد اول: شورت کدی که می توانید با قرار دادن آن در صفحه یا نوشته ی مدنظر خود، از این کادر کشویی استفاده کنید.
کد دوم: کدی به زبان PHP که با قرار دادن آن در فایل های مرتبط قالب خود، می توانید از این کادر کشویی استفاده کنید.

قسمت دوم: تب کشویی چند قسمتی

کد اول: شورت کدی که می توانید با قرار دادن آن در صفحه یا نوشته ی مدنظر خود، از این کادر کشویی استفاده کنید.
کد دوم: کدی به زبان PHP که با قرار دادن آن در فایل های مرتبط قالب خود، می توانید از این کادر کشویی استفاده کنید.

تب Accordion Options

Collapsible: در این قسمت می توانید تعیین کنید که کادر کشویی دارای خاصیت جمع شوندگی باشد یا خیر
heightStyle: تعیین استایل ارتفاع که در صورت انتخاب گزینه ی Content، متنی که برای نمایش در این قسمت در نظر گرفته اید بدون وجود اسکرول بار نمایش داده می شود. اما در صورت انتخاب گزینه ی Filll، اسکرول بار در قسمت محتوا نمایش داده خواهد شد.
Activate event: رویداد فعال سازی که می تواند Click (کلیک کردن) یا Mouseover (حرکت موس بر روی آیتم) باشد.

 

تب Style

Themes: در این قسمت می توانید نوع قالب تب کشویی را انتخاب کنید.

Container options

Text Align: انتخاب جهت تراز متن
Padding: انتخاب حاشیه های متن از مرز های کادر یا تب بر حسب پیکسل
Background color: انتخاب رنگ پس زمینه
Background image: انتخاب تصویر پس زمینه

Icon set

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

Plus Icon: انتخاب آیکون بسته شدن
Minus Icon: انتخاب آیکون باز شدن
Icon color: انتخاب رنگ آیکون
Icon font size: تعیین اندازه ی فونت آیکون برحسب پیکسل

Accordions Header

در این قسمت می توانید تنظیمات مربوط به قسمت Header (سربرگ) تب های کشویی را انجام دهید.

Default Background Color: انتخاب رنگ پس زمینه ی پیش فرض
Active Background Color: انتخاب رنگ پس زمینه ی حالت فعال (حالتی که کادر مورد نظر توسط کاربر انتخاب شده است و محتوای آن در حال  نمایش است.)
Accordions Header Font Color: انتخاب رنگ فونت Header (سربرگ)
Accordions Header Font Size: انتخاب اندازه ی فونت Header (سربرگ)  بر حسب پیکسل

Accordions Content

در این قسمت می توانید تنظیمات مربوط به محتوای کادر کشویی را انجام دهید.

Accordions Content Font Color: انتخاب رنگ فونت محتوا
Accordions Content Font Size: انتخاب اندازه ی فونت محتوا
Accordions Content Background Color: انتخاب رنگ پس زمینه ی محتوا

تب Content

در این قسمت می توانید متن Header و محتوای تب ها در وردپرس به صورت کشویی در قسمت های مورد نظر وارد کنید. برای اضافه کردن موارد جدید به
کادر کشویی می توانید از دکمه ی Add استفاده کنید.

تب Custom CSS

در صورت آشنایی با CSS، در این قسمت می توانید کد مدنظر خود را برای ایجاد یک استایل سفارشی وارد کنید.

تب Tab Options

Collapsible: در صورتی که از کادر کشویی به صورت تب ( چند قسمتی) ، استفاده می کنید در این بخش می توانید انتخاب کنید که قسمت محتوای  این تب ها در وردپرس دارای خاصیت جمع شوندگی باشد یا خیر

در انتها بر روی انتشار کلیک کنید تا کادر کشویی منتشر شود.

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

نتیجه به صورت زیر خواهد بود.

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

صفحه افزونه

 

ارائه شده توسط گروه طراحی مهر


پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *