مخفی کردن ابزارک وردپرس در موبایل با افزونه Widget Options

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

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

ابزارک (ویجت) چیست و چرا باید در موبایل مخفیش کنیم؟

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

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

اول از همه: نصب افزونه Widget Options

کاری که باید بکنید اینه که افزونه‌یWidget Options رو نصب کنید. یه خبر خوب هم بدیم؛ این افزونه یه نسخه‌ی رایگان داره و یه نسخه‌ی پریمیوم (پولی). ولی نگران نباشید، برای کاری که ما می‌خوایم بکنیم یعنی مخفی کردن ابزارک توی موبایل، همون نسخه‌ی رایگانش کاملاً کافیه و لازم نیست یه ریال هم خرج کنید.

از پیشخوان وردپرس برید توی بخش افزونه‌ها، سرچ کنید Widget Options، نصبش کنید و فعالش کنید. تمام.

آموزش قدم‌به‌قدم مخفی کردن ابزارک توی موبایل

خب حالا که افزونه نصب و فعال شد، بریم سراغ اصل ماجرا. مسیر رو باهامون بیاید:

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

بذارید با یه مثال جلو بریم. فرض کنید می‌خوایم ابزارک «آخرین دیدگاه» رو توی موبایل مخفی کنیم.

مرحله اول: انتخاب گزینه Hide on checked devices

روی ابزارک «آخرین دیدگاه» کلیک کنید تا باز بشه. یه پنجره‌ی کوچیک باز می‌شه. اون بالا چندتا آیکون می‌بینید؛ آیکون موبایل رو انتخاب کنید. بعد از قسمت Hide/Show، گزینه‌ی Hide on checked devices رو از کادر پایینیش انتخاب کنید. این گزینه یعنی: «روی هر دستگاهی که تیک بزنم، این ابزارک رو مخفی کن».

مرحله دوم: انتخاب دستگاه Mobile

حالا از بخش Devices بیاید و گزینه‌ی Mobile رو تیک بزنید. با این کار دارید می‌گید: «این ابزارک رو فقط توی موبایل مخفی کن».

آخر کار هم اول روی دکمه‌ی ذخیره و بعدش روی انجام شد کلیک کنید. همین. حالا برید با گوشیتون سایتتون رو باز کنید و ببینید. می‌بینید که دیگه خبری از اون ابزارک نیست. تمیز و مرتب.

تعداد ابزارک‌های نمایشی در دستگاه‌های مختلف

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

مثلاً فرض کنید شش‌تا مقاله‌ی جدید دارید و می‌خواید این‌طوری بشه:

• توی دسکتاپ، هر شش‌تا مقاله دیده بشن
• توی موبایل، فقط سه‌تا
• توی تبلت، چهارتا

برای این کار باید سه‌تا ابزارک «متن» جدا بسازید و هر کدوم رو برای یه دستگاه تنظیم کنید. بریم جلو:

ابزارک اول: یه ابزارک «متن» جدید بسازید، تعداد مقاله‌هایی که می‌خواید توی دسکتاپ دیده بشن (یعنی شش‌تا) رو مشخص کنید و دستگاه دسکتاپ رو انتخاب کنید.

ابزارک دوم: دوباره یه ابزارک «متن» جدید بسازید، تعداد رو بذارید روی سه و این‌بار دستگاه موبایل رو انتخاب کنید.

ابزارک سوم: بازم یه ابزارک «متن» جدید بسازید، تعداد رو بذارید روی چهار و دستگاه تبلت رو انتخاب کنید.

یه نکته‌ی مهم: توی هر سه مرحله، این‌بار باید از بخش Hide/Show گزینه‌ی Show on checked devices رو بزنید (نه Hide). چون دارید می‌گید «فقط روی همین دستگاهی که تیک زدم، نشونش بده». این‌طوری هر دستگاه فقط ابزارک مخصوص خودش رو می‌بینه و بقیه پنهون می‌مونن.

انتخاب ID و Class برای ابزارک‌ها

اگه با CSS و جاوااسکریپت آشنایی دارید، این افزونه یه چیز دیگه هم بهتون می‌ده. می‌تونید به هر ابزارک یه ID یا Class اختصاصی بدید و بعد راحت باهاش استایل‌دهی کنید یا رفتار خاصی بهش بدید. برای کسی که دستش توی کد هست، خیلی به کار میاد.

نسخه رایگان یا پریمیوم؟

بذارید خیلی خلاصه بگیم هر کدوم چی دارن که خودتون تصمیم بگیرید.

امکانات نسخه رایگان

• محدود کردن نمایش ابزارک‌ها توی صفحات مختلف سایت، فقط با چند تا کلیک ساده
• نشون دادن یا مخفی کردن ابزارک روی دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ)، که همین کاری بود که بالا انجام دادیم
• گذاشتن ابزارک‌های دلخواه توی بخش‌های مختلف سایت
• استفاده از ID و Class اختصاصی
• استفاده از برچسب‌های شرطی وردپرس برای تعیین اینکه ابزارک کجا دیده بشه
• مخفی کردن عنوان ابزارک موقع نمایش به کاربر (عنوان توی پیشخوان برای خودتون هست، ولی توی سایت دیده نمی‌شه)

امکانات نسخه پریمیوم

• گذاشتن لینک روی عنوان ابزارک‌ها برای فرستادن کاربر به بخش‌های مختلف
• غیرفعال کردن ابزارک‌هایی که اصلاً بهشون نیاز ندارید (فضای داشبوردتون رو هم سبک‌تر می‌کنه)
• اضافه کردن جلوه‌های ویژه با CSS موقع لود یا اسکرول شدن سایت
• افزایش قابلیت نمایش برای تاکسونومی‌ها و Termها
• سفارشی‌سازی رنگ و ظاهر ابزارک برای اینکه شیک‌تر به نظر برسه

جمع‌بندی

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

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

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