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


responsive

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

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

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

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

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

reponsive-theme-layout

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

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

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

موفق باشید

 

به زودی در این مکان تب زیبا برای لینک های دانلود قرار میگیرد

خشایار توکلی

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

اضافه کردن دیدگاه

تماس با ما

جهت تماس با مدیر وب سایت با شماره 09307957745 در تماس باشید یا به این ایمیل webnma.com@gmail.com پیام دهید