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

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

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

تب در وردپرس چیه و چه زمانی به کارتون میاد؟

تب یا Tab یک بخش تعاملی با چند عنوانه. وقتی یکی از عنوان‌ها رو انتخاب می‌کنید، محتوای مربوط به همون بخش نشون داده می‌شه. مثلاً می‌تونید اطلاعات یک محصول رو در تب‌های «معرفی»، «مشخصات» و «روش استفاده» قرار بدید.

تب‌بندی چطور محتوای مرتبط رو مرتب و جمع‌وجور می‌کنه؟

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

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

چه محتواهایی برای نمایش در تب مناسب هستن؟

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

چه زمانی بهتره سراغ تب‌بندی نرید؟

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

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

ساخت تب در وردپرس بدون افزونه

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

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

قبل از شروع، نسخه وردپرس و نوع ویرایشگر رو بررسی کنید

از پیشخوان وارد «ابزارها ← سلامت سایت ← اطلاعات» بشید و نسخه وردپرس رو ببینید. بهتره قبل از هر تغییری، وردپرس و افزونه‌هاتون رو به یک نسخه پایدار و سازگار به‌روزرسانی کنید. گرفتن نسخه پشتیبان رو هم فراموش نکنید.

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

بلوک Tabs رو به نوشته یا برگه اضافه کنید

1. از پیشخوان وارد «نوشته‌ها» یا «برگه‌ها» بشید.
2. یک نوشته یا برگه تازه بسازید یا یکی از موارد قبلی رو برای ویرایش باز کنید.
3. در جایی که می‌خواید تب نمایش داده بشه، روی دکمه «+» کلیک کنید.
4. در کادر جست‌وجوی بلوک‌ها، Tabs یا «تب‌ها» رو بنویسید.
5. بلوک Tabs رو انتخاب کنید تا به صفحه اضافه بشه.

عنوان و محتوای هر تب رو وارد کنید

روی عنوان اولین تب کلیک کنید و یک اسم کوتاه مثل «توضیحات» بنویسید. بعد داخل قسمت محتوای همون تب کلیک کنید. حالا می‌تونید بلوک پاراگراف، فهرست، تصویر، دکمه یا بلوک‌های دیگه رو داخلش بذارید.

همین مراحل رو برای تب‌های بعدی هم انجام بدید. عنوان هر تب باید روشن کنه که کاربر بعد از بازکردن اون چه چیزی می‌بینه. عنوان‌های مبهمی مثل «بیشتر» یا «اطلاعات» معمولاً انتخاب خوبی نیستن.

یک تب تازه بسازید یا تب اضافی رو حذف کنید

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

ترتیب تب‌ها رو جابه‌جا کنید

برای عوض‌کردن ترتیب، تب یا بخش مربوط به اون رو انتخاب کنید و از فلش‌های جابه‌جایی نوار ابزار بلوک کمک بگیرید. اگه انتخاب تب از داخل صفحه سخت بود، «نمای فهرست» رو از نوار بالای ویرایشگر باز کنید. این نما بلوک‌های صفحه رو به‌شکل یک فهرست نشون می‌ده و کمک می‌کنه بخش درست رو راحت‌تر انتخاب کنید.

ظاهر تب‌ها رو از تنظیمات بلوک تغییر بدید

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

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

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

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

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

نمایش تب در ابزارک یا بخش‌های مختلف قالب

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

اضافه‌کردن تب به سایدبار در قالب‌های کلاسیک

1. از پیشخوان وارد «نمایش ← ابزارک‌ها» بشید.
2. سایدبار یا ناحیه ابزارک موردنظرتون رو باز کنید.
3. روی دکمه افزودن بلوک کلیک کنید و Tabs رو جست‌وجو کنید.
4. عنوان‌ها و محتوای تب‌ها رو وارد کنید و تغییرات رو ذخیره کنید.

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

اضافه‌کردن تب با ویرایشگر سایت در قالب‌های بلوکی

1. وارد «نمایش ← ویرایشگر» بشید.
2. بخش «طراحی» رو باز کنید و وارد الگوها یا بخش‌های قالب بشید.
3. الگویی رو انتخاب کنید که می‌خواید تب داخل اون دیده بشه.
4. روی دکمه «+» کلیک کنید و بلوک Tabs رو اضافه کنید.
5. محتوا رو وارد کنید و قبل از ذخیره، ببینید تغییرات در کدوم قسمت‌ها نمایش داده می‌شن.

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

پیداکردن بخش مناسب قالب برای نمایش تب

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

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

اگه بلوک Tabs رو در وردپرس ندارید

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

چطور یک افزونه تب‌بندی امن و به‌روز انتخاب کنید؟

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

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

ساخت تب با بلوک افزونه جایگزین

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

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

نمایش تب افزونه در نوشته، برگه یا سایدبار

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

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

نکات مهم برای ساخت تب‌های ساده و کاربردی

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

رفع مشکلات رایج تب‌ها در وردپرس

چرا بلوک Tabs رو پیدا نمی‌کنید؟

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

چرا محتوای تب نمایش داده نمی‌شه؟

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

چرا تب‌ها در موبایل به‌هم می‌ریزن؟

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

چرا گزینه ابزارک‌ها در پیشخوان دیده نمی‌شه؟

احتمالاً سایتتون از یک قالب بلوکی استفاده می‌کنه. در این قالب‌ها معمولاً باید وارد «نمایش ← ویرایشگر» بشید و بخش موردنظرتون رو از قسمت الگوها یا بخش‌های قالب تغییر بدید.

چطور تداخل تب‌ها با قالب یا افزونه‌ها رو پیدا کنید؟

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

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

جمع‌بندی

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

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

سؤال‌های رایج

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

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