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

 افزودن ابزارک

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

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

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

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

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

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

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

شاد باشید..

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

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

335,144 نفر

پاسخی بگذارید

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

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

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

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

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

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

مطالب زیر را حتما بخوانید

دوره‌های آموزشی