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

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

امروزه داشتن یک سایت با قابلیت بارگذاری در موبایل به عنوان یک برتری در نظر گرفته می­‌شود. پس شما باید قبل از بارگذاری سایتتان از ریسپانسیو بودن و داشتن نسخه موبایل مطمئن شوید. به همین منظور دیدن یک پیش‌نمایش از نسخه موبایل سایت وردپرسی در کامپیوتر به شما کمک می‌کند ببینید وبسایت شما در دستگاه‌های تلفن همراه چگونه ظاهر می‌­شود و در صورت مشاهده مشکل، آن را بر طرف کنید. چی بهتر از این؟ اینگونه مطمئن سایت خود را بارگذاری کنید! در این مقاله ما به شما دو روش ساده برای نمایش سایت وردپرسی در موبایل بدون تغییر دستگاه خود را خواهیم آموخت. با ما همراه باشید…

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

آنچه در این مقاله خواهید خواند:

  • چرا باید این روش ها را برای مشاهده نسخه موبایلی سایت یاد بگیریم؟
  • چرا باید نسخه موبایلی سایت خود را بازبینی کنیم؟
  • روش‌­های مشاهده نسخه موبایل سایت وردپرسی در کامپیوتر
  • چطور محتوای متناسب با موبایل را در وردپرس ایجاد کنیم؟

چرا باید این روش ها را برای مشاهده نسخه موبایلی سایت یاد بگیریم؟

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

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

بیش از ۵۰٪ بازدیدکنندگان وبسایت­‌ها، برای دسترسی به سایت­‌ها از تلفن­‌های همراه خود استفاده می‌­کنند. و در حدود ۳٪ افراد از تبلت برای به بازدید سایت بهره‌مند می‌شوند. این بدان معنی است که داشتن سایتی که دارای یک نسخه موبایلی است، بسیار ضروری است. نمایش سایت وردپرسی در موبایل آنقدر مهم شده است که گوگل اکنون از  ایندکس ” mobile-first” برای الگوریتم رتبه بندی وبسایت خود استفاده می‌­کند.

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

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

حال نوبت به بررسی روش‌های مختلف برای مشاهده نسخه موبایل سایت وردپرسی در کامپیوتر رسید. با هم ببینیم…

۱- استفاده از Customizer یا سفارشی سازی در وردپرس

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

customizer- نسخه موبایل سایت وردپرسی در کامپیوتر
مراجعه به بخش سفارشی سازی

با این کار، بخش سفارشی‌سازی پوسته وردپرس باز می‌شود. بسته به اینکه از چه پوسته و یا تمی استفاده می­‌کنید، ممکن است گزینه­‌ها کمی متفاوت نسبت به آنچه در منوی سمت راست در اینجا مشاهده کنید، باشد:

customize menu- نمایش سایت وردپرسی در موبایل
مشاهده منوهای سفارشی سازی قالب در سایت

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

show website on mobile- مشاهده سایت بصورت موبایل
مشاهده سایت در حالت موبایل

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

۲- استفاده از حالت دستگاه DevTools گوگل کروم

مرورگر Google Chrome مجموعه‌ای از ابزارهای برنامه نویسی را به همراه دارد که به شما یک سری امکان ویژه‌­­ای می­‌دهد. با استفاده از  DevTools  شما می‌توانید خیلی از مواردی را که در وبسایت انجام داده‌­اید، چک کنید. از جمله این موارد می‌­توان به دیدن پیش‌نمایش ظاهر وبسایت شما در دستگاه‌های تلفن همراه اشاره کرد.
به این منظور، ابتدا مرورگر گوگل کروم خود را در کامپیوتر باز کرده و به صفحه مورد نظر خود مراجعه کنید. شما حتی می­‌توانید با استفاده از این ویژگی پیش‌نمایش صفحه‌ای از سایت خود و یا حتی وبسایت رقیب خود را بررسی کنید. سپس باید روی صفحه کلیک راست کرده و “Inspect” را انتخاب کنید.

  چگونه پست ها با بیشترین دیدگاه در وردپرس را  نمایش دهیم؟
inspect element- مشاهده حالت واکنش‌گرایی با inspect
مشاهده حالت واکنش‌گرایی با inspect

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

show codes- نمایش واکنش‌گرایی
نمایش واکنش‌گرایی در مرورگر

از دید یک توسعه دهنده وبسایت، می‌­توانید منبع کد HTML سایت خود را مشاهده کنید.
در مرحله بعدی، روی دکمه ” Toggle Device Toolbar” کلیک کنید تا نمای ظاهری سایت به نسخه موبایل تغییر یابد. همچنین شما با فشردن ” Ctrl+Shift+I” می‌­توانید به این صفحه و نسخه موبایلی سایت دسترسی پیدا کنید.

Toggle Device Toolbar- نمای موبایل در مرورگر
نمایی از حالت موبایل در مرورگر

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

move mouse- حرکت ماوس روی صفحه نمایش
حرکت ماوس روی صفحه نمایش

 

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

topbar menu- منوی موجود در تاپ بار
منوی موجود در تاپ بار موبایلی

این موارد به شما اجازه می­‌دهند چندین کار مازاد را برای سخه موبایل سایت وردپرسی در کامپیوتر، انجام دهید. می‌­توانید بررسی کنید که سایت شما در انواع گوشی های هوشمند چگونه دیده خواهد شد. به عنوان مثال در عکس زیر ما دو نمونه از مدل­‌های موجود از گوشی را انتخاب و نسخه موبایل وبسایت وردپرسی خود را در آن دیدیم.

نمایش سایت در گلکسی S5
نمایش سایت در گلکسی S5
نمایش سایت در iPhoneX
نمایش سایت در iPhoneX

همچنین در بررسی نسخه موبایل سایت وردپرسی در کامپیوتر می­‌توانید عملکرد سایت خود را بر روی اتصالات سریع یا 3G  و آهسته را بررسی کنید. حتی می‌­توانید با استفاده از نماد چرخش، صفحه موبایل را بچرخانید و نمایی دیگر از وبسایت خود را ببینید. خب تمام این‌­ها نکات جالبی از وبسایت شما را به نمایش خواهند گذاشت که مطمئنا دانستن و دیدن آن­ها خالی از لطف نیست.

چطور محتوای متناسب با موبایل را در وردپرس ایجاد کنیم؟

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

هما‌‌‌‌نطور که می­‌دانید، کاربران دستگاه‌­های تلفن همراه اغلب به دنبال چیزهای متفاوتی نسبت به کاربرانی که از کامپیوتر استفاده می‌­کنند، هستند. خب پس می‌توان با ایجاد یک‌سری تفاوت­‌ها در نسخه موبایلی نسبت به دسکتاپ، جذابیت دوچدانی ایجاد کرد. مثلاً شما می‌توانید برای نسخه موبایل سایت وردپرسی در کامپیوتر و یا نمایش کاملاً متفاوتی را ایجاد کنید. به این منظور شما می‌­توانید از افزونه پرکاربردی مثل ” Beaver Builder” برای ویرایش صفحات فرود در نمای تلفن همراه وبسایت استفاده کنید.

brave builder- نسخه موبایل سایت وردپرسی در کامپیوتر
افزونه ساخت صفحات فرود در حالت موبایلی

در آموزش امروز چه چیزی یاد گرفتیم؟

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

سوالات متداول

زمانی که شما بتوانید سایت خود را در تمامی دستگاه‌های موجود اعم از انواع مانیتورها، گوشی های موبایل، تبلت مشاهده کنید یعنی سایت شما واکنش گرا بوده و با توجه به هر صفحه نمایشی متناسب شده و قابل استفاده است.
ممکن است بعضی از افراد بگویند نیازی به این روش­‌ها نیست و از طریق تلفن خود می­‌توان به نسخه موبایل سایت به صورت زنده دسترسی داشت. ولی خب این روش در مرحله توسعه نمی­­‌تواند كمكی کند. پس باید از روش‌هایی که امروز به شما می‌گوییم استفاده کرد. دلیل دوم این است که حتی وقتی سایت شما بارگذاری شده باشد، اغلب مشاهده نسخه موبایل سایت در کامپیوتر آسان­‌تر است، بنابراین می توانید به سرعت تغییرات را ایجاد کرده و تأثیر آن‌ها را ببینید بدون اینکه دستگاه خود را تغییر دهید.
استفاده از Customizer یا سفارشی سازی در وردپرس استفاده از حالت دستگاه DevTools گوگل کروم
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

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

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.