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

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

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

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

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

طراحی پوسته رسپانسیو وردپرس

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

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

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

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

کد بالایی در صفحه نمایش هایی که حداکثر عرض 960px دارند اجرا خواهد شد و شما می توانید این مقدار را به هر اندازه صفحه ای تغییر دهید.

شما می توانید چیزی شبیه به کد زیر برای سایدبار خود داشته باشید:

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

کد بالا یک نمونه استایل برای صفحه نمایش های با اندازه حداکثر 960px است و شما می بایست این کد را مطابق طراحی خود تغییر دهید. برای مثال برای صفحه نمایش گوشی می توانید از کد زیر استفاده کرد:

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

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

موفق باشید

8 دیدگاه برای “آموزش ساخت پوسته رسپانسیو وردپرس

  • جواد باشتنی
    - ۲۷ بهمن , ۱۳۹۲

    مرسی ممنون!

  • دانلود فیلم
    - ۴ تیر , ۱۳۹۳

    عالی بوووووووووود
    موفق باشید

  • طراحی
    - ۳ شهریور , ۱۳۹۳

    بسیار عالی بود

    خیلی خیلی ممنون بابت وب سایت خوبتون

  • کیوان
    - ۲ آبان , ۱۳۹۳

    سلام
    من ازین کد استفاده کردم
    روی سیستم وقتی صفحه مرورگر کوچک می شه عمل می کنه
    ولی وقتی روی موبایل سایت باز می شه تغییر نمی کنه وهمون اندازه بزرگ باز می شه
    ممنون می شم راهنماییم کنید

    • الناز بیک زاده
      - ۳ آبان , ۱۳۹۳

      سلام دوست من. شما باید متناسب با اندازه دلخواهتون کد رو قرار بدید. مثلا برای موبایل معمولا از این کد استفاده می کنند


      @media (min-width: 320px) and (max-width:500px)
      {

      کد ها
      }

  • erfan
    - ۱۲ فروردین , ۱۳۹۴

    سلام
    ظاهرا سایدبار سایت خودتونم مشکل داره 🙂

    وقتی روی آخرین نوشته ها کلیک کردم ساید بار رفت ته صفحه :/

    • الناز بیک زاده
      - ۱۲ فروردین , ۱۳۹۴

      سلام عرفان جان. سایدبار هیچ مشکلی نداره !!!!

  • گالری عکس
    - ۲۲ تیر , ۱۳۹۴

    مطلب مفیدی بود با تشکر

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --