طراحی سایت واکنش‌گرا
امروزه هر شخصی یک دستگاه متصل به اینترنت در اختیار دارد که ممکن است این دستگاه یک تلفن همراه , تبلت , لپ تاپ و حتی یک تلویزیون هوشمند باشد. با گسترش روز افزون کاربران از اینترنت همراه و استفاده اکثریت مردم از این گجت ها برای وب گردی و انجام کارهای روزانه دیگر وقت آن رسیده تا همه سایت ها به صورت واکنش گرا یا 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%;
}
مفهوم کدهای بالا این است که محتوا میتواند ۱۰۰% از عرض صفحه نمایش را بگیرد. عرض صفحه نمایش نیز ۴۰۰ پیکسل تعریف شده است.
گام بعدی تصویر بالایی سایت یا header است. اگر می‌خواهید این تصویر مخفی شود از کد زیر :
#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%;
}
و در انتها با ذخیره‌سازی فایل و تست سایت بر روی گوشی همراه خود می‌توانید از نسخه واکنش‌گرای سایت خود لذت ببرید.
تمامی کدهای بالا در کادر زیر وارد شده است. برای راحتی کار می‌توانید از همین کادر تمام کدها را کپی کرده و در فایل style.css قرار دهید.
#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%;
}
فایل ویدئویی آموزش کامل واکنش گرا کردن قالب پیش فرض وردپرس می‌باشد :
