چگونه قالب ریسپانسیو وردپرسی طراحی کنیم ؟

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

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

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

اصلا ریسپانسیو(responsive) یا قالب ریسپانسیو به چه معناست؟

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

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

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

امکان حرکت سایدبار در صفحه نمایش کوچک قالب ریسپانسیو

همونطور که در بالا هم گفتیم مکان قسمت سایدبار در قالب ریسپانسیو با توجه به اندازهء صفحهء نمایش دستگاهی که سایت را با آن باز کردیم میتونه متفاوت باشه.حالا میخواهیم بدونیم در صفحه نمایش های کوچیک چگونه ساید بار رو به پایین صفحه منتقل کنیم.یکی از روشهای رایج برای انجام این کار استفاده ازخاصیت @media در فایل style.css پوسته است.کد زیر را در نظر بگیرید,در این کد نحوهء استفاده از این خاصیت را به شما نشان دادیم:

@media (max-width: 960px) {
#pgwrap .sidebar {
float: none;
margin-left: 0;
width: auto;
}
}

کد بالایی در صفحه نمایش هایی که حداکثر عرض ۹۶۰px دارند اجرا خواهد شد و شما می توانید این مقدار را به هر اندازه صفحه ای تغییر دهید. شما میتوانید برای قسمت سایدبار قالب ریسپانسیو شده سایت خودتان از کد زیر استفاده کنید:

@media (max-width: 960px) {
#pgwrap .sidebar{
Float: right;
Margin-left: 33px
Width: auto;
}}

همانطور که در کد بالا مشخص است ,این کد یک نمونه چینش برای صفحه نمایش هایی با اندازهء حداکثر ۹۶۰px است و شما میتوانید این کد ا با توجه به طراحی خودتان تغییردهید.مثلا برای طراحی قالب ریسپانسیو سایتتان در سایز موبایل میتوانید از کد زیر استفاده کنید:

@media (max-width: 320px) {
#pgwrap .sidebar {
padding: 0;
}
}

همینطور که از این آموزش متوجه شدیم خاصیت @media اندازهء صفحهء نمایشه دستگاهی که سایت با آن باز شده را تشخیص میدهد و شما با استفاده از این خاصیت میتوانید برای صفحه نمایش های مختلف طراحی ها و اندازه های مختلف داشه باشید.