ابزارک های وردپرس به شما این امکان را می دهند که به راحتی بلوک های خاصی از محتوا را به بخش های خاصی از قالب وردپرس و صفحات خاصی از وب سایت خود اضافه کنید، اما هر موضوع دارای حوزه برای ابزارک های وردپرس در هدر اگر می خواهید ویجت وردپرس را به سربرگ وب سایت خود اضافه کنید، در این پست با ما همراه باشید تا نحوه انجام آن را بررسی کنیم.
چرا باید یک ناحیه ویجت به سربرگ سایت وردپرس خود اضافه کنید؟
هدر وب سایت یکی از اولین چیزهایی است که بازدیدکنندگان پس از باز کردن وب سایت شما می بینند. با افزودن ویجت وردپرس به سربرگ وب سایت، می توانید این بخش را برای جلب توجه خواننده بهینه کنید. اکثر وب سایت ها دارای یک لوگو و منوی ناوبری در هدر هستند تا به بازدیدکنندگان کمک کند تا به قسمت های دیگر سایت دسترسی پیدا کنند.
همچنین می توانید یک ویجت وردپرس را به بالا یا پایین این بخش اضافه کنید تا تماس ها برای اقدام، تبلیغات بنری، پیشنهادات ویژه، فرم های یک خطی و موارد دیگر را نمایش دهید. در این تصویر، call to action در هدر، زیر منوی ناوبری قرار داده شده است.
اکثر قالب‌های وردپرس دارای بخش‌های آماده ابزارک در نوار کناری و پاورقی سایت هستند، اما هر قالبی دارای بخش‌های آماده ابزارک در هدر نیست. ابتدا، بیایید نحوه افزودن ویجت وردپرس به سربرگ وب سایت در قالب موجود را بررسی کنیم.
روش 1. در تنظیمات قالب وردپرس، فایل اجرایی وردپرس را به هدر وب سایت خود اضافه کنید
قالب‌های خوب وردپرس معمولاً یک بخش ویجت آماده برای استفاده در سربرگ دارند که می‌توانید هر طور که دوست دارید آن را سفارشی کنید. ابتدا بررسی کنید که آیا قالب فعلی وردپرس شما از یک ناحیه ویجت وردپرس در هدر پشتیبانی می کند یا خیر. می توانید به بخش مراجعه کنید سفارشی کننده تم وردپرس یا بخش ابزارک ها در پنل مدیریت وردپرس برو اینو چک کن برای انجام این کار، بله ظاهر » شخصی سازی برو ببین گزینه ای برای ویرایش هدر هست یا نه.
در این مثال، قالب رایگان Astra گزینه ای به نام دارد هدر بیلدر خب، در زیر نحوه استفاده از این قابلیت را در این قالب به شما آموزش می دهیم، اما به یاد داشته باشید که بسته به قالبی که استفاده می کنید، این ویژگی متفاوت خواهد بود و برای هر فردی گزینه های متفاوتی خواهد داشت.
اگر گزینه ای وجود دارد هدر بیلدر روی آن کلیک کنید و شما را به صفحه ای هدایت می کند تا هدر خود را ویرایش کنید و ویجت ها را به آن اضافه کنید. گزینه هایی در پایین صفحه وجود دارد که می توانید به طور کامل هدر را به همراه بخش های بالا و پایین سربرگ ها شخصی سازی کنید. کافیست به یکی از قسمت های خالی بروید و روی “کلیک کنید”+” که ظاهر می شود، کلیک کنید.
با این کار منویی ظاهر می شود که در آن می توانید “ویجت 1” انتخاب کنید.
برای افزودن یک ناحیه اجرایی به هدر، روی ” کلیک کنیدویجت 1” که در قسمت سفارشی سازی هدر قرار دارد. با این کار گزینه ای برای افزودن ویجت نمایش داده می شود.
سپس روی نماد یک بلوک اضافه کنید “+روی منوی سمت چپ کلیک کنید. با این کار پنجره ای ظاهر می شود که در آن می توانید یک فایل اجرایی را برای افزودن به هدر انتخاب کنید.
شما می توانید به هر تعداد ویجت که می خواهید به هدر اضافه کنید. وقتی کارتان تمام شد، فراموش نکنید که روی دکمه «انتشار» کلیک کنید تا تغییراتتان ذخیره شود.
اکنون می توانید ناحیه هدر را با فایل های اجرایی یا اجرایی که اضافه کرده اید مشاهده کنید.
راه دیگر برای بررسی اینکه آیا تم وردپرسی که استفاده می کنید دارای ویجت هدر وردپرس است یا نه این است که به پنل مدیریت وردپرس خود بروید. ظاهر » ویجت ها من دارم میروم سپس بررسی کنید که آیا بخشی با عنوان وجود دارد یا خیرسرتیتریا همچین چیزی هست یا نیست.
اگر وجود دارد، روی نماد “+” کلیک کنید تا منوی ابزارک ها ظاهر شود. سپس می توانید هر ویجتی را که دوست دارید با کلیک بر روی آن اضافه کنید.
از دکمه اطمینان حاصل کنیدبه روز رسانی» برای ذخیره تغییرات کلیک کنید.
روش 2. با افزودن کد، فایل اجرایی وردپرس را به هدر وب سایت اضافه کنید
اگر پوسته وردپرس شما دارای قسمت ویجت وردپرس در هدر نیست، باید آن را به صورت دستی با افزودن کد به وردپرس اضافه کنید. سپس به قطعه کد زیر نیاز دارید فایل functions.phpیک افزونه مخصوص سایت اضافه کنید.
function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Custom Header Widget Area',
'id' => 'custom-header-widget',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );این کد یک نوار کناری یا ویجت جدید وردپرس در سربرگ برای تم وردپرس شما ایجاد می کند. اگر به Appearance » Widgets بروید، یک ناحیه ویجت جدید با عنوان «منطقه ویجت هدر سفارشی“شما خواهید دید.
اکنون می توانید ویجت های جدیدی را به این تب جدید اضافه کنید. با این حال، ویجت هدر هنوز در وب سایت فعال نیست.
نمایش ویجت هدر سفارشی در وردپرس
اکنون که یک ناحیه ویجت وردپرس را در هدر ایجاد کرده اید، باید به وردپرس بگویید کجا آن را در وب سایت خود نمایش دهد. برای انجام این کار، شما باید فایل header.php قالب را ویرایش کنید. در مرحله بعد، باید کد زیر را در جایی که می خواهید ویجت ظاهر شود، اضافه کنید.
<?php
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
<div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
<?php dynamic_sidebar( 'custom-header-widget' ); ?>
</div>
<?php endif; ?>این کد ناحیه ویجتی را که قبلا ایجاد کرده اید به سربرگ وب سایت شما اضافه می کند. اکنون می توانید از سایت خود دیدن کنید تا ویجت هدر را به صورت زنده مشاهده کنید.
هدر وردپرس را با استفاده از CSS استایل دهید
بسته به موضوع خود، ممکن است لازم باشد کد CSS را به وردپرس اضافه کنید تا نحوه نمایش ویجت هدر را کنترل کنید. اگر CSS نمی دانید، می توانید به جای آن از افزونه هایی مانند CSS Hero استفاده کنید. برای کسب اطلاعات بیشتر، راهنمای ما در مورد نحوه افزودن CSS سفارشی به سایت وردپرس را بررسی کنید.
سپس به قسمت ظاهر » شخصی سازی به پنل مدیریت وردپرس خود بروید. با این کار پنل سفارشی سازی تم وردپرس ظاهر می شود. شما باید در بخش باشید”CSS اضافی” کلیک.
این بخش به شما امکان می دهد CSS اضافی را مستقیماً به قالب اضافه کنید و تغییرات را به صورت زنده مشاهده کنید. در اینجا چند نمونه از کدهای CSS برای کمک به شما آورده شده است:
div#header-widget-area {
width: 100%;
background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
text-align: center;
padding: 20px;
}
h2.chw-title {
margin-top: 0px;
text-align: left;
text-transform: uppercase;
font-size: small;
background-color: #feffce;
width: 130px;
padding: 5px;
}فقط کد CSS را به کادر “CSS اضافی” اضافه کنید.
پس از اتمام افزودن CSS، روی دکمه «انتشار» کلیک کنید تا تغییرات شما ذخیره شود.
امیدواریم این مقاله به شما کمک کند تا یاد بگیرید چگونه ویجت وردپرس را به هدر وب سایت خود اضافه کنید. همچنین می توانید راهنمای ما را در مورد نحوه انتخاب بهترین هاست برای نوع سایت خود بررسی کنید.
منبع: wpbeginner
