امروزه هر شخصی یک دستگاه متصل به اینترنت در اختیار دارد که ممکن است این دستگاه یک تلفن همراه , تبلت , لپ تاپ و حتی یک تلویزیون هوشمند باشد. با گسترش روز افزون کاربران از اینترنت همراه و استفاده بیشتر مردم از این گجت‌ها جهت وب گردی و انجام امور روزانه دیگر وقت آن رسیده تا همه سایت‌ها به صورت واکنش گرا یا Responsive طراحی شوند. سایت‌ها در ابتدا برای کامپیوترهای خانگی طراحی شده اند و برای سایز کوچک صفحه نمایش مناسب نیستند. به همین دلیل بیشتر افراد برای مرور سایت‌ها با دستگاه های همراه با مشکلاتی از قبیل :
و مشکلاتی از این دست مواجه می‌شوند که نتیجه آن خروج کاربران از سایت خواهد بود. پس برای آن که یک طراحی سایت موفق داشته باشید و بتوانید بازدید خود را افزایش دهید، باید حتما واکنش گرا بودن قالب را در نظر داشته باشید.
قبلا خواندید که سایت واکنش‌گرا چیست و چگونه کار می‌کند. در این مقاله قصد داریم به شما آموزش بدهیم تا چگونه یک قالب معمولی را به صورت واکنش گرا تغییر دهید تا کاربران بتوانند از هر دستگاهی سایت شما را به صورت کامل و درست مشاهده کنند. در این مقاله واکنش‌گرا کردن قالب پیش فرض TwentyTen در سیستم مدیریت محتوا وردپرس آموزش داده می‌شود. اما شما می‌توانید همین تغییرات را بر روی هر قالب دیگری انجام داده و آن قالب را Responsive نمایید.
برای شروع باید به سراغ فایل Style.css بروید و تغییرات زیر را در آن ایجاد کنید.
برای دسترسی به این فایل از مسیر زیر استفاده کنید :
پنل مدیریت وردپرس >>> نمایش >>> ویرایشگر >>> فایل Style.css
در مرحله اول کد زیر را در انتهای فایل اضافه کنید :
@media only screen and (max-width: 480px) {
}
افزودن این کد به مرورگر بیان می‌کند اگر سایز صفحه نمایش کاربر کوچکتر از ۴۸۰ پیکسل باشد نسخه موبایل سایت برای او نمایش داده شود.
۴۸۰ پیکسل حداکثر عرض صفحه نمایش برای اکثر گوشی‌های هوشمند موجود در بازار است.
و برای پشتیبانی از تبلت‌ها که عرض صفحه نمایش آنها ۹۵۹ پیکسل است از کد زیر استفاده کنید :
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
مرحله بعد افزودن کد زیر است :
#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {
width:400px;
}
و کد زیر :
#container {
width:100%;
}
مفهوم کدهای بالا این است که محتوا می‌تواند ۱۰۰% از عرض صفحه نمایش را بگیرد. عرض صفحه نمایش نیز ۴۰۰ پیکسل تعریف شده است.
#branding img {
display:none;
}
#branding img {
width:100%
}
کد بالا مشخص می‌کند اندازه تصویر هدر باید ۱۰۰% عرض صفحه نمایش باشد که در ابتدا ۴۰۰ پیکسل مشخص شد.
#site-description{
display:none;
}
#site-description{
float:left;
}
#access{
width:100%;
}
#content{
width:100%;
}
.hentry{
margin-left:-13px;
}
#primary{
display:none;
}
This one resizes the footer section:</pre>
<blockquote>
#footer{
width:100%;
}
#site-generator {
float:left;
margin-top:5px;
}
#colophon {
width:100%;
}
و در انتها با ذخیره‌سازی فایل و تست سایت بر روی گوشی همراه خود می‌توانید از نسخه واکنش‌گرای سایت خود لذت ببرید.
#access .menu-header, div.menu, #colophon, #branding, #main, #wrapper, #site-title {
width:400px;
}
#container {
width:100%;
}
#branding img {
width:100%
}
#site-description{
float:left;
}
#access{
width:100%;
}
#content{
width:100%;
}
.hentry{
margin-left:-13px;
}
#primary{
display:none;
}
This one resizes the footer section:</pre>
<blockquote>
#footer{
width:100%;
}
#site-generator {
float:left;
margin-top:5px;
}
#colophon {
width:100%;
}
برای طراحی سایت نیاز به کمک دارید؟
سلام خوش آمدید!
برای ارائه خدمات بهتر در زمینه طراحی سایت و سئو مشاوران ما در واتس اپ در خدمت شما هستند.
دیدگاهتان را بنویسید