چگونه ریسپانسیو سایت وردپرسی را به درستی انجام دهیم؟

وردپرس 7 دقیقه زمان مطالعه

ریسپانسیو کردن سایت وردپرس یکی از مهمترین مباحث در طراحی سایت و تجربه کاربری است. در این مقاله به طور کامل نکات این مورد را مرور

با گسترش دنیای دیجیتال و افزایش کاربران موبایل و تبلت، ریسپانسیو کردن سایت وردپرس امری مهم و ضروری به حساب می‌آید. اینکه سایت در Deviceهای مختلف متناسب با سایز دستگاه نمایش داده شود. اگر شما هم به دنبال بهینه کردن وب سایت وردپرسی خود هستید، در این مقاله نحوه ریسپانسیو کردن وردپرس را به شما آموزش می‌دهیم. حتماً تا انتهای این مقاله همراه ما باشید.

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

ریسپانسیو (responsive) واژه‌ای انگلیسی و به معنای «پاسخگو» یا «واکنش‌گرا» است. هنگامی که از ریسپانسیو کردن سایت وردپرس صحبت می‌شود، منظور طراحی یک وب سایت به گونه‌ای است که چیدمان و عملکرد آن با اندازه دستگاه و صفحه نمایش کاربر تنظیم شود. در نتیجه کاربران وب سایت شما می‌توانند یک تجربه کاربری مطلوب و بهینه را بدون توجه به دستگاه مورد استفاده داشته باشند. ما در مقاله معرفی تجربه کاربری به طور کامل توضیح دادیم که تجربه کاربری یا ux چیست؟

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

چگونه سایت وردپرسی خود را ریسپانسیو کنیم؟

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

به کمک افزونه
استفاده از کد برنامه‌نویسی

در ادامه به طور کامل به هرکدام از این روش‌ها می‌پردازیم.

ریسپانسیو کردن سایت وردپرس با افزونه

برای ریسپانسیو کردن سایت وردپرس خود با استفاده از افزونه، گزینه‌های مختلفی مانند افزونه‌های وردپرس زیر وجود دارند:

WPtouch
Jetpack Any Mobile Theme Switcher
WP-Responsive
WP Mobile Detect
WP Mobile Edition

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

وارد وردپرس وب سایت خود شوید.
با مراجعه به قسمت «پیشخوان»، گزینه «افزونه‌ها» را انتخاب کنید.
بر روی گزینه «افزودن» کلیک کنید و در قسمت جستجو، «WPtouch» یا افزونه دیگر مورد نظر را وارد کنید.
پس از آنکه افزونه WPtouch را پیدا کردید، آن را دریافت و نصب کنید.
افزونه را فعال کنید و به قسمت «پیشخوان» وردپرس بروید.
در قسمت «WPtouch»، گزینه «تنظیمات» را انتخاب کنید.
با توجه به پنجره باز شده، حتماً چک کنید که گزینه «Display WPtouch for mobile visitors»‌ فعال باشد.

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

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

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

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

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

وارد فایل header شوید و قطعه کد زیر را بین تگ‌های <head> و </head> قرار دهید.
برای ریسپانسیو کردن قالب وردپرس، می‌توانید یک متا تگ در بخش فایل HTML قالب خود اضافه کنید تا مطمئن شوید که وب‌سایت برای دستگاه‌های تلفن همراه بهینه شده است. متا تگی که باید اضافه کنید این است:

&amp;amp;lt;meta name="viewport" content="width=device-width, initial-scale=1"&amp;amp;gt;

این متا تگ به مرورگر می‌گوید که عرض نمایشگر را بر روی عرض دستگاه تنظیم کند و سطح بزرگنمایی اولیه را روی «۱» تنظیم کند.

پس از آن این قطعه کد CSS هم اضافه کنید.

&amp;amp;lt;link rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" href="desktop.css"&amp;amp;gt;

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

/* 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%;
}
}

با این قطعه کد، پهنای ناحیه محتوا در صفحه‌های بین ۶۰۰ تا ۱۲۰۰ پیکسل به ۸۰ درصد و نوار کناری تا ۲۰ درصد تنظیم می‌شود.

استاندارد عمومی رزولوشن برای کامپیوتر خانگی و لپ تاپ ۱۰۲۴، برای موبایل ۳۲۷ و برای تبلت و لپ تاپ‌های کوچک ۷۶۸ (۳۲۷ تا ۱۰۲۴) است.

ریسپانسیو کردن تصاویر و جداول سایت

گاهی در پروسه ایجاد جدول در وردپرس برای نمایشگر در سایز موبایل دچار مشکل می‌کند. این CSS باعث می‌شود که جدول تمام عرض صفحه را بگیرد، فضای بین سلول‌ها را حذف کند، عرض ستون‌ها را تنظیم کند و سرصفحه‌های جدول را پررنگ کند. علاوه بر این، جدول را در صفحه نمایش های کوچکتر از 768 پیکسل پنهان می کند.

table {
width: 100%; /* set the table to take up the full width of the screen */
border-collapse: collapse; /* remove the space between cells */
}&amp;lt;/pre&amp;gt;
/* set the width of the table columns */
th, td {
width: 25%;
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

/* make the table headers bold */
th {
font-weight: bold;
}

/* hide the table on screens smaller than 768px */
@media only screen and (max-width: 768px) {
table {
display: none;
}
}

&amp;lt;pre&amp;gt;

برای تصاویر، می توانید از ویژگی srcset و ویژگی sizes برای بارگذاری تصاویر مختلف برای اندازه های مختلف صفحه استفاده کنید، به عنوان مثال:

&amp;lt;img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1024w" sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 25vw" alt="responsive image"&amp;gt;

این کد تصویر small.jpg را در دستگاه‌هایی با عرض صفحه نمایش 600 پیکسل یا کمتر، medium.jpg در صفحه‌های بین 600 تا 1024 پیکسل و large.jpg در صفحه‌های بزرگتر از 1024 پیکسل بارگیری می‌کند.

این مقاله را حتما بخوانید

فرم ساز چیست؟ و معرفی بهترین فرم سازهای وردپرس

تبریک! اکنون سایت وردپرسی شما با موفقیت ریسپانسیو شده است. در انتهای این قسمت از مقاله یک قطعه کد کامل شامل جدول، سایدبار و تصویر آورده شده است. به قسمت‌های مختلف Head و Body توجه کنید:

&lt;/pre&gt;
&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
&amp;lt;meta name="viewport" content="width=device-width, initial-scale=1"&amp;gt;
&amp;lt;link rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" href="desktop.css"&amp;gt;
&amp;lt;style&amp;gt;
/* styles for larger screens */
#content {
width: 70%;
}
#sidebar {
width: 30%;
display: block;
}

/* styles for screens up to 768px */
@media only screen and (max-width: 768px) {
#content {
width: 100%;
}
#sidebar {
display: none;
}
}
/* styles for table */
table {
width: 100%; /* set the table to take up the full width of the screen */
border-collapse: collapse; /* remove the space between cells */
}

/* set the width of the table columns */
th, td {
width: 25%;
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

/* make the table headers bold */
th {
font-weight: bold;
}

/* hide the table on screens smaller than 768px */
@media only screen and (max-width: 768px) {
table {
display: none;
}
}
&amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
&amp;lt;div id="content"&amp;gt;
&amp;lt;table&amp;gt;
&amp;lt;thead&amp;gt;
&amp;lt;tr&amp;gt;
&amp;lt;th&amp;gt;Header 1&amp;lt;/th&amp;gt;
&amp;lt;th&amp;gt;Header 2&amp;lt;/th&amp;gt;
&amp;lt;th&amp;gt;Header 3&amp;lt;/th&amp;gt;
&amp;lt;th&amp;gt;Header 4&amp;lt;/th&amp;gt;
&amp;lt;/tr&amp;gt;
&amp;lt;/thead&amp;gt;
&amp;lt;tbody&amp;gt;
&amp;lt;tr&amp;gt;
&amp;lt;td&amp;gt;Row 1 Column 1&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;Row 1 Column 2&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;Row 1 Column 3&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;Row 1 Column 4&amp;lt;/td&amp;gt;
&amp;lt;/tr&amp;gt;
&amp;lt;tr&amp;gt;
&amp;lt;td&amp;gt;Row 2 Column 1&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;Row 2 Column 2&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;Row 2 Column 3&amp;lt;/td&amp;gt;
&amp;lt;td&amp;gt;Row 2 Column 4&amp;lt;/td&amp;gt;
&amp;lt;/tr&amp;gt;
&amp;lt;/tbody&amp;gt;
&amp;lt;/table&amp;gt;

&amp;lt;img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1024w" sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 25vw" alt="responsive image"&amp;gt;

&amp;lt;/div&amp;gt;
&amp;lt;div id="sidebar"&amp;gt;
Sidebar Content
&amp;lt;/div&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;pre&gt;

بهترین ابزارهای تست ریسپانسیو وب‌سایت

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

ViewPort Resizer
ViewPort Resizer یک افزونه است که با نصب آن بر روی مرورگر خود می‌توانید نحوه نمایش وب سایت خود در دستگاه‌های مختلف را مشاهده کنید.
Google Resizer
Google Resizer ابزاری است که توسط گوگل ارائه شده است؛ شما با ورود به Google Resizer و وارد کردن URL وب سایت خود می‌توانید نحوه نمایش آن در دستگاه‌های مختلف را مشاهده کنید.
Responsinator
برای مشاهده وب سایت خود در دستگاه‌های مختلف،‌ وارد وب سایت Responsinator شوید و URL وب سایت خود را وارد کنید.
mobile friendly test
این ابزار یکی از امکانات گوگل است که شما می‌توانید با مراجعه به آن،‌ URL وب سایت خود را در آن وارد کنید و نحوه نمایش وب سایت در دستگاه‌های مختلف را مشاهده کنید.
Screenfly
یکی از بهترین ابزارها برای تست ریسپانسیو وب سایت، Screenfly است. برای مشاهده نحوه نمایش وب سایت خود در دستگاه‌های مختلف وارد وب سایت Screenfly شوید و آدرس URL خود را وارد کنید.
Google Chrome
یکی از ابزارهای عمومی و در دسترس همه افراد ابزارهای تست ریسپانسیو کروم گوگل است که در ادامه نحوه کارکرد آن را به صورت کامل شرح می‌دهیم.

تست ریسپانسیو سایت با Google Chrome

برای تست ریسپانسیو وب سایت خود توسط Google Chrome، مراحل زیر را به ترتیب دنبال کنید:

وب سایت خود را در مرورگر Google Chrome باز کنید و بر روی صفحه مشاهده شده راست کلیک کنید.
گزینه «Inspect» را در منوی باز شده انتخاب کنید.
بر روی گزینه «Toggle device toolbar» کلیک کنید. اکنون می‌توانید نحوه نمایش وب سایت خود در دستگاه‌های مختلف را مشاهده کنید.

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

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