نمایش ابزارک در هدر سایت وردپرسی

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

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

ابزارک وردپرس چیست

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

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

خب بریم سراغ اهمیت قرار دادن ابزارک ها در هدر سایت؛ مسلماً همه شما از این موضوع با خبر هستید که کاربر به‌محض ورود به سایت به یک سری نقاط خاص نگاه می‌کند که یکی از آن‌ها هدر سایت است؛ ازاین‌جهت شما باید در هدر سایت خود محتوایی را قرار دهید که می‌خواهید توجه بیشتری به آن شود.

موردی که به آن اشاره شد بسیار حائز اهمیت است، به این صورت که شما می‌توانید از این ابزارک‌ها برای نمایش تبلیغات بسیار مهم یا آخرین مطالب سایت یا هر چیز دیگری استفاده کنید.

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

معمولاً تم‌های وردپرس ستون‌های اضافی کنار محتوا ایجاد می‌کنند. هنوز بسیاری از تم‌های وردپرس محتوا را به قسمت هدر اضافه نمی‌کنند. به همین دلیل در این مقاله به شما آموزش می‌دهیم که چطور یک بخش ابزارک در قسمت هدر اضافه کنید.

نمایش ابزارک در هدر سایت وردپرسی

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

برای ساخت این ابزارک‌ها می‌توانید آموزش ساخت ابزارک در وردپرس را که قبلاً برای شما عزیزان در سایت قرار داده شده است را مشاهده نمایید.

حالا شما باید وارد پیشخوان » نمایش» ویرایشگر پوسته شوید و قطعه کد زیر را در فایل 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' );

این کد یک نوار کناری یا یک بخش ابزارک جدید به قسمت هدر تم شما اضافه می‌کند. حال به قسمت نمایش و سپس صفحه ابزارک‌ها بروید. یک بخش ابزارک با برچسب “سربرگ سفارشی بخش ابزارک” یا “Custom Header Widget Area” خواهید دید.

حالا تنها کاری که شما باید انجام دهید این است که محتوای موردنظر خود را که می‌خواهید در هدر قرار بگیرد را در ابزارک جدیدی که ساختید قرار دهید و آن را ذخیره کنید. به همین راحتی!

نمایش ابزارک سفارشی سربرگ شما

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

خب برای نمایش ابزارک سفارشی در هدر سایت باید وارد فایل header.php شوید و آن را ویرایش کنید، سپس قطعه کد زیر را در این فایل جایگذاری و سپس اجرا کنید. درواقع شما باید کد زیر را در هر فایلی که می‌خواهید در سایت به نمایش در بیاید قرار دهید که در اینجا چون ما می‌خواهیم در هدر نمایش داده شود آن را در 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 ساده ماندد کد زیر که برای شما قرار دادیم، این کار را انجام دهید.

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
} 
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }


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

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

تیم تولید محتوا

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