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

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

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

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

این افزونه تا کنون بیش از 10000 نصب فعال داشته و با آخرین نگارش وردپرس موجود سازگار است. که تب ها در وردپرس را به صورت آکاردئونی یا کشویی نمایش می دهد.
پس از نصب و فعال سازی افزونه، در منوی اصلی از مسیر 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: در صورتی که از کادر کشویی به صورت تب ( چند قسمتی) ، استفاده می کنید در این بخش می توانید انتخاب کنید که قسمت محتوای  این تب ها در وردپرس دارای خاصیت جمع شوندگی باشد یا خیر

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

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

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

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

پاینده باشید!!!

 

دانلود افزونه Accordions

دانلود صفحه افزونه

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

دیدگاهتان را بنویسید

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. سلام
    سلام خسته نباشین
    ببخشید مزاحمتون شدم
    بنده قبلا ار سایتتون افزونه accordions دانلود کردم و خیلیم عالی هستش
    این هفته اخیر من قسمت افزونه ها آپدیتش زدم ولی الان میخام محتویاتو تغیییر بدم ب من چیزی نشون نمیده
    سایت بنده banehoriginal.com
    بازرگانی اورجینال بانه
    اگه قسمت کولر گازی رو نگا کنیم نشون میده ولی برا ویرایش کلا مخفی هس و چیزی نمیتونم ببینم تو بخش مدیریت
    ممنون میشم منو راهنمایی کنین
    با تشکر. مجیدی از بانه

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

    • 7 سال عضو همیار وردپرس

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

    • نه منظورم اینه که مثلا میخام با استفاده از اچ دی ام ال یه دکمه یا یه جدول درست کنم به جایه اینکه جدولو نشون بده اصله کدو نشون میده وقتی منو هارو باز میکنم

  3. با سلام
    چجوری میشه تب ها رو راست به چپ کنیم؟؟؟

مطالب زیر را حتما بخوانید

    ایجاد آسان تب در وردپرس

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

دوره‌های آموزشی