ثبت‌نام ورود
خانه افزونه وردپرس ایجاد تب های رسپانسیو در وردپرس با Tabby Responsive Tabs

ایجاد تب های رسپانسیو در وردپرس با Tabby Responsive Tabs

ایجاد تب های رسپانسیو در وردپرس با Tabby Responsive Tabs

ایجاد تب های رسپانسیو در وردپرس با Tabby Responsive Tabs

به طور حتم ظاهر سایت برای تمام مدیران و کاربران مهم می باشد و سایتهایی که دارای محتوای بیشتری هستند اصولا با به کار بردن تب ها در آنها می توانید محتوایتان را با ظاهری زیبا و مرتب برای کاربران به نمایش بگذارید.

در گذشته افزونه افزودن تب بندی در نوشته ها و برگه های وردپرس را معرفی کردیم، امروزم یک افزونه کاربردی و کاملا رسپانسیو به شما توضیح خواهم داد.

معرفی و ویژگی افزونه Tabby Responsive Tabs

با افزونه Tabby Responsive Tabs به راحتی می توانید تب های رسپانسیو در وردپرس ایجاد کنید. و ظاهر سایت خود را به شکل دلخواه در آورید.

  • نمایش تب به صورت افقی
  • ایجاد تب آکاردئون با جی کوئری
  • پشتیبانی از چند مجموعه تب در یک صفحه
  • نمایش محتوا برگه یا نوشته در تب ها
  • در دسترس بودن محتوا و تب توسط کیبرد

نحوه کار با افرونه Tabby Responsive Tabs

در ابتدا مثل روال همیشه افزونه را نصب و فعال سازی کنید، پس از فعال سازی افزونه Tabby Responsive Tabs هیچ گزینه ای به پنل پیشخوان وردپرس اضافه نمی شود و تنظیماتی ندارد. این افزونه با دو شورتکد کار می کند و پارامترهای مختلفی دارد که تنها با به کار بردن پارامترها تب رسپانسیو ایجاد می کند، فقط نیاز است شورتکدها را به برگه یا نوشته خود اضافه و منتشر کنید و از نمایش تب ها لذت ببرید.

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

دو تا شورتکد [tabby] و [tabbyending] داریم، شورتکد [tabbyending] تنها یک بار استفاده می شود و فقط پس از آخرین تب نوشته می شود.

پارامترهای شورتکد [tabby]

حال چند تا پارامتر داریم که به صورت جداگانه نام می بریم و مثال می زنیم. اولین پارامتر title می باشد، مانند:

[“tabby title=”tabname]، این پارامتر نام تب را مشخص می کند که به جای tabname نام تب مورد نظرتون بنویسید.

[tabby title="زبانه 1"]

این تب تستی است.
[tabby title="زبانه 2"]

این تب تستی است.
[tabby title="زبانه 3"]

این تب تستی است.
[tabbyending]

نمایش تب های رسپانسیو

دومین پارامتر open می باشد، مانند:

[tabby title=”زبانه 3″ open=”yes”]، با این پارامتر می توانید مشخص کنید کدام تب در حین لود شدن صفحه باز بماند و تنها یک بار مورد استفاده می باشد یعنی در یک تب فقط می توانید این پارامتر استفاده کنید.

نمایش تب مورد نظر در حین لود شدن سایت

سومین پارامتر icon می باشد، مانند:

[tabby title=”زبانه 3″ icon=”cog”]، با این پارامتر می توانید آیکون دلخواه خود را کنار تب ها به نمایش بگذارید. آیکون ها را از fontawesome انتخاب و درج کنید. در این مثال cog مخفف چرخ دنده است آیکون به صورت چرخ دهنده نشان داده می شود.

نمایش آیکون کنار تب ها

نتیجه را در بالا مشاهده کردید. از این به بعد به راحتی می توانید تب های دلخواه خود را به صورت کاملا رسپانسیو در وردپرس نمایش دهید.

موفق و پیروز باشید.

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام میهن وردپرس عضو شوید.

سوالی دارید؟ از ما بپرسید

  1. کاربر مهمان کاربر مهمان ۲۱ بهمن ۱۳۹۷

    سلام
    مثل اینکه با وردپرس 5 سازگار نیست

  2. کاربر مهمان کاربر مهمان ۲۰ خرداد ۱۳۹۷

    با سلام مجدد
    با توجه به این در پوشه css این افزوه دو فایل tabby.css و tabby-print.css وجود دارد که به نظر کد float:right پیشنهادی شما باید در فایل اول که حاوی کدهای زیر است:
    /* —— wordpress.org/plugins/tabby-responsive-tabs/ —— */

    اضافه شود. با این فرض، لطفاً بفرمایید که برای راست چین شدن تب های 1 2 3 افزونه، این کد باید بطور مشخص در کدام یک از قسمت های فوق اضاف شود؟
    با سپاس

  3. کاربر مهمان کاربر مهمان ۲۴ فروردین ۱۳۹۷

    با سلام
    ضمن تشکر از آموزش شما
    چگونه می توان جهت تب ها را از چپ به راست تغییر داد.

  4. کاربر مهمان کاربر مهمان ۲۴ آذر ۱۳۹۶

    عکس و فیلم را چطوری میشه توی تب ها نمایش داد
    یا مثلا کلا محتویات یک پست را چطوری میشه توی یک تب نمایش داد؟

    • رضا حسینی راد رضا حسینی راد ۲۴ آذر ۱۳۹۶

      توی بخش ؛این تب تستی است.؛ می تونید شورتکد ویدیو یا صدا یا تصویر را قرار دهید