09108670910 09199912950

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

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

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

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

چرا از ابزارک در هدر سایت استفاده کنیم؟

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

abovethefold-digiwp

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

ایجاد ابزارک در هدر سایت وردپرس

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

widgets

سپس کد زیر را به فایل توابع قالب خود فایل functions.php اضافه کنید:

function dw_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', 'dw_widgets_init' );

این کد یک بخش به هدر اضافه میکند که میتوانید در آن ابزارک مورد نظر خود را قرار دهید. اکنون وارد بخش نمایش»ابزارک ها شوید. یک بخش با برچسب “سربرگ سفارشی بخش ابزارک” را مشاهده خواهید کرد، اکنون میتوانید متن مورد نظر خود را وارد کنید تا در هدر نمایش داده شود و سپس آن را ذخیره کنید.

نمایش ابزارک

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

unstyled-widget-digiwp

ایجاد استایل برای ابزارک هدر

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

customizer

در صفحه جدید وارد بخش 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;
}

headerwidget-1-digiwp

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

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

  • دیدگاهتان فقط و فقط در رابطه با همین مطلب باشد.
  • لطفا از تایپ فینگلیش بپرهیزید. در غیر اینصورت دیدگاه شما بررسی نخواهد شد.
  • هدفتان از ارسال دیدگاه تبلیغ یا بک لینک نباشد. در غیر اینصورت دیدگاه حذف می شود.
  • به دیگر توهین و اهانت نکنید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *