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

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

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

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

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

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

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

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

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

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

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

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

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

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