آموزش ساخت هدر یا سربرگ (header) در وردپرس.
هدر سایت یا سربرگ یکی از پر اهمیت ترین قسمت های سایت است.
سربرگ را می توان به عنوان یکی از اصلی ترین قسمت های ساختار قالب وردپرس معرفی کرد.
هدر معمولا شامل یک آرم و نوار پیمایش اصلی است. می توان مواردی را به صورت دلخواه به هدر اضافه کرد.
مانند: ورود به سایت، جست و جو، فیلم یا تصاویر، مشاهده سبد خرید در سایت های فروشگاهی، ارتباط به شبکه های اجتماعی، لوگو، متن، ابزارک، و موارد دلخواه دیگر
هدر سایت در واقع معرف بخش های مختلف است.
به طور پیش فرض هدر در تمامی صفات جایگاه ثابتی دارد. یعنی صرف نظر از اینکه کاربر در کدام صفحه از سایت شما است، هدر سایت وجود دارد.
در ادامه مقاله ساخت هدر سفارشی برای صفحات مختلف سایت را نیز آموزش می دهیم.
چگونه یک هدر دلخواه به سایت وردپرسی خود اضافه کنیم؟
بیشتر قالب های وردپرس امکان ساخت هدر و سربرگ را تنها با قابلیت (drog and drop) یا همان کشیدن و رها کردن، دارند.
با استفاده از این قابلیت، به راحتی می توانید هدر دلخواه خود را طراحی کنید.
در صورتی که قالب شما امکان ایجاد هدر را ندارد، راه های دیگری نیز وجود دارند.
در ادامه آن ها را برای شما نام می بریم و توضیح می دهیم.
ساخت هدر با ابزارک های وردپرس
خود وردپرس و تقریبا اکثر قالب های وردپرس ابزارک هایی را برای ساخت هدر دارند.
ابزارک وردپرس را می توان از پنل پیشخوان مدیریت انتخاب کرد.
اگر قالب وردپرس شما ابزارک هدر را دارد، به راحتی می توانید ابزارک های دلخواه خود را مانند متن، تصویر یا هر المان دیگری را به هدر اضافه کنید.
انتخاب هدرهای مختلف به کمک افزونه
هدر های سایت وردپرسی را به کمک افزونه هم می توانید سفارشی سازی کنید.
ساخت هدر با افزونه المنتور
اگر در حال یادگیری وردپرس هستید، و کار با کد ها و ویرایش آن ها برای شما سخت است، افزونه های وردپرس بهترین گزینه برای ساخت یک هدر با طراحی بسیار جذاب و زیبا خواهد بود.
Elementor-Header یکی از افزودنی های صفحه ساز قدرتمند المنتور است.
کاربرد این افزونه در ساخت هدر و فوتر سایت است.
این افزونه به شما کمک می کند تا هدر های دلخواه خود را در عین زیبایی، به راحتی طراحی کنید.
برای استفاده از این افزودنی پس از نصب و فعال سازی صفحه ساز المنتور راهنمای زیر را دنبال کنید.
به مسیر
قالب ها – Templates > قالب ساز – Theme Builder > هدر – Header > افزون جدید – Add New بروید.
از منویی کشویی روی هدر – Header کلیک کنید.
یک نام برای قالب هدر خود وارد کنید و روی دکمه ایجاد قالب – Create Template کلیک نمایید.
یکی از بلوک ها را انتخاب کرده و روی دکمه درج – Insert کلیک کنید.
در صورتی که می خواهید خودتان آن را طراحی کنید در صفحه سایت کلیک کنید.
در مسیر زیر
تنظیمات – Settings > طرح بندی – Layout > HTML Tag کلیک کنید و آن را از حالت پیش فرض – Default به هدر – Header تغییر دهید.
بعد از اتمام این مرحله، روی Publish (منتشر) کلیک کنید.
از قسمت Condition هم امکان تعیین شرایط مختلف برای نمایش هدر دارید.
در ادامه ۲ تا افزونه های معروف در زمینه طراحی هدر را معرفی می کنیم که کار شما را در ساخت هدرهای سفارشی ساده تر می کند.
با افزونه المنتور می توانید هدر ها و فوترهای زیبا و کاربردی را برای سایت خود طراحی کنید.
بهتر است قبل از شروع به ساخت هدر با المنتور مقاله کار با المنتور را مطالعه کنید تا با آن آشنایی پیدا کنید.
افزونه Unique Headers
این افزونه تصاویر سفارشی هدر را صفحه ویرایش پست یا صفحه اضافه می کند.
این کار باعث می شود آپلود تصویر روی صفحات مختلف بسیار ساده تر و آسان تر باشد.
به بخش ویرایش صفحه ای که می خواهید هدر جدید اضافه کنید بروید و دکمه
Set Custom Header Image را کلیک کنید. حالا تصویر سفارشی خود را آپلود کنید.
افزونه WP Display Header
کاربرد این افزونه برای تنظیم تصویر هدر برای هر پست و هدرهای سفارشی است.
در صفحه ویرایش پست یا صفحه یک مکان برای اپلود تصویر هدر دارید که می توانید تصویری را آپلود کنید.
اگر شما برای پست خود هدری را انتخاب نکنید این افزونه انتخاب پیش فرض را نمایش می دهد.
این افزونه ۳ حالت برای نمایش عکس های انتخابی شما در هدر را دارد.
گزینه Random یا تصادفی تصاویر مختلفی را به طور تصادفی بر روی هر صفحه نمایش می دهد.
گزینه بعدی این است که هدری را انتخاب نکنید و گزینه سوم هدر ثابت یکسانی برای هر صفحه است.
افزونه Popping Sidebars & Widgets
اگر قصد طراحی حرفه ای و تنظیم دقیق هدرهای خود را دارید، این افزونه کمک زیادی به شما می کند.
این افزونه به شما کمک می کند ویدجت های مختلف و دلخواه خود را بسازید و پس از آن به راحتی می توانید ابزارک ها را در هدر قرار دهید.
Insert headers and footers
این افزونه به شما کمک می کند به راحتی کد ها را مستقیما به هدر برای تغییر آن اضافه کنید.
این افزونه گزینه ای را برای تغییر کلیه کد ها و اسکریپت ها دارد. مزیت اصلی این افزونه راحتی در نصب و استفاده آسان است که بسیار مناسب مبتدیان نیز هست.
ساخت هدر سفارشی برای هر برگه از سایت
اگر شما هم قصد دارید برای هر صفحه از سایت وردپرسی خود هدر متفاوتی را به نمایش بگذارید، در ادامه مقاله با ما همراه باشید.
برای اینکار کافیست یک فایل جدید به نام header-your page.php بسازید.
فایل header-your page.php را ایجاد و در فایل Theme قرار دهید.
سپس به فایل قالب Page.Php بروید و کد هدر را با کد زیر عوض کنید.
<?php
if(is_page(about))
{
get_header('about');
}
else
{
get_header();
}
wp_head();
?>ویرایش هدر وردپرس با استفاده از کد
برای ویرایش کدهای هدر وردپرس باید کلاس هدر را پیدا کنید.
پس از پیدا کردن کلاس هدر کافیست از دستورات css استفاده کنید.
کدهای هدر ساده و کوتاه هستند. با کپی کردن و چسباندن برخی خطوط می توانید آن ها را طبق سلیقه خود شخصی سازی کنید.
در پایان مقاله ساخت هدر در وردپرس، امیدواریم که با اهمیت و جایگاه هدر در یک سایت، روش های طراحی و ویرایش آن آشنا شده باشید.
