جلسه 28: آموزش ساخت هدر واکنشگرا

در این جلسه می خواهیم ساخت هدر ریسپانیسو را باهم پیش برویم. واکنشگرا یا ریسپانسیو یعنی در تمام دستگاه ها هدر شما قابل نمایش به شکل مناسبی باشد و از نظر ظاهری شکل مناسبی داشته باشد.

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

واکنش‌گرا یعنی چی؟

یعنی این‌که سایت‌تان در گوشی و تبلت به سایزهای مختلف به خوبی نمایش داده شود یعنی به بهترین نحو ممکن نمایش داده شود، خیلی مهم که این‌ روزها بیشتر مردم ترجیح می‌دهند با گوشی خودشان سایت‌ها را چک کنند خیلی می‌تواند بحث مهمی باشد.

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

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

خب، حالا می‌رویم سراغ بحث اصلی که ریسپانسیو بود. روی سایت‌مان کلیک راست کنید اینجا اینسپکت رویش کلیک می‌کنیم تا بتوانیم سایت‌مان را به حالت ریسپانسیو مشاهده کنیم، اگر مشاهده نکردید اینجا یک دکمه دارد این را حتماً کلیک کنید اگر کلیک نکنید، این شکلی نمایش داده می‌شود، این و که کلیک کنید شما می‌توانید سایت‌تان را به اندازه‌ی گوشی چک کنید و ببینید که به چه صورت در گوشی نمایش می‌دهد.

خب الان به این شکل من Ctrl+F5 می‌زنم تا کامل آن شکلی که است نمایش دهد، الان به این شکل دارد به ما نمایش می‌دهد، در قسمت ویرایش اینجا ما ویرایش سربرگ درواقع اینجا ما سه تا گزینه داریم پیش‌فرض که خودمان این را طراحی کردیم، بخش تبلت یا موبایل هم داریم که ما اینجا می‌توانیم یکسری تنظیماتی را انجام دهیم، ببینید وقتی میایم روی تبلت یکسری گزینه‌ها تغییر می‌کند مثلاً این گزینه ارتفاعش، درواقع عرضش تغییر می‌کند، یکسری موارد و تنظیماتی می‌آورد که شما می‌توانید آنها را انجام دهید مثلاً در حالت موبایل هم به همین صورت، و این اِلمان‌هایتان را می‌توانید جاهای‌شان را تغییر دهید مثلاً الان این اِلمان منوی‌مان زیاد این وسط قشنگ نیست بهتر که بیاد سمت چپ قرار گیرد.

برای این‌کار این و می‌توانیم بیاریم بکشیم سمت چپ، سمت راست قرارش دهیم و لوگوی‌مان را بیاوریم وسط در موبایل شاید به این شکل قشنگ‌تر باشد، دیگه سلیقه خودتان، در حالت تبلت هم همین کار را می‌کنیم حالا اینجا Ctrl+F5 می‌زنم الان به این شکل شاید بهتر باشد که دارد به ما نمایش می‌دهد و کاملاً هم ریسپانسیو با سایزهای مختلف گوشی هماهنگ و به ما نشان می‌دهد ولی در حالت کامپیوتر همان حالتی که ما قبلاً طراحی کردیم.