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

آیا می خواهید نسخه موبایل سایت وردپرس خود را پیش نمایش کنید؟ پیش نمایش طرح موبایل به شما کمک می کند تا ببینید وب سایت شما در دستگاه های تلفن همراه چگونه است.

اگرچه مطمئناً می توانید به سایت زنده خود در تلفن نگاهی بیندازید ، اما این در مرحله توسعه کمکی نمی کند.

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

در این مقاله ، ما دو روش ساده برای پیش نمایش طرح موبایل سایت وردپرس خود بدون تغییر به دستگاه های مختلف به شما نشان خواهیم داد.
preview mobile layout og

 

چرا باید از طرح موبایل خود پیش نمایش کنید

بیش از ۵۰٪ بازدید کنندگان وب سایت شما از تلفن های همراه خود برای دسترسی به سایت شما استفاده خواهند کرد. حدود 3٪ از رایانه لوحی استفاده می کنند.

این بدان معنی است که داشتن سایتی که از نظر موبایل بسیار زیبا باشد ضروری است.

در حقیقت ، موبایل از چنان اهمیتی برخوردار است که گوگل اکنون از الگوی “mobile-first” برای الگوریتم رتبه بندی وب سایت خود استفاده می کند.

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

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

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

اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.

۱. استفاده از WordPress’s Theme Customizer

برای پیش نمایش نسخه موبایل سایت وردپرس خود می توانید از تنظیم کننده قالب وردپرس استفاده کنید .

به سادگی به داشبورد وردپرس خود وارد شوید و به Appearance »Customize screen بروید.
wordpress appearance customize

 

با این کار نرم افزار زمینه وردپرس باز می شود. بسته به اینکه از چه موضوعی استفاده می کنید ، ممکن است در منوی سمت چپ گزینه های کمی متفاوتی را مشاهده کنید:
theme customizer desktop view

 

در پایین صفحه ، روی نماد تلفن همراه کلیک کنید. سپس پیش نمایشی از ظاهر سایت خود در دستگاههای تلفن همراه مشاهده خواهید کرد.
theme customizer switch mobile

توجه:

نمادهای ویرایش آبی فقط در پیش نمایش وجود دارد. این موارد را در سایت زنده خود مشاهده نخواهید کرد.

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

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

۲. استفاده از حالت دستگاه DevTools Google Chrome

مرورگر Google Chrome دارای مجموعه ای از ابزارهای برنامه نویسان است که به شما امکان می دهد چک های مختلفی را در هر وب سایتی انجام دهید ، از جمله دیدن پیش نمایش نوع وب سایت شما در دستگاه های تلفن همراه.

به سادگی مرورگر Google Chrome را در دسک تاپ خود باز کرده و از صفحه ای که می خواهید بررسی کنید بازدید کنید.

این می تواند پیش نمایش یک صفحه در سایت شما باشد ، یا حتی می تواند وب سایت رقبای شما باشد.

بعد ، باید روی صفحه کلیک راست کرده و “بازرسی” را انتخاب کنید.
chrome select inspect

 

پنجره جدیدی در سمت راست باز می شود ، مانند این:
chrome inspect pane desktop

 

در نمای توسعه دهنده ، شما می توانید کد منبع HTML سایت خود را مشاهده کنید.

بعد ، روی دکمه ‘Toggle Device Toolbar’ کلیک کنید تا به نمای موبایل تغییر کند.
chrome inspect pane mobile 1

 

مشاهده خواهید کرد که پیش نمایش وب سایت شما به اندازه صفحه نمایش تلفن همراه کوچک می شود.

همچنین متوجه تغییر شکل وب سایت خود به نمای موبایل خواهید شد. در مثال بالا ، منو خراب شده است و نماد جستجو به جای سمت راست منو به سمت چپ منتقل شده است.

وقتی مکان نما را روی نمای موبایل سایت خود اجرا کنید ، به یک حلقه تبدیل می شود ، مانند این:
chrome inspect mobile cursor dot

 

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

همچنین بخوانید:   Squarespace vs WordPress - کدام یک بهتر است؟ (مزایا و معایب)

همچنین می توانید کلید “Shift” را پایین نگه دارید ، سپس کلیک کرده و ماوس خود را حرکت دهید تا شبیه سازی خرچنگ روی صفحه تلفن همراه برای بزرگنمایی یا کوچک کردن آن باشد.

در بالای نمای موبایل سایت خود ، برخی گزینه های اضافی را مشاهده خواهید کرد.
chrome inspect mobile view options

 

اینها به شما امکان می دهد چندین کار اضافی انجام دهید. می توانید نحوه نمایش سایت خود در انواع مختلف تلفن های هوشمند را بررسی کنید. همچنین می توانید عملکرد سایت خود را بر روی اتصالات 3G سریع یا آهسته شبیه سازی کنید. حتی می توانید صفحه موبایل را با استفاده از نماد چرخش بچرخانید.

نحوه ایجاد محتوای خاص موبایل در وردپرس

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

اما به سادگی داشتن یک سایت پاسخگو ممکن است به اندازه کافی دور نباشد. کاربران در دستگاه های تلفن همراه اغلب به دنبال چیزهای متفاوت از کاربران دسک تاپ هستند.

بسیاری از مضامین و افزونه های برتر به شما امکان می دهند عناصری را ایجاد کنید که در دسک تاپ نسبت به تلفن همراه متفاوت نمایش داده می شوند. همچنین می توانید از یک افزونه صفحه ساز مانند Beaver Builder برای ویرایش صفحات فرود خود در نمای موبایل استفاده کنید.

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

یک راه عالی برای ایجاد پنجره های بازشو مخصوص تلفن همراه و فرم تولید سرب با OptinMonster است . این قدرتمندترین افزونه پنجره وردپرس و ابزار تولید سرب در بازار است.

آنها دارای قوانین خاصی برای نمایش دستگاه های هدف هستند که به شما امکان می دهد کمپین های مختلفی را به کاربران تلفن همراه در مقابل کاربران دسک تاپ نشان دهید . حتی می توانید آن را با ویژگی هدف یابی جغرافیایی OptinMonster و سایر ویژگی های پیشرفته شخصی سازی ترکیب کنید تا بهترین تبدیل را داشته باشید.

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

اگر این مقاله را دوست داشتید ، لطفاً برای آموزش های ویدئویی وردپرس در کانال YouTube ما مشترک شوید . همچنین می توانید ما را در توییتر و فیس بوک پیدا کنید .

منابع:

How to View the Mobile Version of WordPress Sites from Desktop

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

دنبال چی میگردی؟

اگر چیزی پیدا نکردی به پشتیبانی پیام بده