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

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

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

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

آموزش افزونه Tabs Responsive

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

بخش های افزونه Tabs Responsive

All Tabs : تمامی تب ها یا سربرگ هایی که ایجاد کردید، از این اینجا قابل دسترس هستند.
Add New Tabs : برای ساخت تب جدید باید وارد این صفحه شد. ما هم کارمان را از اینجا شروع می کنیم.
More Free Plugins : افزونه های رایگان دیگری که توسط توسعه دهندۀ همین افزونه نوشته شدند، در اینجا پیشنهاد داده می شوند. ما به این صفحه کاری نداریم.

روال کار افزونه Tabs Responsive هم به این صورت می باشد که اول شما باید با رفتن به صفحه Add New Tabs یک تب جدید با محتوای مورد نظرتان ایجاد کنید. سپس یک کد کوتاه به شما داده خواهد شد که می بایستی این کد کوتاه را در هر کجایی از وردپرس که از کدهای کوتاه پشتیبانی می کند، قرار دهید. مثلاً در نوشته ها، برگه ها و ابزارک ها.

یک آموزش جذاب دیگه! افزونه تب ساز وردپرس Tabby Responsive Tabs

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

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

افزودن و ویرایش سربرگ های جدید

هر جعبه در این قسمت، نمایندۀ یک سربرگ است. سه تا جعبه وجود دارد که با کلیک روی علامت سطح زباله در زیر آن، می توانید هر کدام را حذف کنید. برای افزودن یک سربرگ جدید هم روی دکمۀ Add New Tabs در پایین (به رنگ قرمز) کلیک نمایید. برای حذف تمامی سربرگ ها هم روی Delete All (آبی رنگ) کلیک کنید.

حالا به سراغ یکی از جعبه های نمایندۀ سربرگ خواهیم رفت. قسمتی که عبارت Sample Title درج شده است، همان عنوان سربرگ است که باید آن را اصلاح کنید. میتوانید یک عنوان فارسی وارد کنید. جعبۀ بزرگ Tab Description هم توضیحات سربرگ را باید وارد کنید که طبیعتاً باید زمان بیشتری از شما بگیرد. نکته جالب اینجاست که نه تنها شما قادرید از متن برای توضیحات سربرگ استفاده کنید، با کلیک روی User WYSIWIG Editor می توانید حتی از عکس و هر نوع محتوای دیگر هم درون سربرگ استفاده کنید. این قابلیتی بسیار مفید و جذاب برای سربرگ بندی کردن هر نوع محتوا درون صفحات سایت است.

از قسمت Tab Icon هم می توانید یک نماد یا آیکون برای سربرگ خود انتخاب کنید. کافی است یا نام آن را وارد کنید و یا از بین دهها نماد یکی را انتخاب نمایید. از فهرست کشویی Display Above Icon اگر مقدار Yes باشد، نماد در بالای سربرگ نشان داده خواهد شد.

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

کد کوتاه و CSS های سفارشی سربرگ ها

در جعبۀ Custom Css هم می توانید کدهای سفارشی CSS خود را قرار داده و سربرگ را از هر نظر سفارشی سازی کنید. اما قبل از وارد کردن کد CSS دلخواه خود، بد نیست که سری به جعبۀ تنظیمات سربرگ ها در سمت چپ صفحه با عنوان Tabs Settings رفته که من در ادامه توضیحات این بخش را هم تقدیم شما خواهم کرد.

تنظیمات سربرگ ها در افزونه Tabs Responsive

Display Tabs Section Title : با انتخاب مقدار Yes عنوان تب در بالای سربرگ های ما نشان داده می شود. عنوانی که در اولین مرحله تعیین کردیم.
Display Option For Title and icon : از طریق این گزینه تنظیماتی، می توانید تعیین نمایید که در عنوان هر سربرگ چه چیزهایی نشان داده شوند. با انتخاب گزینه اول، هم نماد و هم عنوان تب نشان داده می شوند. با انتخاب گزینه دوم تنها عنوان سربرگ و با انتخاب گزینه سوم تنها نماد سربرگ نمایش داده می شود.
Tabs Icon Position Alignment : اگر می خواهید نماد هر سربرگ ماقبل عنوان آن نشان داده شود گزینه اول. در غیر این صورت، یعنی بعد از عنوان سربرگ، گزینه دوم را انتخاب نمایید.
Display Tabs Border : با انتخاب مقدار Yes برای این گزینه تنظیماتی یک خط حاشیه برای هر سربرگ نشان داده می شود.
Tabs Styles : سه تا سبک برای پس زمینه زبانۀ هر سربرگ وجود دارد که از بین آنها یکی را قادرید انتخاب کنید.
Tabs Title Background Colour : با کلیک روی گزینش رنگ می توانید رنگ زبانه هر سربرگ را تعیین نمایید.
Tabs Title/Icon Font : همین انتخاب رنگ را برای رنگ متن هر زبانه می توانید انجام دهید.
Selected Tabs Title Background Colour : رنگ پس زمینه عنوان سربرگ انتخاب شده را می بایستی از این قسمت تعیین کنید.
Selected Tabs Title/Icon Font Colour : رنگ قلم متن یا نماد سربرگ انتخاب شده را می توانید از این قسمت مشخص نمایید.
Tabs Description Background Colour : رنگ پس زمینه محیط توضیحات هر سربرگ را می توان از این قسمت تعیین کرد.
Tabs Description Font Colour : رنگ متن بخش توضیحات هر سربرگ را میتوان از این بخش مشخص کرد.
Tabs Title/Icon Font Size : اندازه قلم عنوان یا نماد هر زبانه
Tabs Description Font Size : اندازه قلم متن توضیحات هر سربرگ
Font Style/Family : خانواده قلم متن سربرگ ها
Tabs Description Animation : نوع پویانمایی نمایش توضیحات هر سربرگ
Tabs Alignment : افقی یا عمودی بودن نوع سربرگ ها
Tabs Position : اگر نوع سربرگ ها افقی بود، حالا زبانه ها در سمت راست باشد یا چپ Margin Between Two Tabs : حاشیه بین تو تا زبانه سربرگ
Margin Between Tabs And Content : حاشیه و فاصلۀ بین زبانه ها با محتویات هر سربرگ
Tabs Mobile display Settings : تنظیمات مربوط به نمایش نوع زبانه ها در دستگاه های با صفحه نمایش کوچک
Title Display Mode In Mobile : حالت نمایش عنوان در موبایل

یک آموزش جذاب دیگه! پلاگین تب وردپرس

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

ابزارک Tabs Responsive

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

ابزارک افزونه Tabs Responsive

این بود از آموزش تب بندی در وردپرس با Tabs Responsive که از بهترین افزونه های تبدیل محتوای معمولی به سربرگ یا زبانه بود که می توانستید از آن استفاده کنید. با دیگر افزونه تب ساز وردپرس هم همراه ما باشید.