ساخت هدر سفارشی وردپرس فقط تغییر ظاهر بالای سایت نیست؛ هدر باید مسیرهای مهم را روشن کند و در موبایل هم به‌راحتی قابل استفاده باشد. اگر هدر قالب شما انعطاف کافی ندارد و نمی‌خواهید برای طراحی آن سراغ صفحه‌ساز بروید، در این راهنما روش ساخت یک هدر شیشه‌ای چسبان و بخش هیرو را با افزونه رایگان «هدر سفارشی و هیرو سکشن مدرن» قدم‌به‌قدم بررسی می‌کنیم.
هدر سفارشی وردپرس چه تفاوتی با هیرو سکشن دارد؟
هدر ناحیه بالایی سایت است که معمولاً نام یا نشان برند و لینک‌های ناوبری را در خود دارد. هدر چسبان هنگام اسکرول نیز در دسترس می‌ماند و به بازدیدکننده کمک می‌کند بدون برگشتن به ابتدای صفحه، مسیر دیگری را انتخاب کند. در طراحی شیشه‌ای یا گلس‌مورفیسم، پس‌زمینه نیمه‌شفاف و افکت بلور به هدر ظاهری مدرن می‌دهند.
در مقابل، هیرو سکشن بخش شاخص ابتدای یک صفحه است؛ جایی برای معرفی پیشنهاد اصلی با تصویر، تیتر و دکمه اقدام. برای مثال، یک سایت گردشگری می‌تواند در هدر لینک مقصدها و تماس را قرار دهد و در هیرو، تصویری از سفر همراه با دکمه مشاهده خدمات نمایش دهد. این دو بخش کنار هم کار می‌کنند، اما هدف یکسانی ندارند.
افزونه معرفی‌شده در این مقاله یک نوار ناوبری شیشه‌ای چسبان ارائه می‌کند و با شورت‌کد، هیروی تمام‌صفحه را در صفحه دلخواه نمایش می‌دهد. پس لازم نیست برای ساخت این ترکیب، یک صفحه‌ساز نصب کنید.
پیش از شروع، بهترین روش ساخت هدر را انتخاب کنید
برای تغییر هدر همیشه نصب افزونه ضروری نیست. اگر قالب شما تنظیمات مناسبی دارد، ابتدا گزینه‌های بخش نمایش یا سفارشی‌سازی را بررسی کنید. در قالب‌های بلوکی نیز ویرایشگر سایت ممکن است امکان تغییر بخش الگوی هدر را فراهم کند. این روش‌ها زمانی مناسب‌اند که ظاهر موردنیازتان با امکانات قالب قابل پیاده‌سازی باشد.
صفحه‌سازها برای طراحی‌های متنوع‌تر کاربرد دارند، اما ممکن است برای یک هدر ساده بیشتر از نیاز پروژه باشند. کدنویسی هم کنترل بیشتری به توسعه‌دهنده می‌دهد، ولی نگهداری و بررسی سازگاری آن بر عهده شماست. اگر مشخصاً هدر شیشه‌ای، منوی موبایل و هیروی آماده می‌خواهید، افزونه این راهنما انتخاب متمرکزتری است.
head سایت ساخته نشده است. همچنین منوی آن تک‌سطحی است؛ اگر به زیرمنوهای چندلایه نیاز دارید، پیش از انتخاب ابزار، این محدودیت را در نظر بگیرید.آموزش نصب و تنظیم افزونه هدر وردپرس
پیش از نصب، مطمئن شوید سایت از وردپرس نسخه ۵٫۰ یا بالاتر و PHP نسخه ۷٫۲ یا بالاتر استفاده می‌کند. بهتر است مانند هر تغییر ظاهری مهم، ابتدا از سایت نسخه پشتیبان بگیرید و در صورت امکان تنظیمات را در محیط آزمایشی بررسی کنید. افزونه به صفحه‌ساز یا افزونه جانبی دیگری نیاز ندارد.
- افزونه را دانلود و نصب کنید. فایل افزونه را از وردپرس 369 دریافت کنید. در پیشخوان به بخش «افزونه‌ها» بروید، فایل را بارگذاری و سپس افزونه را فعال کنید.
- تنظیمات پایه را وارد کنید. بخش «هدر سفارشی» را در پیشخوان باز کنید و عنوان و آدرس اصلی سایت را برای لینک برند تنظیم کنید.
- رنگ و تصویر را انتخاب کنید. تصویر پس‌زمینه هیرو و آیکون‌های رابط را از کتابخانه رسانه وردپرس انتخاب کنید. سپس رنگ شاخص، رنگ تیره و رنگ دکمه‌ها را متناسب با هویت بصری سایت تنظیم کنید.
- منو و دکمه‌ها را بسازید. لینک‌های ناوبری را در فهرست‌ساز اضافه و مرتب کنید. متن و نشانی دکمه‌های اصلی را هم وارد کنید تا بازدیدکننده بداند بعد از دیدن هیرو چه کاری انجام دهد.
- صفحه را بررسی کنید. تغییرات را ذخیره کنید و نتیجه را در صفحه اصلی و چند برگه دیگر، هم در موبایل و هم در نمایشگر بزرگ، ببینید.
برای منو ابتدا به مسیرهایی فکر کنید که واقعاً برای مخاطب مهم‌اند؛ مثلاً خدمات، درباره ما و تماس. از آنجا که این منو زیرمنوی چندلایه ندارد، بهتر است لینک‌های اصلی را انتخاب کنید و ساختار پیچیده سایت را به صفحات داخلی بسپارید. پس از تنظیم، روی همه لینک‌ها کلیک کنید تا مطمئن شوید به نشانی درست می‌رسند.
چگونه رنگ هدر شیشه‌ای را انتخاب کنیم؟
شفافیت به‌تنهایی هدر را خوانا نمی‌کند. اگر تصویر پشت هدر روشن یا شلوغ باشد، ممکن است متن و آیکون‌ها به‌خوبی دیده نشوند. پالت رنگی افزونه را طوری انتخاب کنید که نوشته‌ها با پس‌زمینه کنتراست مناسبی داشته باشند و دکمه اصلی از سایر عناصر قابل تشخیص باشد.
تنظیمات رنگ را فقط در ابتدای صفحه نسنجید. چون هدر چسبان است، هنگام اسکرول روی بخش‌هایی با رنگ و تصویر متفاوت قرار می‌گیرد. صفحه را بالا و پایین ببرید و بررسی کنید که لینک‌ها در موقعیت‌های مختلف همچنان خوانا باشند.
ساخت هیرو تمام‌صفحه با شورت‌کد
پس از تنظیم هدر، صفحه اصلی یا لندینگ موردنظر را در ویرایشگر وردپرس باز کنید. شورت‌کد زیر را در محل نمایش هیرو قرار دهید و صفحه را ذخیره یا منتشر کنید:
[custom_header]این شورت‌کد بخش هیرو را همراه با منوی اختصاصی، عنوان، دکمه‌های اقدام و نشان‌های آماری نمایش می‌دهد. تصویر پس‌زمینه و محتوای این بخش را از تنظیمات افزونه انتخاب می‌کنید. هیرو به صورت یکپارچه رندر می‌شود؛ بنابراین نمی‌توانید با همین شورت‌کد فقط نشان‌های آماری را جداگانه در بخش دیگری از صفحه قرار دهید.
برای هیرو چه محتوا و تصویری مناسب است؟
تیتر را کوتاه و مرتبط با نیاز بازدیدکننده بنویسید. برای سایت خدماتی، به جای عبارتی کلی مثل «به سایت ما خوش آمدید»، می‌توانید خدمت اصلی را معرفی کنید. متن دکمه نیز بهتر است نتیجه کلیک را روشن کند؛ برای نمونه «مشاهده خدمات» یا «رزرو». پیش از انتشار، بررسی کنید مقصد هر دکمه با متن آن هماهنگ باشد.
تصویری انتخاب کنید که موضوع صفحه را به‌سرعت منتقل کند و فضای کافی برای خواندن تیتر داشته باشد. تصویر بسیار شلوغ می‌تواند توجه را از پیام اصلی دور کند. همچنین پیش از بارگذاری، ابعاد و حجم فایل را متناسب با کاربرد آن بهینه کنید و پیش‌نمایش موبایل را ببینید تا مطمئن شوید بخش مهم تصویر در نمایشگر کوچک از کادر خارج نشده است.
در دو سمت هیرو می‌توانید متن، عدد و رنگ نشان‌های آماری را تنظیم کنید. از این فضا برای اطلاعات واقعی و قابل اتکا، مانند تعداد خدمات ارائه‌شده، استفاده کنید. اگر آماری برای نمایش ندارید، صرفاً برای پر کردن ظاهر صفحه عددی حدسی ننویسید.
مخفی کردن هدر قالب در صفحات خاص
در بعضی لندینگ‌ها یا صفحاتی مانند تسویه‌حساب، ممکن است بخواهید بازدیدکننده بدون منوی معمول سایت روی یک اقدام مشخص تمرکز کند. در بخش تنظیمات افزونه، چک‌لیست صفحات استثنا را پیدا کنید و صفحاتی را که نمی‌خواهید هدر در آن‌ها نمایش داده شود انتخاب کنید.
نکته مهم این است که طبق تنظیم صفحات استثنا، هدر و فوتر در برگه انتخابی حذف می‌شوند. بنابراین پیش از استفاده از این گزینه، بررسی کنید آیا آن صفحه برای دسترسی به اطلاعات ضروری فوتر به راه جایگزین نیاز دارد یا نه. بعد از ذخیره تنظیمات، همان صفحه و چند صفحه دیگر را باز کنید تا مطمئن شوید تغییر فقط در محل موردنظر اعمال شده است.
افزونه برای جایگزینی هدر پیش‌فرض قالب طراحی شده و استایل هدر قالب را سرکوب می‌کند. با این حال، قالب‌ها ساختار یکسانی ندارند؛ اگر هدر قدیمی همچنان دیده می‌شود یا چیدمان صفحه به‌هم می‌ریزد، تنظیمات قالب را بررسی کنید و پیش از انتشار تغییرات، سازگاری را روی سایت خودتان بسنجید.
بررسی نمایش در موبایل و تجربه کاربری
بخش زیادی از بازدیدکنندگان ممکن است اولین بار سایت را با گوشی ببینند. افزونه برای این شرایط منوی همبرگری کشویی با پس‌زمینه تیره دارد و جستجوی هدر نیز به شکل واکنش‌گرا باز می‌شود. با وجود این، مناسب بودن نتیجه نهایی به طول متن‌ها، رنگ‌های انتخابی و تصویر شما بستگی دارد.
- منوی موبایل را باز و بسته کنید و مطمئن شوید لینک‌های مهم به‌راحتی انتخاب می‌شوند.
- خوانایی عنوان و دکمه‌ها را روی تصویر هیرو در اندازه‌های مختلف نمایشگر بررسی کنید.
- هنگام اسکرول، مطمئن شوید هدر چسبان محتوای مهم یا دکمه‌های صفحه را نمی‌پوشاند.
- جستجو و همه لینک‌های هدر را امتحان کنید و نتیجه هر کلیک را ببینید.
- صفحات استثنا و صفحات عادی را جداگانه بررسی کنید تا از وضعیت هدر و فوتر مطمئن شوید.
برای ارزیابی بهتر، علاوه بر کوچک کردن پنجره مرورگر، صفحه را با یک گوشی واقعی هم باز کنید. تفاوت اندازه صفحه، لمس و سرعت اتصال می‌تواند مشکلاتی را نشان دهد که در پیش‌نمایش دسکتاپ به چشم نمی‌آیند.
این افزونه برای چه سایت‌هایی مناسب است؟
اگر مدیر یک سایت شرکتی، خدماتی یا گردشگری هستید و می‌خواهید با تنظیمات مشخص، بالای سایت را بازطراحی کنید، این افزونه می‌تواند مسیر کوتاه‌تری نسبت به ساخت هدر از ابتدا باشد. طراحان و وبمسترانی که به هدر شیشه‌ای چسبان و یک هیروی آماده نیاز دارند نیز می‌توانند بدون صفحه‌ساز از آن استفاده کنند.
در مقابل، اگر پروژه شما به منوی چندسطحی، چیدمان کاملاً مجزای اجزای هیرو یا کنترل متفاوتی بر بخش‌های آن نیاز دارد، محدودیت‌های افزونه را پیش از نصب بسنجید. همچنین فونت بخش‌های متنی به بارگذاری فایل‌های فونت اختصاصی افزونه وابسته است؛ نتیجه ظاهری را در کنار فونت‌های قالب بررسی کنید.
پرسش‌های متداول
آیا برای ساخت هدر به المنتور نیاز دارم؟
خیر. افزونه هدر و هیرو را مستقل از صفحه‌ساز اجرا می‌کند. تنظیمات را در پیشخوان انجام دهید و برای نمایش هیرو از شورت‌کد استفاده کنید.
آیا می‌توانم هیرو را فقط در صفحه اصلی قرار دهم؟
بله. شورت‌کد را در صفحه اصلی قرار دهید. برای نمایش آن در یک لندینگ دیگر نیز می‌توانید شورت‌کد را در همان صفحه وارد کنید.
آیا هدر و فوتر در صفحات استثنا هر دو حذف می‌شوند؟
بله، انتخاب صفحه در بخش استثنا برای حذف هدر و فوتر آن برگه در نظر گرفته شده است. پس از ذخیره، نتیجه را با قالب خود بررسی کنید.
آیا افزونه از زیرمنوی چندلایه پشتیبانی می‌کند؟
خیر، فهرست ناوبری افزونه تک‌سطحی است. برای سایتی با ساختار منوی پیچیده، این محدودیت را پیش از انتخاب ابزار در نظر بگیرید.
جمع‌بندی و شروع طراحی
برای ساخت هدر سفارشی وردپرس ابتدا امکانات قالب و نیاز واقعی سایت را بررسی کنید. اگر ترکیب هدر شیشه‌ای چسبان و هیروی تمام‌صفحه برای شما مناسب است، افزونه «هدر سفارشی و هیرو سکشن مدرن» امکان تنظیم منو، تصویر، دکمه‌ها و صفحات استثنا را بدون صفحه‌ساز فراهم می‌کند.
افزونه را رایگان از وردپرس 369 دریافت کنید، تنظیمات را با محتوای واقعی سایت خود تکمیل کنید و پیش از انتشار نهایی، نمایش دسکتاپ و موبایل را بررسی کنید.
