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

ضعیفمتوسطخوببسیار خوبعالی
( 0 رای , میانگین : 0,00 از 5)
بارگذاری...

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

تب‌های رسپانسیو در وردپرس

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

ساخت تب ها با افزونه 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] را برای پایان بخشیدن به تب بندی قرار دهید. که علامت خاتمه تب بندی میباشد.

نتیجه کار

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

نکات قابل توجه: دقت کنید که یک خط خالی را از بالا و پایین هر کد کوتاه 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 را میتوان فعال کرد.

بارگذاری محتوای برگه یا نوشته ای خاص درون تب مورد نظر

نکته جالب این است که شما میتوانید محتویات نوشته ها یا برگه های خود را درون تب‌های رسپانسیو در وردپرس نیز فراخوانی کنید. برای این کار میتوان از گزینه target کمک گرفت.

ابتدا آدرس محتوای خود را کپی کنید سپس تبی که جهت نمایش محتویات انتخاب کرده اید را درنظر بگیرید و بعد از بسته شدن کروشه (در خط بعدی) آدرس محتوای خود را جایگذاری کرده سپس  در مقابل آن عبارت ?target=Tab-name را قرار دهید. این عبارت به معنای آن است که محتوای این آدرس را در تب ذکر شده، باز کن.

نکات مهم:

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

نتبجه عملکرد

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

خروجی در حالت تمام صفحه:

 و همچین هنگام تغییر عرض به صورت زیر خواهد بود:

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

برای استفاده از افزونه Tabby Responsive Tab جهت ساخت تب‌های رسپانسیو در وردپرس از دو شورت کد [tabby] و [tabbyending]کمک بگیرید. به این صورت که برای معرفی هر تب کد [tabby] را درج کرده و بعد از اتمام کار یکبار در انتهای کدنویسی عبارت[tabbyending]  را جهت اتمام تب بندی درج کنید. همچنین برای سفارشی سازی در استایل شیت های افزونه تغییرات خود را درج کنید. از درج هرگونه کاراکتر اضافی و فاصله خودداری کنید. درنهایت با این روش میتوانید تب‌های رسپانسیو در وردپرس را مطابق میل خود طراحی کنید.

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

دانلود افزونه tabby responsive tabs

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



شیرزادی
( عضو از 6 سال قبل )
  • 29 نوشته
  • 1 دیدگاه
  • 0 محصول
  • 0 دوره آموزشی
علاقه مند به طراحی سایت وردپرس

نظرات کاربران

ثبت دیدگاه

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

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

مطالب مرتبط



بازگردانی آدرس مطالب وردپرس با افزونه Regenerate post permalink

930
0
در سایت های وردپرس هنگام نگارش مطالب یا همان بخش نوشتن، یکی از بخش هایی که حائز اهمیت می باشد، بخش آدرس و ساختار لینک مطلب می باشد ...
جزییات بیشتر آموزش را بخوانید!

استفاده از اعداد برای نمایش آمار تصادفی در وردپرس با TF Random Number

1112
0
استفاده از ابزارهای مختلف در سایت‌هایی که خدماتی را به مشتریان خود ارائه می‌کنند، یکی از مواردی است که می‌توان با استفاده از آن، اعتماد کاربران را جلب ...
جزییات بیشتر آموزش را بخوانید!

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

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

معرفی بهترین افزونه‌های رسانه‌های اجتماعی

1311
0
در این آموزش به معرفی برخی از بهترین افزونه‌های رسانه‌های اجتماعی (Social Media) وردپرس خواهیم پرداخت.   ۱) EA Share Count EA Share Count سریع‌ترین و آسان‌ترین افزونه رسانه‌های اجتماعی در ...
جزییات بیشتر آموزش را بخوانید!

آموزش نحوه ستاره دار کردن مطالب در نتایج جستجو گوگل با افزونه وردپرس

1783
0
یکی از بهترین روش هایی که می توانید به کمک آن علاوه بر افزایش نرخ کلیک، به بهینه شدن سئوی وب سایت خود کمک کنید، ستاره دار کردن ...
جزییات بیشتر آموزش را بخوانید!

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

4297
0
آنالیز ترافیک سایت در وردپرس یکی از مهم ترین استراتژی هایی است که می تواند به بهبود سئوی سایت شما کمک کند. آیا می دانید روزانه، هفتگی یا ...
جزییات بیشتر آموزش را بخوانید!

امکان بارگذاری زیبای صفحات وردپرس

956
0
Loading Page with Loading Screen نام افزونه ای است که به شما این امکان را میدهد که یک صفحه پیش بارگذار کننده زیبا و حرفه ای برای وب ...
جزییات بیشتر آموزش را بخوانید!

نمایش شناسه مطالب در وردپرس

1497
0
با سلام خدمت شما دوستان و کاربران محترم سایت نوین وردپرس حتما شما تاکنون با افزونه هایی کار کردید که اون افزونه ها از شما شناسه یا همان ID ...
جزییات بیشتر آموزش را بخوانید!

دسته بندی مطالب

محصولات حرفه ای

جستجو کنید…

همکار ما شوید

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

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