منظور از ریسپانسیو کردن سایت چیست ؟
طراحی ریسپانسیو (responsive) به معنی تعیین چیدمان و عملکرد وب سایت با اندازه دستگاه و صفحه نمایش کاربر است. این طراحی به طوری است که کاربران بتوانند بدون توجه به دستگاه مورد استفاده، یک تجربه کاربری مطلوب و بهینه را داشته باشند. برای توسعه وب سایت و طراحی رابط کاربری آسان، باید توجه ویژه‌ای به ریسپانسیو کردن سایت وردپرسی خود داشته باشید.
طراحی ریسپانسیو سایت به دلیل اهمیتش در سه سال اخیر، توسط اکثر قالب های وردپرسی پشتیبانی می‌شود. صفحه سازهای قدرتمندی همچون المنتور هم دارای این ویژگی هست و به صورت خودکار ریسپانسیوی سایت را انجام می‌دهد. راه های مختلفی برای ریسپانسیو کردن سایت وردپرس می باشد، از جمله استفاده از افزونه و یا استفاده از کد برنامه نویسی. در ادامه در مورد هر کدام از این روش‌ها را به طور کامل صحبت می‌کنیم.
ریسپانسیو کردن سایت وردپرس با افزونه
ریسپانسیو کردن سایت وردپرس با استفاده از افزونه های مختلفی امکان پذیر است. یکی از این افزونه ها WPtouch می‌باشد که نحوه نصب و فعال سازی آن به شرح زیر است:
- وارد پیشخوان وردپرس شوید
- با مراجعه به قسمت افزونه ها، گزینه افزودن را انتخاب کنید
- در قسمت جستجو، WPtouch را جستجو کنید
- پس از پیدا شدن افزونه، آن را دانلود و نصب کنید
- پس از نصب، افزونه را فعال کنید
- به قسمت WPtouch در پیشخوان بروید و گزینه تنظیمات را انتخاب کنید
- چک کنید که گزینه Display WPtouch for mobile visitors فعال باشد، تبریک ! سایت شما ریسپانسیو شد.
از دیگر افزونه هایی که سایت وردپرسی شما را ریسپانسیو می‌کنند می‌توان به Jetpack Any Mobile Theme Switcher ، WP Mobile DetectWP ،Mobile Edition و WP-Responsive اشاره کرد.
ریسپانسیو کردن سایت وردپرس با استفاده از کد
توجه داشته باشید که قبل از انجام مطالبی که در ادامه ذکر می‌شود حتما از سایت خود بکاپ تهیه کنید. برای ریسپانسیو کردن سایت از طریق کد ابتدا فایل هدر (مثل: header.php) قالب سایت خود را باز کرده و کدهای زیر را بین دو تگ <head> و </head> قرار دهید.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" media="screen and (min-width: 768px)">
سپس فایل Style.css قالب سایت خود را باز کرده و کد زیر را در انتهای این فایل قرار داده و ذخیر کنید.
/* styles for larger screens */
#content {
width: 70%;
}
#sidebar {
width: 30%;
display: block;
}
/* styles for screens between 600px and 1200px */
@media only screen and (min-width: 600px) and (max-width: 1200px) {
#content {
width: 80%;
}
#sidebar {
width: 20%;
}
}
برای تست ریسپانسیو بودن وب‌سایت خود می‌توانید از ابزار زیر کمک بگیرید.
تست ریسپانسیوی وب‌سایت
شما می‌توانید برای بررسی ریسپانسیوی وب سایت خود از ابزارهای زیر استفاده کنید:
- ViewPort Resizer
ViewPort Resizer یک افزونه است که با نصب آن بر روی مرورگر خود می‌توانید نحوه نمایش وب سایت خود در دستگاه‌های مختلف را مشاهده کنید. - Google Resizer
Google Resizer ابزاری است که توسط گوگل ارائه شده است؛ شما با ورود به Google Resizer و وارد کردن URL وب سایت خود می‌توانید نحوه نمایش آن در دستگاه‌های مختلف را مشاهده کنید. - Responsinator
برای مشاهده وب سایت خود در دستگاه‌های مختلف، وارد وب سایت Responsinator شوید و URL وب سایت خود را وارد کنید. - mobile friendly test
این ابزار یکی از امکانات گوگل است که شما می‌توانید با مراجعه به آن، URL وب سایت خود را در آن وارد کنید و نحوه نمایش وب سایت در دستگاه‌های مختلف را مشاهده کنید. - Screenfly
یکی از بهترین ابزارها برای تست ریسپانسیو وب سایت، Screenfly است. برای مشاهده نحوه نمایش وب سایت خود در دستگاه‌های مختلف وارد وب سایت Screenfly شوید و آدرس URL خود را وارد کنید. - Google Chrome
یکی از ابزارهای عمومی و در دسترس همه افراد ابزارهای تست ریسپانسیو کروم گوگل است که در ادامه نحوه کارکرد آن را به صورت کامل شرح می‌دهیم.
