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

با سلام خدمت دوستان عزیز وردپرسی!
اگر به دنبال این هستید تا در هدر سایت خود محتوایی را به صورت ابزارکی نمایش دهید نیازی به تغییر پوسته و قالب خود ندارید.
در این مقاله از همیار وردپرس قصد دارم تا آموزشی را ارائه دهم که به وسیله آن میتوانید امکان افزودن ابزارک را فراهم کنید. و در نهایت با قرار دادن هر نوع محتوایی در این ابزارک آن را در هدر سایت نمایش دهید.

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

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

روش افزودن ابزارک در قالب

برای افزودن ابزارک ابتدا وارد ویرایشگر قالب خود شده و کدهای زیر را در فایل فانکشن (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 افزوده خواهد شد.

  ساخت صفحه 404 سفارشی در وردپرس با افزونه 404page

حال یک ابزارک متنی درون آن مشابه زیر قرار دهید:

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

برای این منظور فایل 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; ?>

استفاده از شیوه نامه

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

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;
}

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

همانطور که می‌بینید، بنری که از همیار وردپرس در ابزارک قرار دادم، در هدر سایت قرار گرفت.

شاد باشید..

آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

دیدگاهتان را بنویسید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. سلام.
    چجوری هدری مثل سایت همیار وردپرس بسازم؟

  2. سلام
    من این کار رو با قالب انفولد انجام دادم دیگه سایتم نمیاد بالا
    قالب رو هم عوض کردم درست نشد
    لطفا راهنمایی کنید

  3. 7 سال عضو همیار وردپرس

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

  4. ببخشید کد ها رو در کدوم بخشش بزارم اینجا که پر از کدخ

    • 8 سال عضو همیار وردپرس

      توضیحات هر بخش داده شده و اسم فایل‌ها و بخش‌هایی که باید کدها درج بشه ذکر شده!

    • سلام متنا میزنه بیرون از قالب سایت و رسپانسیو نیست