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

با سلام و عرض ادب

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

این آموزش برای دوستانی میباشد که کمی آشنایی با کدهای قالب دارند و میتوانند فایل های مورد نظر را ویرایش کنند.

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

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

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

گام اول: ایجاد یک ابزارک برای نمایش در هدر

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

گام دوم : نمایش ابزارک مورد نظر در هدر

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

در این مرحله شما باید کدهای زیر را در فایل 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 سفارشی استفاده کنید حالا این کدها را باید در کدام قسمت قرار دهید؟ اگر از قالب رایگان استفاده میکنید در قسمت Appearance / Customize page  میتوانید کد مورد نظر را قرار داده و ویرایش کنید ولی اگر از قالب پرمیوم استفاده میکنید به قسمت تنظیمت قالب رفته و در قسمت css سفارشی کد مورد نظر را قرار دهید.

در بعضی از قالب ها جایی برای قرار دادن کدهای سفارشی وجود دارد و برای حل این موضوع میتوانید از افزونه Simple Custom CSS استفاده کرده یا در داخل هاست یک فایل با نام rtl.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;
    }

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

منبع: wpbeginner.com