icon
می‌خوای از تخفیفات ویژه مطلع بشی؟
جشنواره‌ها و تخفیفات شگفت انگیز را از طریق اعلان به شما اطلاع می‌دیم.
ایکون
قالب اکسترا
130 سایت آماده شرکتی و فروشگاهی
فقط 1,947,000 تومان
مشاهده و خرید
مجموعه مقالات وردپرس

ریسپانسیو کردن وردپرس با Wptouch

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

9
27 شهریور 1400
آخرین بروزرسانی: 13 اسفند 1404

در دنیای دیجیتال امروز افراد زیادی از تبلت ها و تلفن های هوشمند برای دسترسی به اینترنت استفاده می کنند. از آنجایی که حدود 30 درصد وبسایت های موجود با وردپرس طراحی و ایجاد شده اند، وجود قالب های ریسپانسیو و آشنایی با ابزارهای ریسپانسیو سایت مانند افزونه ریسپانسیو کردن وردپرس یعنی Wptouch Pro بسیار ضروری است. ریسپانسیو (Responsive) یا واکنش گرایی موجب عملکرد هوشمند قالب سایت نسبت به سیستم ورودی کاربر می شود. علاوه بر آن با توجه به اهمیتی که گوگل برای نمایش صحیح سایت ها در موبایل ها دارد، باید از بهینه سازی وردپرس برای موبایل اطمینان حاصل کرد تا رتبه سئوی شما به دلیل نداشتن وب سایت سازگار با تلفن همراه کاهش پیدا نکند.

ریسپانسیو کردن وردپرس چیست؟

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

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

Mobile Usability در سرچ کنسول

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

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

 

ریسپانسیو کردن وردپرس در سرچ کنسول

افزونه ریسپانسیو  WPtouch Pro

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

افزونه ریسپانسیو WP touch Pro قالبی سبک با امکان سفارشی سازی جنبه های ظاهری دارد و شما بدون توجه به قالب اصلی و دستکاری نسخه دسکتاپ سایت خود یک سایت رسپانسیو ایجاد کنید. بیش از نیم میلیون سایت در سراسر جهان با کمک WPtouch موبایل فرندلی شده اند!

محصول پیشنهادی
بنر
افزونه WPtouch Pro، افزونه نسخه موبایل سایت وردپرس
دسته بندی : افزونه کاربردی
312
فروش
20%
رضایت

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

نصب و راه اندازی افزونه WPtouch Pro

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

برای اعمال تنظیمات شخصی سازی افزونه بر روی گزینه تنظیمات کلیک کنید تا مستقیما وارد تنظیمات افزونه شوید. برای مثال، تغییر وضعیت (سوییچ) به موبایل/دسکتاپ، نشان‌دهنده یک دکمه ی تغییر وضعیت در هر دو تم موبایل و دسکتاپ است که به کاربران امکان تغییر وضعیت بین تم‌ها را می‌دهد.

ریسپانسیو کردن وردپرس افزونه WPtouch Pro

 

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

 

آموزش ریسپانسیو وردپرس با افزونه WPtouch Pro

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

ریسپانسیو سایت با افزونه WPtouch Pro

 

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

 ریسپانسیو کردن وردپرس با افزونه WPtouch Pro موبایل فرندلی

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

مهسا هستم، عاشق زندگی، نوشتن، نقاشی و صد البته مهارت‌ها و تجربه های جدید :)
مقالات مرتبط
بنر
تنظیمات وبلاگ قالب وودمارت
در این مقاله با تنظیمات وبلاگ قالب وودمارت آشنا می شوید و یاد می گیرید چطور ظاهر نوشته ها، صفحه آرشیو و اطلاعات مقاله را مدیریت کنید. هدف این راهنما کمک به ساخت یک وبلاگ حرفه ای، منظم و مناسب برای تجربه کاربری و سئو است.
بنر
افزایش سرعت المنتور (12 راهکار تضمینی)
صفحه ساز محبوب امروزه توسط 11 میلیون سایت‌های وردپرسی در حال استفاده است. بهینه بودن سایت روی سرعت بارگذاری المنتور و المان‌های آن تاثیر مستقیم می گذارد. سرعت پایین سایت عواقب بدی از جمله ترک مشتریان و کاهش فروش سایت دارد. پیشنهاد می کنم اگر شما هم سایت المنتوری دارید، روش‌های افزایش سرعت ...
بنر
قرار دادن کد HTML در المنتور
در طراحی صفحات با المنتور، گاهی لازم است تا از کدهای سفارشی برای افزودن قابلیت‌ یا استایل‌ خاص استفاده کنیم. در چنین مواقعی، قرار دادن کد HTML در المنتور یکی از ساده‌ ترین روش‌هاست که به طراح اجازه می‌دهد بدون نیاز به افزونه‌های اضافی، عناصر دلخواه خود را اضافه کند. با این روش، می‌توان بخش‌هایی ...
بنر
ویرایش صفحه فروشگاه قالب وودمارت
در این مقاله، نحوه ویرایش و شخصی‌سازی صفحه فروشگاه در قالب WoodMart آموزش داده می‌شود تا ظاهر صفحه فرشگاه شما منحصر به‌ فرد و کاربرپسند شود. با استفاده از ابزارهای داخلی وودمارت و تنظیمات ووکامرس، می‌توانید فروشگاه آنلاین خود را سفارش سازی کنید.
9 دیدگاه
mmelika
mmelika
11 آبان 1404 14:43

سلام خسته نباشید.سایت من با قالب خبری یاقوت ساخته شده.افزونه Wptouch PRO روی این قالب کار میکنه؟

آیا مفید بود ؟
0
aref77
aref77
26 آبان 1402 19:04

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

آیا مفید بود ؟
0
فاطمه سامانی | کارشناس‌ارشد سئو
فاطمه سامانی | کارشناس‌ارشد سئو
27 آبان 1402 14:01

سلام دوست عزیز
به طراح افزونه Wptouch تیکت بزنید و این سوال را بپرسید

آیا مفید بود ؟
bobo_xy
bobo_xy
12 مهر 1402 20:20

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

آیا مفید بود ؟
0
فاطمه سامانی | کارشناس‌ارشد سئو
فاطمه سامانی | کارشناس‌ارشد سئو
23 مهر 1402 11:29

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

آیا مفید بود ؟
فرهاد حسامی
فرهاد حسامی
01 مرداد 1402 12:11

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

آیا مفید بود ؟
0
فاطمه سامانی | کارشناس‌ارشد سئو
فاطمه سامانی | کارشناس‌ارشد سئو
01 مرداد 1402 13:41

سلام فرهاد عزیز
لینک افزونه توی مقاله هست
https://www.rtl-theme.com/wptouch-pro-wordpress-plugin/

آیا مفید بود ؟
ali0282
ali0282
16 تیر 1402 19:35

سلام وقت بخیر
تنظیماتی که روی حالت موبایل در قالب ودمارت انجام میدم همون تنظیمات روی نسخه دسکتاپ هم اعمال میشه.چیکار کنم؟

آیا مفید بود ؟
0
فاطمه سامانی | کارشناس‌ارشد سئو
فاطمه سامانی | کارشناس‌ارشد سئو
20 تیر 1402 08:11

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

آیا مفید بود ؟