ایکون
100 قالب سایت آماده
897 هزار تومان
پیش نمایش
حل مشکل ریسپانسیو وردپرس
مجموعه مقالات وردپرس

حل مشکل ریسپانسیو وردپرس؛ رفع خطاهای ریسپانسیو Mobile Usability

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

4
25 بهمن 1400
آخرین بروزرسانی: 14 فروردین 1403

خطاهای گزارش داده شده در Mobile Usability (قابلیت استفاده در موبایل)  سرچ کنسول نشان می دهد که کدام صفحات شما مشکل ریسپانسیو و نمایش در موبایل و دستگاه های هوشمند دارند. با توجه به افزایش استفاده از موبایل، ریسپانسیو بودن صفحات سایت شما ضروری است و طراحی ریسپانسیو مساله مهمی است که باید به آن توجه کنید. اگر از وردپرس استفاده می کنید، اولین قدم برای یک طراحی ریسپانسیو، انتخاب قالب واکنشگرا است. رفع حطاهای ریسپانسیو بر روی بهبود سئو یک صفحه نیز تاثیر دارد. در مقاله ریسپانسیو کردن وردپرس با Wptouch، آموزش حل مشکل ریسپانسیو وردپرس را با افزونه آوردیم. در این مقاله می خواهیم به گزارشات Mobile Usability سرچ کنسول و نحوه رفع آنها با استفاده از کد css بپردازیم.

گزارشات Mobile Usability سرچ کنسول چیست؟

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

گزارشات Mobile Usability برای حل مشکل ریسپانسیو وردپرس

⚠️ Viewport not set یا (View Port تنظیم نشده است)

ویژگی View Port برای صفحه تنظیم نشده است. این تگ به مرورگرها می گوید که ابعاد صفحه را با اندازه صفحه تنظیم کنند. همانطور که گفته شد کاربران با دستگاه های مختلف از کامپیوتر رومیزی تا تلفن هوشمند سایت شما را چک می کنند پس سایت شما باید در همه ابعاد بدون مشکل به کاربر نمایش داده شود. همانطور که در صفحه زیر می بینید سایت به همان صورت بدون اینکه ریسپانسیو شود در موبایل به کاربر نمایش داده می شود. مثلا برای مشاهده منو باید روی آن زوم کنیم.

حل مشکل ریسپانسیو وردپرس

⚠️ Viewport not set to device-width (عدم تنظیم View port روی Device Width)

صفحه شما بدون تگ  Viewport با عرض ثابت طراحی شده است. به این معنی که نمیتواند برای اندازه های مختلف صفحات تنظیم شود. برای رفع این مشکل باید صفحات خود را ریسپانسیو طراحی کنید و viewport را مطابق با عرض و مقیاس دستگاه تنظیم کنید.

⚠️ محتوای گسترده تر از صفحه نمایش (Content wider than screen)

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

محتوای گسترده تر از صفحه نمایش در گزارشات Mobile Usability سرچ کنسول

⚠️ Text too small to read (متن خیلی کوچک است)

کوچک بودن متن به این معناست که در دستگاه هایی مثل موبایل فونت آن صفحه خوانا نیست و بسیار کوچک است و کاربران با موبایل باید آن را زوم کنند. مانند صفحه زیر و متونی که بسیار کوچک هستند.

 

⚠️ Clickable elements too close together (عناصر قابل کلیک به هم نزدیک هستند)

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

نزدیک بودن به هم عناصر قابل کلیک در گزارشات گزارشات Mobile Usability سرچ کنسول

ریسپانسیو بودن یک صفحه را در موبایل چطور بررسی کنیم؟

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

بررسی ریسپانسیو بودن سایت با ابزار موبایل فرندلی تستابزارهای متعددی برای تست ریسپانسیو صفحه وجود دارند.

برای حل مشکل ریسپانسیو وردپرس چه باید کرد؟

در بخش قبل گزارشات Mobile Usability سرچ کنسول را آوردیم در این بخش راه حل رفع خطاهای ریسپانسیو را خواهیم گفت. 

✔️ برای نمایش مطلوب سایت شما و رفع خطاهای ریسپانسیو mobile usability قرار دادن تگ viewport مانند زیر کمک می کند که ابعاد سایت با صفحه دستگاه نمایش تنظیم شود. برای این کار سایت را در مرورگر باز کنید و عرض را حداقل عرضی بگذارید که طراحی شما خراب نشود و سپس از متاتگ زیر در هدر سایت تان استفاده کنید. عرض را باید حداقل عرضی بگذارید که می خواهید صفحه شما نمایش داده شود. این تگ به مرورگر اعلام می کند که صفحه را متفاوت از حالت پیش فرض ارائه کند.

<"meta name="viewport" content="width=1024>

✔️ ممکن است قرار دادن ویژگی عرض به صورت عددی بازهم صفحه شما را در موبایل به خوبی نمایش ندهد و فونت ریز باشد. برای رفع این مشکل به جای اینکه به ویژگی content در تگ متا عدد بدهید آن را برابر با “content=”width=device-width قرار دهید تا عرض را مطابق با گوشی موبایل در نظر گیرد. این به مرورگر اعلام می کند که سایت را به صورت خودکار بر اساس عرض صفحه تنظیم کند و برای مثال لازم نیست سایت را در فضای 1000 پیکسل رندر کند.

✔️ برای رفع مشکل متن کوچک بهتر است سایت تان را بررسی کنید و چک کنید کدامیک از محتواها (ممکن است تصویر باشد) با عرض ثابتی که گرفته است باعث به وجود آمدن این مشکل شده است. ممکن است قرار دادن لینک های طولانی نیز باعث به وجود آمدن این مشکل شده باشد. به جای استفاده از پیکسل از واحدهایی مثل em یا درصد برای نمایش عناصر صفحه استفاده کنید. برای مثال میتوانید در تگ img از ویژگی max-width استفاده کنید.

<img src="img_rtl.jpg" style="max-width:100%; height:auto;">

✔️ برای حل این مشکل علاوه بر تنظیم همه موارد قبل از جمله تگ متا که اعلام شد باید اندازه فونت را مناسب تنظیم کنید. ابتدا باید تشخیص دهید که کدام المان متنی در صفحه وب کوچکتر است و سایز فونت را به صورت ریسپانسیو مقداردهی کنید. نمونه ای از سایزدهی فونت به صورت ریسپانسیو به شکل زیر است.

font-size:1.1rem

✔️برای حل مشکل ریسپانسیو وردپرس در عناصر قابل کلیک padding یا margin ها را بیشتر کنید یا به صورت نسبی اندازه دهی کنید.

 

در این مقاله به گزارشات Mobile Usability سرچ کنسول و حل مشکل ریسپانسیو وردپرس پرداختیم. اینها 3 مشکل رایج در ریسپانسیو سایت بودند که گوگل در ریسپانسیو بودن سایت به آنها پرداخته است. اگر به جز مواردی که گفته شد راه حل دیگری دارید لطفا در دیدگاه ها با ما به اشتراک بگذارید.

مهسا کاظمی پور
مهسا کاظمی پور
مهسا هستم و 4 ساله در حوزه وردپرس و دو سال در حوزه سئو فعالیت دارم. معتقدم که انسان در شرایط نامساعد نباید خودش رو ببازه و نا امید بشه چون فصل دوباره جوونه زدن هم خواهد رسید...
مقالات مرتبط
بنر
آموزش گام به گام بسته نصب آسان در لوکال هاست
اگر در لوکال هاست وب سایت خود را راه اندازی کنید می توانید یکباره وب سایت خود را به هاست منتقل کنید. یعنی بدون آنکه نیاز به هاست و دامنه داشته باشید، سایت را بدون استرس و نگرانی راه اندازی می کنید  و پس از مطمئن شدن از همه تغییرات دلخواهتان، آن را به هاست اصلی انتقال می دهید. همچنین در مصرف ...
بنر
آموزش قالب وودمارت؛ آموزش صفر تا صد طراحی فروشگاه
اگر می خواهید یک سایت حرفه ای طراحی کنید که کلیه امکانات یک فروشگاه آنلاین را داشته باشد کافی است یکی از 50 دموی فارسی و اختصاصی مانند دیجی کالا و موتن رو قالب وودمارت را نصب و استفاده کنید. همچنین این قالب فروشگاه ساز به همراه اپلیکیشن ارائه شده و کاربران می توانند یک نسخه از وب سایت را روی ...
بنر
آموزش نصب و فعالسازی ioncube در زمپ
ionCube Loader ماژولی است که برای اجرای فایل های رمزگذاری شده روی سرور نصب می شود. نصب و فعالسازی ioncube به سادگی انجام می شود. در صورت فعال نبودن ionCube شما با خطا مواجه می شوید. اما راهکار ساده رفع این خطا نصب ionCube در کمتر از چند دقیقه است که در ادامه به توضیح آن به صورت ویدئویی می پردازیم.
بنر
آموزش نصب آسان قالب وردپرس در Cpanel
شاید شما هم این جمله را شنیده باشید. در کم تر از 10 دقیقه سایت وردپرس خود را نصب کنید. در نگاه اول به نظرتان این جمله فقط یک تبلیغ برای جذب مخاطب به نظر می‌رسد اما کاملا درست است. کافی است از بسته نصب آسان وردپرس استفاده کنید تا سایت شما در کم تر از 10 دقیقه، روی هاست نصب شود. با هم نصب قالب ...
4 دیدگاه
mahinouri
mahinouri
26 دی 1401 01:14

سلام یک سوال داشتم
قالب من واکنشگراست
من به دکمه لینک دادم .در ویندوز باز میشه اما در نسخ موبایلی
باز نمیشه و میزنه this page can't be reach

آیا مفید بود ؟
0
مهسا کاظمی پور
مهسا کاظمی پور
27 دی 1401 08:46

درود و عرض ادب
این مساله ربطی به واکنشگرایی سایت شما ندارد ممکن است تنظیماتی به تازگی اعمال کرده باشید که همان تنظیمات باعث این مشکل شده باشند. اگر فقط در یک گوشی این مساله را مشاهده می کنید می توانید در بخش تنظیمات مرورگر گوشی کش و دیتا را پاک کنید. برای حل مشکل This site can’t be reached در گوشی گوگل کروم را باز کنید و روی آیکن سه نقطه زده و از منو Settings را انتخاب کنید.
به بخش Privacy > Clear browsing data بروید و All time را انتخاب کنید و برای Cookies and site data و Cached images and files باید clear data را بزنید.

آیا مفید بود ؟
amirhosseinranjbar
amirhosseinranjbar
04 آذر 1401 17:28

سلام وقتتون بخیر
زمانی که من در سفارش سازی قالب سایت واگن شگرا را برای موبایل تنظیم میکنم
با ارور page unresponsive
you can want for it become responsive or exit the page.
مواجه شدم در صورتی که همه اندازه ها در گوشی های مختلف ریسپانس بوده
لطفا راهنمایی میفرمایید

آیا مفید بود ؟
0
مهسا کاظمی پور
مهسا کاظمی پور
05 آذر 1401 12:01

درود عرض ادب
دوست گرامی اگر با ابزارهای تست واکنشگرایی سایت خودتون رو بررسی کنید نباید مشکل ریسپانسیو داشته باشید. این خطا را شما دقیقا در چه بخشی مشاهده می کنید؟

آیا مفید بود ؟