طراحی سایت و نکات مربوط به آن

چگونه قالب وردپرس را ریسپانسیو(Responsive) کنیم؟

 

 

درود دوستان خوبه بیگ تم.درین فراگیری از  طراحی سایت فروشگاهی محرمانه یادگرفتن های وردپرس در خدمتتون هستیم تا یک مسئله دیگه رو با هم نظارت کنیم.آیا گردیده تا به حالا واژه و کلمه ریسپانسیو(responsive) رو بشنوید!؟آیا میدونیدکه این کلمه و واژه یا این که بهتر بگم اصطلاح به چه معنیه؟شاید برخی از شما مضمون ها این اصطلاح ر بدونید ولی در می‌باشند طراحان نو کاری که با این کلمه و واژه شناخت ندارند!پس با ما یار و همدم باشید تا بیشتر دراین باره بدونیم!

 

چه گونه قالب وردپرس را ریسپانسیو(Responsive) کنیم؟

اولیه از کلیه بدین پرسش جواب دهیم که ریسپانسیو(responsive) یا این که واکنشگرا به چه معناست؟

 

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

 

 

 

پباده سازی یک کلید میباشد

اولی قضیه در پباده سازی ریسپانسو این میباشد که خروجی قالب خویش را در دست‌کم سه دستگاه مختلف مثل کامپیوتر یا این که لباپ,تلفن همراه گوشی و تبلت در حیث بگیرید.

 

طراح نخستین را فراهم فرمائید

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

 

reponsive-theme-layout

 

اشخاص ریزبین و با تمرکز متوجه نکتهء تصویر بالاشده اند!!!آری!!!نصیب فوتر وبسایت مدام در تحت برگه قرار داره البته ساید توشه وبسایت با اعتنا به اندازه کاغذ متفاوته و میتونه تغییر‌و تحول کنه.

 

قابلیت جنبش سایدبار به تحت شیت در ورقه اکران های کوچک

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