خانه / افزونه ها / آموزش ساخت تب واکنشگرا در وردپرس

آموزش ساخت تب واکنشگرا در وردپرس

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

تب های رسپانسیو یا واکنشگرا در وردپرس

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

ساخت تب ها با افزونه Tabby Responsive Tabs

این افزونه امکانات خوب و جالبی را به شما ارائه میدهد  مانند :

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

چگونه با این افزونه کار کنیم

 

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

عملکرد افزونه

این افزونه با کمک شورت کد ها که امروزه خیلی در افزونه های مختلف پر کاربرد است تب های شما را نمایش میدهد .دو نوع شورت کدی که این افزونه ارائه میدهد :

 [tabby] و [tabbyending]

شورت کد [tabby] برای معرفی تب ها و شورت کد [tabbyending] یکبار در انتهای کدهای شما بعنوان کد پایانی درج میشود.

برای شورت کد [tabby] چندین پارامتر وجود دارد که در ادامه تک تک آن ها را بررسی خواهیم کرد.

شروع کار

برای تهیه تب های رسپانسیو در وردپرس ابتدا کد [“tabby title = “tabname] را درج کنید و نام تب مورد نظر خود را به جای tabname جایگزین کنید.
به عنوان مثال قطعه کد زیر سه تب را طراحی میکنید.

نکته: مطمئن شوید که هر برچسب های <code> یا <pre> اضافی حذف شوند.

 [“tabby title = “اولین برگه]

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

 [“tabby title = “Second Tab ]

 اینجا محتوای تب دوم قرار میگیرد.

 [“tabby title = “third Tab]

 محدودیتی در ایجاد تب ها ندارید. این محتوای تب سوم است.

 [tabbyending]

و درآخر شورت کد [tabbyending] را برای پایان بخشیدن به تب بندی قرار دهید. که علامت خاتمه تب بندی میباشد.

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

نتیجه کار

و در نهایت خروجی حاصل از تب های رسپانسیو در وردپرس مطابق تصویر زیر خواهدبود:

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

همانطور که در عکس ها میبینید ظاهر تب ها مشکل دارند و فلش های تب ها بر روی نام تب ها قرار گرفته و یا در حالت غیر رسپانسیو اسم تب ها سمت چپ صفحه قرار گرفته است ، برای رفع این مشکل باید از سی اس اس سفارشی استفاده بنمایید.

 برای تغییر ظاهر تب های رسپانسیو در وردپرس، دو روش وجود دارد:

  1. استفاده از افزونه های کمکی
  2. استفاده از  css برای سفارشی سازی به سبک و رنگ دلخواه

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

  1. پارامتر title

همان طور که در مثال قبلی ذکر شد، برای هر تب یک شورت کد [tabby] در نظر میگیریم و درون آن  پارمتر title را جهت تعیین نام تب خود را مینویسیم. مانند نمونه زیر:

[“tabby title=”Tab name]

  1. پارامتر open

به صورت پیش فرض اولین برگه در سمت چپ پنل باز است و هنگام لود شدن صفحه کاربر با آن مواجه میشود. برای تغییر تب فعال و یا باز، از پارمتر open با مقدار yes میتوان کمک گرفت. مانند نمونه زیر:

[“tabby title=”Tab name” open=”yes]

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

 

جمع بندی نهایی

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

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

<?PHP echo do_shortcode(['shortcode'])?>

 

دانلود افزونه ساخت تب های واکنشگرا Tabby Responsive Tabs

 

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

همچنین ببینید

افزونه آمارگیر وردپرس با قابلیت ارسال اس ام اس آمار

شهر تم برای شما اینبار افزونه آمارگیر حرفه ای و دقیق  وردپرس را آماده کرده …

پاسخ دهید

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