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

3

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

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

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

در این مقاله ، ما به شما دو روش ساده برای پیش نمایش آسان طرح موبایل سایت وردپرس بدون تغییر دستگاه های مختلف ، به شما نشان خواهیم داد.بیش از ۵۰٪ بازدید کنندگان وب سایت شما برای دسترسی به سایت شما از تلفن های همراه خود استفاده می کنند. حدود ۳٪ از تبلت استفاده می کنند.این بدان معنی است که داشتن سایتی که از نظر موبایل بسیار عالی به نظر می رسد ضروری است.

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

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

۱- از سفارشی سازی قالب وردپرس استفاده کنید

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


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


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


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

۲- از حالت دستگاه ابزار توسعه دهنده گوگل کروم استفاده کنید

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

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

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

از نمای توسعه دهنده ، می توانید کد منبع HTML سایت خود را مشاهده کنید.در مرحله بعدی ، روی دکمه “Toggle Device Toolbar” کلیک کنید تا نمای موبایل تغییر یابد.

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

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


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

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

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

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

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

زهراقادرپناه فارغ التحصیل رشته فناوری اطلاعات،مدیر و توسعه دهنده لرن دی ال :) طراح UI /UX

ما از شنیدن نظرات شما خوشحال خواهیم شد

      نظر بدهید

      11 + یازده =