اضافه کردن ویجت در بخش هدر وردپرس

ابزارک ها به شما امکان می دهند بلوک های محتوا را به راحتی به بخش های خاصی از طرح وردپرس خود اضافه کنید، اما هر انچه شما دوست دارید در بخش ویجت هدر وجود ندارد.

در این مقاله، ما به شما نشان خواهیم داد که چگونه به راحتی ویجت وردپرس را به  هدر وب سایت خود اضافه کنید.

چرا باید ویجت هدر را به سایت وردپرس خود اضافه کنید؟

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

اکثر هدرهای وب سایت شامل یک لوگوی سفارشی و یک منوی ناوبری برای کمک به بازدیدکنندگان در اطراف سایت هستند.

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

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

روش 1. ویجت وردپرس را به سربرگ یا هدر وب سایت خود در تنظیمات قالب وردپرس اضافه کنید:

بسیاری از بهترین تم های وردپرس شامل یک بخش برای  ویجت هدر هستند که می توانید آن را مطابق میل خود سفارشی کنید.

ابتدا، بایید ببینید که آیا تم وردپرس مورد استفاده فعلی شما از یک بخش  ویجت وردپرس در هدر پشتیبانی می کند یا خیر.

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

برای انجام این کار، به Appearance » Customize بروید و ببینید آیا گزینه ای برای ویرایش هدر وجود دارد یا خیر.

در این مثال، تم رایگان Astra دارای گزینه ای به نام Header Builder است. ما به شما نحوه استفاده از این ویژگی را در Astra نشان خواهیم داد، اما به خاطر داشته باشید که بسته به تمی  که  می خواهید استفاده ‌کنید، این ویژگی متفاوت به نظر می‌رسد.

اگر روی Header Builder  کلیک کنید، شما را به صفحه‌ای می‌آورد تا هدر خود را ویرایش کنید و ویجت‌ها را اضافه کنید.

در پایین صفحه، می‌توانید هدر را به همراه قسمت‌های بالا و زیر هدر کاملاً شخصی‌سازی کنید. به سادگی روی یکی از قسمت های خالی حرکت کنید و روی نماد “Plus” کلیک کنید.

با این کار یک منوی بازشو ظاهر می شود که در آن می توانید “ویجت 1” را انتخاب کنید.

گزینه های دیگری برای انتخاب وجود دارد، اما باید یکی از گزینه های “ویجت” را انتخاب کنید تا ویجت هدر ایجاد شود.

برای افزودن یک بخش  ویجت به هدر خود، روی کادر “ویجت 1” که در بخش سفارشی‌سازی سرصفحه است کلیک کنید.

با این کار گزینه ای برای افزودن ویجت ظاهر می شود.

در مرحله بعد، روی نماد افزودن بلوک “Plus” در منوی سمت چپ کلیک کنید.

با این کار یک پنجره بازشو ظاهر می شود که در آن می توانید ویجتی را برای افزودن به هدر خود انتخاب کنید.

می‌توانید به سفارشی‌سازی هدر خود ادامه دهید و هر تعداد ویجت که می‌خواهید اضافه کنید.

پس از اتمام کار، مطمئن شوید که روی دکمه “انتشار” کلیک کنید تا تغییرات خود را ذخیره کنید.

اکنون می توانید ناحیه هدر سایت  خود را با ویجت یا ویجت هایی که اضافه کرده اید مشاهده کنید.

اگر از تم از Astra استفاده نمی کنید؟

راه دیگر برای مشاهده اینکه آیا تم شما از قبل دارای ویجت هدر وردپرس است یا نه این است که در پنل مدیریت وردپرس خود به Appearance » Widgets بروید.

سپس، ببینید آیا یک بخش ویجت با عنوان “Header” یا چیزی مشابه وجود دارد.

اگر وجود دارد، به سادگی بر روی نماد “Plus” کلیک کنید تا منوی ابزارک ها ظاهر شود.

سپس با کلیک کردن بر روی آن می توانید هر ویجتی را که دوست دارید اضافه کنید.

مطمئن شوید که روی دکمه «به‌روزرسانی» کلیک کرده‌اید تا تغییرات خود را در بخش  ویجت هدر ذخیره کنید.

روش 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’ );

این کد یک sidebar  جدید یا یک بخش  آماده ویجت را برای تم  شما ایجاد می کند.
اگر به Appearance » Widgets بروید، یک بخش  ویجت جدید با عنوان “Custom Header Widget Area” خواهید دید.

اکنون، می توانید ویجت های خود را به این منطقه جدید اضافه کنید. با این حال، ویجت هدر شما هنوز به در وب سایت شما نمایش داده نمی شود. در ادامه به شما نشان خواهیم داد که چگونه این کار را انجام دهید.

نمایش ویجت هدر سفارشی شما در وردپرس

اکنون که  بخش  ویجت هدر را ایجاد کرده اید، باید به وردپرس بگویید کجا آن را در وب سایت شما نمایش دهد.

برای انجام این کار، باید فایل 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 به بخش  ویجت هدر  وردپرس خود Style دهید

بسته به تم  خود، ممکن است لازم باشد CSS های را به وردپرس اضافه کنید تا نحوه نمایش بخش ویجت هدر و هر ویجت داخل آن را کنترل کنید. اگر CSS نمی دانید، می توانید به جای آن از افزونه ای مانند CSS Hero استفاده کنید.
سپس به قسمت Appearance » Customize در پنل مدیریت وردپرس خود بروید.

با این کار پنل سفارشی کننده تم وردپرس ظاهر می شود. شما باید بر روی تب “Additional 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 را به کادر «Additional CSS» اضافه کنید. و سپس بر روی Publish کلیک کنید . حال می توانید ویجت هدرکی که اضافه کرده اید را با style جدید مشاهده کنید

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