شاید نتوان سایتی را پیدا کرد که به هدر1Header احتیاج نداشته باشد. معمولاً کاربران و بازدیدکنندگان سایت انتظار دارند المان‌های خاصی را در بخش فوقانی سایت (هدر سایت) مشاهده کنند. از جمله رایج‌ترین این المان‌ها عبارت‌اند از:
- برند سایت: معمولاً در قسمت هدر، نام سایت یا لوگوی آن قرار داده می‌شود. همچنین رنگ‌بندی و فونت و … که نشان‌دهنده شخصیت و برند سایت شما است، از همان قسمت هدر برای مخاطبان معلوم می‌گردد.
- ناوبری سایت: اگر وب‌سایت شما بیشتر از یک صفحه داشته باشد که معمولاً این‌چنین است، کاربران سایت انتظار دارند منوی سایت یا همان ساختار ناوبری آن (اصطلاحاً navigation) را در قسمت هدر مشاهده کنند.
در دنیای وردپرس قالب‌های فراوانی برای وب‌سایت‌های از انواع گوناگون طراحی و تولید شده‌اند. بسته به نوع سایت و زمینه‌ای که در آن فعّالیت می‌کنید، ممکن است از هر یک از این قالب‌ها در سایت خود سود ببرید. امّا درهرصورت پس از انتخاب و نصب هر قالبی، شما نیاز به طرّاحی هدر در وردپرس دارید. باید بتوانید به کمک المان‌های موجود در آن قالب و اکوسیستم وردپرس فرآیند ساخت هدر سایت را با موفقیت انجام دهید. از این رو مقاله طراحی هدر در وردپرس را نگاشته‌ایم تا شما را با برخی از روش‌های ساخت هدر سایت آشنا کنیم. مسئله ما در این مقاله این نیست که شما چگونه هدر را طرّاحی کنید، بلکه می‌خواهیم روش‌هایی را که برای این کار وجود دارد، بررسی کنیم. جزئیات طراحی بستگی به ذوق و سلیقه طراح سایت و همچنین نیازها و کاربری وب‌سایت موردنظر دارد.
روش‌های طراحی هدر در وردپرس
بسته به اینکه شما از چه نوع قالبی در سایت وردپرسی خود استفاده می‌کنید، روش طراحی هدر در وردپرس می‌تواند متفاوت باشد. در وردپرس از لحاظی می‌توان قالب‌ها را به دو دسته Block Themes و Classic Themes تقسیم‌بندی کرد. به زبان فارسی در این مقاله آنها را «قالب‌های بلاک» و «قالب‌های کلاسیک» می‌خوانیم. در قالب‌های بلاک همه قسمت‌های سایت، از جمله هدر، بر پایه بلاک‌های وردپرسی قرار دارد. منظور از بلاک، ساختارها و المان‌هایی است که به کمک ادیتور وردپرس (گوتنبرگ) به سایت اضافه می‌شوند. در واقع صفحات سایت از کنار هم قرارگرفتن و چیده شدن این بلاک‌ها ایجاد می‌شوند. شما در این‌گونه قالب‌ها با تغییردادن، جابجاکردن و حذف و اضافه‌کردن این بلاک‌ها قسمت‌های مختلف سایت را طراحی می‌کنید.
در نقطه مقابل قالب‌های کلاسیک به کمک زبان‌های برنامه‌نویسی مانند PHP ساختار و صفحه‌بندی‌های مشخصی را برای بخش‌های مختلف سایت، مانند هدر، تعریف کرده‌اند. در این‌گونه قالب‌ها برای ساخت هدر سایت شما خودتان بلاک‌ها را اضافه نمی‌کنید. بهتر بگوییم در خیلی از قالب‌های کلاسیک چنین اختیاری به شما داده نشده است. بلکه شما می‌توانید با استفاده از بخش Customize در وردپرس شخصی‌سازی‌ها و تغییرات مدنظر خودتان را اعمال کنید. مثلاً رنگ‌بندی برخی قسمت‌ها را تغییر دهید یا در مورد نمایش یا عدم نمایش برخی المان‌ها تصمیم بگیرید. شاید بتوان گفت در قالب‌های کلاسیک شما گزینه‌های کمتری برای سفارشی کردن هدر و طراحی دلخواه خودتان در دست دارید.
برای ساخت هدر سایت علاوه بر تکیه بر قابلیت‌های قالب‌های بلاک و قالب‌های کلاسیک روش‌های دیگری هم وجود دارند. یکی از این روش‌ها، استفاده از صفحه‌سازها در وردپرس است. در دنیای وردپرس صفحه‌سازها یا همان page builders به مرور رونق فراوانی یافته‌اند. از جمله این صفحه‌سازها می‌توان به افزونه المنتور و صفحه‌ساز دیوی بیلدر اشاره کرد. به کمک این ابزارها نیز می‌توانید به طریقی که ذکر می‌شود، نسبت به طراحی هدر در وردپرس اقدام کنید. در ادامه مقاله به توضیح بیشتر هریک از این روش‌های ساخت هدر سایت می‌پردازیم.
ساخت هدر سایت در قالب‌های بلاک
همان‌طور که ذکر شد، وردپرس از ویرایشگر گوتنبرگ برای ویرایش صفحات و ساختن المان‌های لازم بهره می‌برد. به اصطلاح به هر یک از این المان‌ها، یک بلاک گفته می‌شود. عناوین، پاراگراف‌ها، تصاویر، لیست‌ها و … هرکدام یک بلاک در این صفحه‌ساز داخلی وردپرس محسوب می‌شوند. در قالب‌های بلاک نیز همین بلاک‌ها یا به اصطلاح ویجت‌ها هستند که نقش اساسی را ایفا می‌کنند.
شما می‌توانید این بلاک‌ها را در قسمت‌های مختلف قالب وردپرسی وارد کرده یا ویرایش کنید. این امکان برای تمامی بخش‌های سایت و از جمله هدر میسر است. در واقع شما هدر را از طریق خود داشبورد وردپرس و امکانات آن ویرایش می‌کنید و نیازی به تغییردادن فایل‌های قالب ندارید. این ویژگی خاصی است که قالب‌های بلاک را از قالب‌های کلاسیک متمایز می‌کند.
استفاده از بخش ادیتور جهت ویرایش هدر
اگر شما از یک قالب بلاک (مانند قالب UniBlock) در سایت خود بهره ببرید، در قسمت Appearance از منوی داشبورد وردپرس، گزینه‌ای به نام Editor را مشاهده خواهید کرد.
با کلیک بر روی این گزینه نمایشی از تمام صفحه سایت (شامل هدر) بروز می‌کند. با کلیک بر روی قسمت هدر سایت، می‌توانید به راحتی آن را ویرایش کنید.
نحوه ویرایش هدر مشابه کار با ویرایشگر گوتنبرگ در هر قسمت دیگر سایت وردپرسی است. در واقع بعد از کلیک بر روی هدر، شما وارد ویرایشگر گوتنبرگ می‌شوید. در تصویر زیر هدر یک سایت فرضی را مشاهده می‌کنید که از بلاک‌های Site Title و Navigation در داخل یک سطر در هدر خود سود می‌برد.
با استفاده از قابلیت‌های این ویرایشگر می‌توانید مثلاً المان Site Title را حذف کرده و المان یا المان‌های دلخواه دیگری را جایگزین آن کنید. به عنوان مثال یک Image را جایگزین آن کرده و لوگوی سایت خود را در آن قرار دهید.
یعنی این شما هستید که تعیین می‌کنید چه المان‌هایی و با چه چیدمانی در ساخت هدر سایت مشارکت داشته باشند. برای انجام این کار هم نیازی به ویرایش کدهای مربوط به فایل‌های قالب خود ندارید. بلکه این مسئله به کمک ادیتور گوتنبرگ و درون خود داشبورد وردپرس صورت می‌گیرد.
ساخت هدر سایت در قالب‌های کلاسیک
تقریباً از سال 2012، بخش Customizer در وردپرس نسخه 3.4 معرفی شد. از آن زمان تاکنون تغییرات فراوانی در این بخش وجود داشته است. امّا یک چیز همواره ثابت بوده و هست. مسئله این است که آن چه شما در بخش Customize از وردپرس در اختیار دارید، بر اساس قالبی که استفاده می‌کنید، متفاوت خواهد بود. در واقع این توسعه‌دهنده قالب است که تعیین می‌کند شما چه چیزی را می‌توانید ویرایش کنید.
کار با قالب‌های کلاسیک مانند قالب‌های بلاک نیست که شما خودتان المان‌ها را اضافه و کم کنید و درمورد چگونگی طراحی تصمیم بگیرید. بلکه این طراحی‌ها در ساختار و فایل‌های قالب کلاسیک صورت‌گرفته است و شما صرفاً می‌توانید با استفاده از قابلیت‌هایی که آن قالب فراهم کرده، به شخصی‌سازی و ویرایش آن طرح‌ها بپردازید.
استفاده از قسمت Customizer در وردپرس
جهت سفارشی‌سازی قالب خود باید از منوی کاربری داشبورد وردپرس به قسمت Appearance و سپس قسمت Customize مراجعه کنید.
همان‌طور که قبلاً گفته شد، بسته به قالبی که شما استفاده می‌کنید، محتویات این بخش متفاوت خواهد بود. یکی از قسمت‌هایی که در اکثر قالب‌ها یافت شده و مرتبط با طراحی هدر در وردپرس است، بخش Site Identity است.
معمولاً در این قسمت از هر قالبی شما می‌توانید لوگوی سایت را تعریف کنید. همچنین عنوان سایت و شعار آن2Tagline نیز در این بخش تعریف می‌شوند.
بعد از کلیک بر روی گزینه Select logo که در تصویر فوق مشخص شده، از قسمت مدیا در وردپرس می‌توانید لوگوی موردنظر خود را انتخاب کنید. یعنی در واقع ابتدا باید آن را آپلود کرده و سپس به این بخش معرفی کنید. بعد از بارگذاری لوگو امکان حذف آن یا تغییردادن آن نیز از همین قسمت برای شما فراهم می‌شود.
درواقع لوگو تنها یکی از قسمت‌هایی است که احتمالاً در ساخت هدر سایت خود به آن نیاز دارید. به کمک گزینه‌های دیگر این بخش می‌توانید تعیین کنید که مثلاً چه آیتم‌هایی در منوی ناوبری سایت شما قرار داشته باشند. حتی برخی از قالب‌ها، چندین نمونه هدر طراحی شده را برای شما فراهم کرده‌اند که با انتخاب هر یک، قسمت هدر سایت شما متناسب با آن تنظیم می‌گردد. ما در ادامه مقاله به سراغ روش سوم طراحی هدر در وردپرس، یعنی استفاده از صفحه‌سازها، خواهیم رفت.
طراحی هدر در وردپرس به کمک صفحه‌سازها
در دنیای وردپرس صفحه‌سازها3page builders بسیار کاربردی هستند. امروزه معمولاً در اکثر وب‌سایت‌ها از یکی از صفحه‌سازهای معروف، برای طراحی صفحات سایت کمک گرفته می‌شود. علاوه بر گوتنبرگ که در ساختار خود وردپرس وجود دارد، صفحه‌سازهای مشهور دیگری چون المنتور و دیوی بیلدر نیز وجود دارند که می‌توانید از آنها در ساختن صفحات و قسمت‌های مختلف سایت خود کمک بگیرید.
البته توجه داشته باشید که برخی از این صفحه‌سازها با هر نوع قالبی هماهنگ نیستند. بخصوص اگر از صفحه‌ساز دیوی بیلدر استفاده می‌کنید، توصیه می‌کنیم که حتماً از قالب دیوی در کنار آن در سایت خود بهره ببرید. چون بیشترین هماهنگی را با این صفحه‌ساز دارد.
این صفحه‌سازها دارای قابلیتی هستند که وقتی به کمک آنها هدر یا فوتر یا سایر قسمت‌های وب‌سایت خود را طراحی می‌کنید، معمولاً آن هدر بر هدر پیش‌فرض قالب سایت غلبه می‌کند. یعنی دیگر هدر قالب نمایش داده نمی‌شود و هدر ساخته شده توسط شما با صفحه‌ساز نمایش داده می‌شود. بنابراین با خیال راحت می‌توانید المان‌ها و طراحی دلخواه خودتان را پیاده‌سازی کنید.
برای طراحی هدر در وردپرس به کمک صفحه‌ساز و افزونه دیوی بیلدر، پس از نصب آن در سایت، باید از قسمت Divi در منوی داشبورد وردپرس، وارد بخش Theme Builder شوید.
در این قسمت تمپلیت‌های4Templates مختلفی را می‌توانید برای بخش‌های مختلف سایت خود ایجاد کنید. اگر قصد دارید یک هدر کلّی برای تمامی صفحات سایت خود داشته باشید، باید از قسمت Default Website Template بخش Global Header را ویرایش کنید.
در غیر این صورت می‌توانید برای هریک از بخش‌ها یا صفحات سایت خود یک Template جدید ایجاد کرده و قسمت هدر مربوط به آن را ویرایش کنید. مثلاً با ایجاد یک تمپلیت برای فروشگاه5shop و زدن گزینه ویرایش هدر آن، به صفحه‌ساز دیوی بیلدر منتقل می‌شوید.
در این صفحه‌ساز شما، مشابه ساختن صفحات سایت، برای ساخت هدر سایت نیز به تمامی المان‌های دیوی بیلدر دسترسی دارید. می‌توانید هرکدام را که نیاز دارید، وارد ساختار هدر کنید. مثلاً ما برای سایت فرضی خود از المان‌های Menu و Search استفاده کرده‌ایم. ساختار Wireframe مربوط به هدر ساخته شده را در تصویر زیر می‌بینید.
بسته به منویی که در قسمت داشبورد وردپرس خود از بخش Appearance و سپس Menus تعریف کرده‌اید، لوگوی سایت و سایر المان‌هایی که در ساخت هدر سایت به کار می‌برید، طراحی شما متفاوت خواهد بود. در تصویر زیر طراحی صورت‌گرفته برای مثال این مقاله را مشاهده می‌کنید.
چنین قابلیت‌هایی معمولاً در اکثر صفحه‌سازها وجود دارد. در صفحه‌ساز المنتور نیز با مراجعه به قسمت Templates و سپس Theme Builder می‌توانید به ساخت هدر سایت خود مشغول شوید. البته این ویژگی از قابلیت‌های نسخه پرو المنتور است و صرفاً بر روی نسخه رایگان فعّال نیست.
جمع‌بندی
در این مقاله به موضوع طراحی هدر در وردپرس پرداختیم. سه روش مختلف برای آن ذکر کردیم. البته این روش‌ها تا حدودی بستگی به آن دارند که از چه نوع قالبی (کلاسیک یا بلاک) در سایت خود استفاده کنید. همچنین اینکه آیا از صفحه‌سازهای وردپرس برای طراحی سایت خود کمک می‌گیرید یا خیر، می‌تواند در انتخاب روش کار شما در ساخت هدر سایت مؤثر باشد. اگر در زمینه وردپرس تازه‌کار هستید، پیشنهاد می‌کنیم با مطالعه کتاب «وردپرس برای تازه‌کارها» دانش خود در مورد این سیستم مدیریت محتوا را افزایش دهید.
