سایدبار متحرک وردپرس
یکی از کارهایی که می‌توان برای هر چه بیشتر دیده شدن نوار کناری یا همان سایدبار سایت انجام داد، متحرک کردن آن است. به طوری که وقتی لغزندهٔ صفحه به بالا یا پایین برده می‌شود، سایدبار نسبت به موقعیت محتوای اصلی صفحه متحرک تلقی می‌شود. البته تعریف درست آن سایدبار ثابت است. یعنی وقتی صفحه بالا و پایین می‌رود، نوار کناری ثابت است و معمولاً انتهای سایدبار به بالا و پایین صفحه می‌چسبد. در هر صورت با هر نوع تعریفی که پیش برویم، در ادامه روش‌های ساخت سایدبار متحرک وردپرس به روش‌هایی که وجود دارد را آموزش خواهیم داد.
به طور کلی ما از دو روش می‌توانیم برای ساخت سایدبار متحرک وردپرس استفاده کنیم. یکی روش ایجاد تغییرات در کدهای قالب است که باید کمی کدنویسی HTML و JavaScript را یاد داشته باشیم. روش دوم هم که خیلی ساده است، همان استفاده از افزونه روی سایت وردپرس و انجام تنظیمات آن است.
ایجاد تغییرات در کدهای قالب
در روش اول ما باید چند تا از اسناد قالب وردپرس را ویرایش کنیم. البته بسته به نوع قالب، ممکن است نام و محل قرارگیری این اسناد روی فضای میزبانی متفاوت باشد. اما به طور کلی یکی از مهم‌ترین اسنادی که در پوشهٔ قالب سایت ما باید ویرایش شود، سند sidebar.php است. این سند ساختار نوار کناری سایت را تعیین می‌کند. قطعاً این سند شامل کدهای زیادی است که از جملهٔ آن کدهای div هستند که به صورت تو در تو قرار گرفته‌اند.
کد خامی که به عنوان نمونه برای باز شدن موضوع از آن استفاده می‌کنیم، در زیر موجود است.
<div class="wrapper">
<div class="content">
<div class="theiaStickySidebar">
...
</div>
</div>
<div class="sidebar">
<div class="theiaStickySidebar">
...
</div>
</div>
</div>
در این کد ما یک div با کلاس wrapper داریم که کل محتوای صفحه را درون خود جای داده است. در قالب وردپرس این div ممکن است در سند sidebar.php نباشد. درون این div هم دو تا div به صورت موازی با کلاس‌های content و sidebar داریم. درون هر دوی این divها یک div دیگر با کلاس theStickySidebar داریم. با توجه به این ساختار، شما هم باید ساختار کدهای HTML نوار کناری سایت خود را تنظیم کنید. معمولاً فقط کافی است کلاس‌های لازم را به div ها اضافه نمایید.
بعد از آن به کدهای جاوا اسکریپتی که در تمامی صفحات سایت شما بارگذاری می‌شوند، کدهای زیر را هم اضافه نمایید. دقت کنید که jQuery حتماً باید در صفحات شما لود شود. چون این کدها جی‌کوئری هستند. در ضمن کتابخانهٔ مورد نیاز ما که در اینجا کتابخانهٔ Theia Sticky Sidebar می‌باشد هم باید لود شود.
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="theia-sticky-sidebar.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>
اگر از قبل جی کوئری در صفحات سایت شما بارگذاری شده، خط اول را حذف کنید. خط دوم را هم بسته به موقعیت سند theia-sticky-sidebar.js که در پوشهٔ قالب قرار می‌دهید، نشانی آن را اصلاح نمایید.
این از روش اول که وارد جزئیات بیشتر آن نخواهم شد. اما اگر حداقل دورهٔ آموزشی ویدیویی طراحی مقدماتی پوستهٔ وردپرس ما را که به رایگان روی سایت منتشر شده است را دیده باشید، به راحتی می‌توانید این کار را انجام دهید.
استفاده از افزونه
اما روش دوم بیشتر مخصوص کسانی است که میانهٔ خوبی با دستکاری کدهای قالب ندارند. برای این منظور افزونه‌های زیادی موجود است. که دو تا از این افزونه‌ها:
می باشند. برای کسب اطلاعات بیشتر راجع به نحوهٔ استفاده از هر کدام از این افزونه‌ها، روی نام آن‌ها در بالا کلیک کنید. به صفحهٔ آموزش کامل همان افزونه‌ها در سایت ما هدایت خواهید شد.
اما به طور کلی باید خدمت شما عرض کنم که نحوهٔ استفاده از این افزونه‌ها بسیار ساده است. به طوری که بعد از نصب و فعال سازی افزونه، مثلاً افزونه WP Sticky Sidebar را در نظر بگیرید که این افزونه یک صفحهٔ تنظیمات به پیشخوان شما اضافه می‌کند که شما با دادن نام Class یا ID عنصر نوار کناری، که می‌تواند یک برچسب div یا چیز دیگری باشد، از آن به بعد نوار کناری وردپرس شما متحرک خواهد شد. البته در بیشتر مواقع که قالب شما از کلاس‌های استاندارد مثل secondary برای سایدبار استفاده کند، حتی نیازی به انجام این کار هم نیست. همین که افزونه را فعال کنید، ماموریتش را شروع می‌کند.
