ایکون
قالب اکسترا
120 وبسایت آماده شرکتی و فروشگاهی
فقط با 1,378,000 تومان
مشاهده و خرید
آموزش افزونه‌ها

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

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

8
27 شهریور 1400
آخرین بروزرسانی: 11 آذر 1403

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

 

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

 

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

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

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

 

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

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

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

مهسا کاظمی پور
مهسا کاظمی پور
مهسا هستم، عاشق زندگی، نوشتن، نقاشی و صد البته مهارت‌ها و تجربه های جدید :)
مقالات مرتبط
بنر
آموزش افزونه دیجیتس (ثبت نام سریع در سایت)
آموزش دیجیتس (ِDigits) شامل نصب، تنظیمات، فرم‌ها، اتصال به سامانه پیامکی، استایل و افزودنی‌ها است که این موارد را در این مقاله به صورت ویدئویی آموزش دادیم. کار کردن با افزونه دیجیتس بسیار راحت است و به سرعت می‌توانید با نصب افزونه دیجیتس امکان عضویت و ورد کاربران با شماره موبایل را فراهم کنید.
بنر
آموزش افزونه Ultimate Affiliate Pro
شاید برای شما هم پیش آمده که برای خرید یک محصول لینک را باز کنید ولی وارد دیجی کالا شوید؛ یکی از روش های کسب درآمد بدون فروش محصولات خودمان افیلیت مارکتینگ است. به این صورت که شما یک سایت با محتوا کامل دارید و به جای قرار دادن لینک محصولاتتان لینک محصولات سایر سایت ها را قرار می دهید به این صورت ...
بنر
آموزش افزونه لرن دش
در سال های اخیر آموزش آنلاین جزء جدایی ناپذیر از سیستم آموزشی شده است و بسیاری از افراد تمایل به شرکت در دوره های مجازی دارند. طراحی سایت های آموزش آنلاین قدم بزرگی در پیشرفت سیستم آموزشی است. اگر از قالب وردپرس استفاده می کنید با استفاده از افزونه های وردپرس مانند لرن دش می توانید سایت خود را ...
بنر
آموزش رنک مث؛ تنظیمات صفر تا 100 کاملا کاربردی
در آموزش رنک مث، شما را با نحوه نصب و راه اندازی آن آشنا خواهیم کرد تا بتوانید براحتی اصلی ترین تنظیمات سئو را برای سایت وردپرسی خود انجام دهید.
8 دیدگاه
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

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

آیا مفید بود ؟