آموزش ساخت قالب های رسپانسیو وردپرس

آموزش ساخت قالب های رسپانسیو وردپرس

اولین سوالی که ممکن است برایتان پیش آید، این است که رسپانسیو چیست؟ رسپانسیو یا همان واکنشگرا تکنیکی در طراحی پوسته است که این امکان را فراهم می کند سایت در هر اندازه صفحه نمایشی با طراحی خاص و زیبا نشان داده شود و هیچگونه بهم ریختگی در سایت دیده نشود. از این رو با طراحی پوسته رسپانسیو برای سایت وردپرسی خود، طراحی زیبایی در هر اندازه صفحه نمایشی (گوشی، تبلت، نوت بوک و…) خواهید داشت.

طراحی یک کلید است

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

طراح اولیه را آماده کنید

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

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

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

همانطور که از عنوان پاراگراف مشخص است، خواهیم گفت که چگونه به سایدبار این امکان را دهیم تا در صفحه نمایش های کوچک تر در پایین صفحه نمایش داده شود. یکی از روش های رایج برای این کار استفاده از خاصیت @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 اندازه صفحه نمایش را تشخیص داده و شما می توانید برای صفحه نمایش های مختلف، طراحی های مختلفی داشته باشید. این آموزش تنها یک مقدمه از طراحی رسپانسیو پوسته وردپرس است. امیدوارم مفید واقع شود

موفق باشید