افزونه تب ساز وردپرس Tabby Responsive Tabs

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

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

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

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

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

نحوه استفاده از کدهای کوتاه Tabby Responsive Tabs

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

برای درج یک محتوای سربرگ بندی شده، حالا در هر کجا از پیشخوان وردپرس، دو تا برچسب باز و بستۀ زیر مورد نیاز است:

[tabby]
[tabbyending]

به تعداد تب هایی که می خواهید داشته باشید، باید از برچسب اول یعنی [tabby] استفاده کنید. البته این برچسب یک مشخصه به نام title هم دارد که عنوان همان سربرگ است.

[tabby title="tabname"]
[tabbyending]

در مورد بالا شما باید به جای tabname نام تب دلخواه خود را وارد کنید. حالا از برچسب tabby اول تا برچسب بعدی، هر چه می خواهید بنویسید که می تواند شامل برچسب های HTML هم باشد. اینها همان محتوای موجود در سربرگ مورد نظر را تشکیل می دهند. در نهایت کد کوتاه تکمیل شده به صورت زیر خواهد شد:

[tabby title="سربرگ اول"]
محتوای موجود در سربرگ اول که می تواند شامل برچسب های HTML هم باشد.
[tabby title="سربرگ دوم"]
محتوای موجود در برچسب دوم...
[tabby title="سربرگ سوم"]
محتوای موجود در سربرگ سوم که حتی می توانید از ابزارهای ویرایشی نوشته در ویرایشگر صفحه افزودن نوشته هم استفاده کنید.
[tabbyending]

اگر می خواهید یکی از سربرگ ها به صورت پیش فرض، زمانی که صفحه بارگذاری می شود، به صورت باز شده باشد، از مشخصۀ open=”yes” برای همان برچسب tabby استفاده نمایید.

[tabby title="My Tab" open="yes"]

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