تب بندی محتوا در وردپرس با افزونه رایگان

اگه صفحه‌تون طولانیه و چند بخش مرتبط داره، نمایش همه اطلاعات پشت سر هم می‌تونه کاربر رو خسته و گیج کنه. با تب‌ها می‌تونید این بخش‌ها رو مرتب نگه دارید تا کاربر با یک کلیک، فقط همون محتوایی رو ببینه که دنبالش می‌گرده. مثلاً مشخصات محصول، توضیحات، شرایط ارسال و سؤال‌های رایج می‌تونن هرکدوم تب جداگانه‌ای داشته باشن.

توی این آموزش، تب بندی محتوا در وردپرس رو با افزونه رایگان Tabby Responsive Tabs یاد می‌گیرید. اول می‌بینیم که آیا خود وردپرس چنین قابلیتی داره یا نه. بعد افزونه رو نصب می‌کنیم و با شورت‌کد، یعنی یک کد کوتاه برای نمایش قابلیت‌های آماده، چند تب واکنش‌گرا می‌سازیم. در ادامه هم سراغ پارامترهای کاربردی افزونه، سازگاری اون و روش افزودن آیکون می‌ریم.

تب بندی محتوا در وردپرس کجا به کارتون میاد؟

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

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

واکنش‌گرا بودن تب‌ها هم مهمه. واکنش‌گرا یعنی ظاهر تب‌ها با اندازه صفحه موبایل یا تبلت هماهنگ می‌شه. Tabby Responsive Tabs در صفحه‌های باریک، تب‌ها رو به شکل آکاردئونی نشون می‌ده تا کار کردن با اون‌ها روی موبایل راحت‌تر باشه.

آیا خود وردپرس بلوک تب داره؟

در زمان به‌روزرسانی این مقاله، ویرایشگر اصلی وردپرس بلوک اختصاصی Tabs برای ساخت چند تب کنار هم نداره. بعضی پوسته‌ها یا افزونه‌های صفحه‌ساز چنین بلوکی رو اضافه می‌کنن، ولی این قابلیت بین ابزارهای پایه وردپرس نیست. اگه هنوز با بلوک‌ها آشنا نیستید، اول راهنمای ویرایشگر گوتنبرگ وردپرس رو ببینید.

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

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

آشنایی با افزونه رایگان Tabby Responsive Tabs

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

طبق اطلاعات صفحه رسمی افزونه در زمان بررسی این مقاله، نسخه 1.4.1 بیشتر از ۱۰ هزار نصب فعال داره و سازگاری ثبت‌شده اون تا وردپرس 6.8.11 هست. مخزن وردپرس هم هشدار می‌ده که این افزونه با سه نسخه اصلی اخیر وردپرس آزمایش نشده. پس بهتره قبل از نصب روی سایت اصلی، اون رو روی یک نسخه آزمایشی از سایتتون امتحان کنید و مطمئن بشید با پوسته، نسخه PHP و افزونه‌های دیگه تداخل نداره.

نسخه رایگان افزونه این قابلیت‌های اصلی رو در اختیارتون می‌ذاره:

• تب‌ها رو در صفحه‌های بزرگ به‌شکل افقی نشون می‌ده
• در صفحه‌های باریک، تب‌ها رو به حالت آکاردئونی تبدیل می‌کنه
• اجازه می‌ده چند مجموعه تب داخل یک صفحه بسازید
• می‌تونید متن، تصویر و محتوای معمول وردپرس رو داخل تب‌ها بذارید
• کاربر می‌تونه با کیبورد بین تب‌ها جابه‌جا بشه
• می‌تونید برای تغییر ظاهر تب‌ها، کلاس CSS اضافه کنید

نصب و تنظیم افزونه Tabby Responsive Tabs

از پیشخوان وردپرس وارد مسیر «افزونه‌ها ← افزودن افزونه تازه» بشید. عبارت «Tabby Responsive Tabs» رو جست‌وجو کنید و بعد روی «هم‌اکنون نصب نمایید» و «فعال‌کردن» بزنید. اگه برای این کار به راهنمای بیشتری نیاز دارید، آموزش نصب افزونه در وردپرس رو ببینید.

بعد از فعال‌سازی، صفحه افزونه رو در مسیر «تنظیمات ← Tabby» می‌بینید. توی این بخش گزینه‌ای برای کنترل بارگذاری شیوه‌نامه پیش‌فرض افزونه دارید. شیوه‌نامه یا CSS همون کدیه که ظاهر تب‌ها رو مشخص می‌کنه. اگه طراح سایتتون ظاهر تب‌ها رو با CSS اختصاصی ساخته، می‌تونید بارگذاری ظاهر پیش‌فرض رو از همین قسمت مدیریت کنید. اگه مطمئن نیستید، بهتره تنظیم پیش‌فرض رو دست نزنید.

ساخت تب در ویرایشگر وردپرس

این افزونه بلوک اختصاصی نداره و با دو شورت‌کد اصلی [tabby] و [tabbyending] کار می‌کنه. شورت‌کد اول، شروع هر تب رو مشخص می‌کنه و شورت‌کد دوم مجموعه تب‌ها رو می‌بنده. شورت‌کد [tabbyending] فقط یک بار، بعد از محتوای آخرین تب قرار می‌گیره.

برای ساخت تب، نوشته یا برگه دلخواهتون رو باز کنید. روی دکمه افزودن بلوک بزنید و بلوک «کد کوتاه» یا Shortcode رو پیدا کنید. شورت‌کد تب اول رو داخل این بلوک بذارید و بعد محتوای اون تب رو با بلوک‌های معمولی وردپرس اضافه کنید. همین مراحل رو برای تب‌های بعدی تکرار کنید. در آخر هم یک بلوک کد کوتاه دیگه بسازید و [tabbyending] رو داخلش بذارید.

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

یک نمونه ساده با سه تب

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

محتوای زبانه اول

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

محتوای زبانه دوم

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

محتوای زبانه سوم

[tabbyending]

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

این محتوای تب اول هست.

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

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

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

این محتوای تب سوم هست.

[tabbyending]

یادتون نره که داخل شورت‌کد باید از کوتیشن مستقیم " استفاده کنید. کوتیشن‌های خمیده‌ای که گاهی همراه متن از نرم‌افزارهای ویرایش متن کپی می‌شن، ممکنه شورت‌کد رو خراب کنن.

پارامترهای شورت‌کد Tabby

پارامتر، گزینه‌ایه که داخل شورت‌کد می‌ذارید تا رفتار یا ظاهر تب رو تغییر بدید. در ادامه با کاربردی‌ترین پارامترهای این افزونه آشنا می‌شید.

انتخاب عنوان تب با Title

پارامتر title اسم تب رو مشخص می‌کنه. می‌تونید به‌جای «مشخصات محصول»، هر عنوان کوتاه و روشنی که می‌خواید بنویسید:

[tabby title="مشخصات محصول"]

باز کردن یک تب با Open

اگه می‌خواید یک تب موقع باز شدن صفحه فعال باشه، مقدار open="yes" رو به همون تب اضافه کنید. بهتره در هر مجموعه فقط برای یکی از تب‌ها از این پارامتر کمک بگیرید.

[tabby title="مشخصات محصول" open="yes"]

افزودن کلاس سفارشی با Class

پارامتر class یک کلاس CSS به تب اضافه می‌کنه. این گزینه وقتی به کارتون میاد که می‌خواید طراح سایت، ظاهر یک تب رو با CSS تغییر بده.

[tabby title="مشخصات محصول" class="product-details"]

نمایش آیکون با Icon یا Ico

افزونه برای افزودن آیکون، پارامترهای icon و ico رو در اختیارتون می‌ذاره. پارامتر ico وقتی کاربرد داره که می‌خواید نام آیکون رو بدون پیشوندهای Font Awesome وارد کنید.

[tabby title="تنظیمات" icon="cog"]

نکته مهم اینه که خود Tabby Responsive Tabs فایل‌های Font Awesome رو بارگذاری نمی‌کنه. پس این نمونه فقط وقتی آیکون رو نشون می‌ده که پوسته، یک افزونه دیگه یا ابزار جانبی مناسبی، فایل‌های Font Awesome رو از قبل به سایت اضافه کرده باشه. برای ساخت تب‌های معمولی اصلاً به آیکون نیاز ندارید و می‌تونید این پارامتر رو کنار بذارید.

تعیین اولویت با Priority

پارامتر priority برای کنترل ترتیب پردازش شورت‌کد در شرایط خاص به کار می‌ره و بیشتر کاربران بهش نیاز ندارن. اگه تب‌ها داخل شورت‌کد یا محتوای افزونه دیگه درست پردازش نمی‌شن، می‌تونید بعد از گرفتن نسخه پشتیبان، این پارامتر رو در محیط آزمایشی بررسی کنید.

باز کردن تب مشخص از طریق آدرس با Target

این افزونه از پارامتر آدرس target هم پشتیبانی می‌کنه. با این قابلیت می‌تونید لینکی بسازید که بعد از باز شدن صفحه، تب مشخصی رو فعال کنه. چون مقدار هدف باید با شناسه ساخته‌شده برای همون تب هماهنگ باشه، بهتره لینک نهایی رو هم روی موبایل و هم روی دسکتاپ امتحان کنید.

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

• صفحه رو روی موبایل، تبلت و دسکتاپ ببینید.
• عنوان تب‌ها رو کوتاه بنویسید تا در صفحه‌های کوچک به هم نریزن.
• فقط برای یک تب از open="yes" استفاده کنید.
• بعد از آخرین تب حتماً [tabbyending] رو بذارید.
• اگه ظاهر تب‌ها خراب شد، تداخل CSS پوسته و افزونه‌های دیگه رو در یک محیط آزمایشی بررسی کنید.
• قبل از به‌روزرسانی افزونه یا وردپرس، از سایتتون نسخه پشتیبان بگیرید.

جمع‌بندی

برای تب بندی ساده محتوا، نسخه رایگان Tabby Responsive Tabs امکانات اصلی موردنیازتون رو در اختیارتون می‌ذاره. بااین‌حال، بهتره هشدار سازگاری مخزن رسمی رو جدی بگیرید. قبل از نصب افزونه روی یک سایت مهم، تب‌ها رو در نسخه آزمایشی سایتتون بسازید و عملکردشون رو با دقت بررسی کنید.

برای شروع فقط کافیه افزونه رو نصب کنید، برای هر تب یک شورت‌کد [tabby] بذارید و مجموعه رو با [tabbyending] ببندید. بعد صفحه رو روی موبایل و دسکتاپ بررسی کنید تا مطمئن بشید عنوان‌ها، محتوا و حالت آکاردئونی تب‌ها درست نمایش داده می‌شن.

سؤالات متداول درباره تب بندی محتوا در وردپرس

تیم تولید محتوا

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