ساخت ابزارک چسبان در وردپرس با افزونه رایگان Fixed Widget

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

توی این آموزش اول می‌بینیم خود وردپرس چه امکانی برای چسبان‌کردن بخش‌ها داره. بعد سراغ افزونه رایگان Fixed Widget and Sticky Elements for WordPress می‌ریم که قبلاً با نام Q2W3 Fixed Widget شناخته می‌شد. با کمک این افزونه می‌تونید ابزارک‌های سایدبار رو چسبان کنید، فاصله‌شون از بالای صفحه رو تغییر بدید و مشخص کنید کجا متوقف بشن.

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

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

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

آیا خود وردپرس قابلیت چسباندن ابزارک رو داره؟

بله، ولی این امکان در همه قالب‌ها و بخش‌های سایت به یک شکل در دسترس نیست. وردپرس در ویرایشگر سایت قالب‌های بلوکی، تنظیم Position یا موقعیت رو برای بعضی بلوک‌های نگهدارنده مثل Group در اختیارتون می‌ذاره. اگه از قالب بلوکی استفاده می‌کنید، می‌تونید بلوک موردنظرتون رو داخل یک بلوک Group بذارید و گزینه Sticky رو از تنظیمات موقعیت همون بلوک انتخاب کنید.

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

ساخت ابزارک چسبان با افزونه رایگان Fixed Widget

افزونه Fixed Widget and Sticky Elements for WordPress نسخه رایگان داره و شناسه اون در مخزن وردپرس هنوز q2w3-fixed-widget هست. برای همین ممکنه در بعضی نوشته‌ها یا صفحه‌های قدیمی‌تر، اسم Q2W3 Fixed Widget رو ببینید.

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

نصب افزونه

در پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید. عبارت Q2W3 Fixed Widget یا Fixed Widget and Sticky Elements for WordPress رو جست‌وجو کنید. اسم و شناسه افزونه رو با صفحه رسمی اون تطبیق بدید. بعد روی «هم‌اکنون نصب نمایید» بزنید و پس از پایان نصب، «فعال نمایید» رو انتخاب کنید.

تنظیم فاصله و نمایش در موبایل

بعد از فعال‌سازی، از بخش «نمایش» وارد صفحه Fixed Widget Options بشید. گزینه Top Margin فاصله ابزارک از بالای صفحه رو تعیین می‌کنه. اگه سایتتون هدر ثابت داره، این عدد رو کمی بیشتر از ارتفاع هدر بذارید تا ابزارک پشت اون پنهان نشه.

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

۳. انتخاب ابزارک چسبان

حالا به «نمایش ← ابزارک‌ها» برید و سایدبار موردنظرتون رو باز کنید. بلوک یا ابزارکی رو انتخاب کنید که می‌خواید ثابت بمونه. اگه گزینه Fix Widget رو برای خود بلوک نمی‌بینید، بلوک رو داخل یک Group بذارید و تنظیم چسبان رو برای Group فعال کنید.

در رابط کلاسیک ابزارک‌ها، گزینه Fixed Widget معمولاً داخل تنظیمات همون ابزارک قرار داره. تیکش رو فعال کنید و تغییرات رو ذخیره کنید. جای دقیق این گزینه ممکنه با توجه به قالب، نسخه وردپرس و نوع رابط ابزارک‌ها کمی فرق کنه.

۴. تعیین نقطه توقف ابزارک

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

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

۵. آزمایش نتیجه در سایت

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

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

نکات مهم برای استفاده درست از ابزارک چسبان

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

حل مشکلات رایج ابزارک چسبان

ابزارک ثابت نمی‌مونه

اول ببینید گزینه Fixed Widget برای همون ابزارک یا بلوک Group فعال شده یا نه. بعد کش سایت رو پاک کنید. بعضی تنظیمات CSS قالب مثل overflow یا transform هم می‌تونن جلوی عملکرد درست ابزارک چسبان رو بگیرن. برای پیداکردن علت دقیق، بهتره قالب یا افزونه‌های مرتبط با ظاهر سایت رو موقتاً در یک محیط آزمایشی بررسی کنید.

ابزارک روی فوتر می‌افته

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

نمایش موبایل به‌هم می‌ریزه

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

جمع‌بندی

اگه قالب بلوکی دارید و فقط می‌خواید یکی از بخش‌های ساخته‌شده با ویرایشگر سایت رو ثابت نگه دارید، اول قابلیت Sticky خود وردپرس رو امتحان کنید. برای سایدبار قالب‌های کلاسیک یا وقتی به تنظیم فاصله، محدودیت نمایش و نقطه توقف نیاز دارید، افزونه رایگان Fixed Widget امکانات بیشتری بهتون می‌ده. یادتون نره افزونه رو اول در محیط آزمایشی بررسی کنید و نتیجه رو هم در موبایل و هم در دسکتاپ ببینید.

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

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