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

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

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

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

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

Preview the mobile layout of your website

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

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

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

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

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

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

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

آموزش فیلم h4>

مشترک شدن در WPBeginner

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

1 با استفاده از WordPress’s Theme Customizer

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

به سادگی به داشبورد وردپرس خود وارد شوید و به صفحه ظاهر »شخصی سازی بروید.

WordPress dashboard showing where to find Appearance - Customize

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

WordPress theme customizer (desktop view)

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

Switching to mobile view in the theme customizer

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

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

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

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

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

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

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

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

Selecting the Inspect option in Chrome

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

The default desktop view when inspecting your site in Chrome

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

بعد ، روی دکمه “تغییر وضعیت نوار ابزار” برای تغییر در نمای موبایل کلیک کنید.

Inspecting the mobile view of your site in Chrome

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

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

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

The circular mouse cursor in Chrome's Inspect view

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

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

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

Additional mobile options for inspecting your site in Chrome

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

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

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

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

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

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

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

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

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

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

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

منبع:
https://www.wpbeginner.com/beginners-guide/how-to-preview-the-mobile-layout-of-your-site/.

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