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

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

ساخت باکس اسکرول دار با HTML و CSS

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

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

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

چطور محتوا را اسکرول دار کنیم؟

شاید فکر کنید که ساختن باکس های اسکرول دار کار سختیه ، ولی درحقیقت این‌طور نیست. شما این کار را با کدهای css هم می‌توانید انجام دهید. برای انجام این کار تنها کافی است مطابق با این آموزش عمل کنید. در قدم اول تگ Div موردنظر خود را بسازید. بعد از ساخت تگ Div باید یک کلاس به تگ Div موردنظر دهید. به‌عنوان‌مثال اگر قصد دارید یک باکس با پس‌زمینه خاکستری با کد رنگ #ddd و پهنای ۲۰۰ پیکسل و ارتفاع ۲۰۰ پیکسل بسازید. برای انجام این کار کد زیر را در HTML قالب سایت خود بنویسید.

<div class="vebeet-box">
یه سری محتوا اینجا
</div>

در مرحله بعد کد CSS زیر را نیز داخل فایل CSS قالب سایت خود قرار دهید. در نظر داشته باشید که درصورتی‌که سایت شما وردپرسی است؛ باید این کد را در Style.css قالب وردپرس خود قرار دهید.

.vebeet-box{
    width:200px;
    height:200px;
    background:#eee;
    overflow-y:scroll;
}

برای اینکه به صورت خلاصه کد بالا را شرح داده باشم ، باید بگم که در کد بالا کار اصلی (یعنی اسکرول دار کردن باکس) را خاصیت Overflow-y:Scroll انجام می‌دهد. شما با دادن این خاصیت به div دستور می‌دهدید تا در صورت بیشتر شدن محتوای داخل باکس از ارتفاع Div که در اینجا Height:200px در نظر گرفته‌شده؛ محتوا را به‌صورت اسکرول دار در جهت عمودی نمایش دهد. همچنین شما برای درج اسکرول به‌صورت افقی هم می‌توانید به‌جای Overflow-y، خاصیت Overflow-x را قرار دهید.

همان‌طور که گفته شد برای تنظیم ارتفاع Div این امکان را دارید که مقدار ۲۰۰px خاصیت Height را به میزان دلخواه خود تغییر دهید. شما به همین راحتی و با استفاده از css توانستید برای سایت خود یک باکس اسکرول دار بسازید . حال گاهی اوقات میپرسند که بدون کدنویسی چطوری میتونیم یک scroller box بسازیم ؟ در جواب این سوال باید بگم که تا انتهای این مقاله وبیت را دنبال کنید !