ثبت‌نام ورود

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

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

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

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

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

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

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

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

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

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

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

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

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

برای ساخت این ابزارک‌ها می‌توانید آموزش ساخت ابزارک در وردپرس را که قبلاً برای شما عزیزان در سایت قرار داده شده است را مشاهده نمایید.

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

امیدواریم با کمک این مقاله توانسته باشید به هدر سایت خود یک ابزارک سفارشی اضافه کنید. موفق و پیروز باشید. 🙂

نظر شما در این‌باره چیست؟

  1. U23651 ۱۲ شهریور ۱۳۹۸

    سلام یه سوال داشتم
    من دقیقا همینجوری که شما گفتین عمل کردم وCustom Header Widget هم امد ولی جایی نداره که بخواهم چیزی بهش اضافه کنم یعنی قسمت text رو نداشت بعد اومدم از functions.php تابعی که وارد کردم رو پاک کردم بعد به روزرسانی پرونده رو زدم این ارور اومدParse error: syntax error, unexpected end of file in /home/samanovi/public_html/wp-content/themes/towerpress/functions.php on line 28
    حالا سایت نمیاد بالا همش این ارور رو میده.
    باید چیکار کنم که سایت بیاد بالا

  2. U11621 ۱۴ مهر ۱۳۹۷

    لینکی که دادید درست نیست می ره به صفحه اصلی

  3. U11621 ۱۴ مهر ۱۳۹۷

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

    با تشکر از سایت خوبتون

  4. کاربر مهمان ۰۷ خرداد ۱۳۹۷

    سلام روزتون بخیر
    ابزارک های من در سایت نشون داده میشه ولی هیچ کدوم فعال نیستن.یعنی مثلا جستجو در سایت وجود داره ولی با کلیک کردن چیزی نه باز میشه نه فعال 🙁
    باید چیکار کنم؟

  5. کاربر مهمان ۱۴ فروردین ۱۳۹۷

    سلام و عرض ادب ممنون بابت آموزش عالیتون
    اگر بخواهم یک منو زیر منوی اصلی سایت به صورت مجزا اضافه کنم از چه کدی باید استفاده کنم؟

    • U11404 ۱۴ فروردین ۱۳۹۷

      سلام
      در قسمت نمایش – فهرست ها
      می توانید کمی کشیدن زیر منو به سمت راست زیر مجموعه قرارش بدهید.

  6. کاربر مهمان ۱۱ آذر ۱۳۹۶

    سلام وقت بخیر. چرا گزینه custom header widget نداره واسه من 🙁

  7. کاربر مهمان ۱۲ مهر ۱۳۹۶

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

  8. کاربر مهمان ۰۶ شهریور ۱۳۹۶

    سلام وقت بخیر قالب من قسمت ابزارک بخش اضافه کردن هدر داشت و قبلا به درستی نشون میداد. چند وقته که از هاست سایت رو به وی پی اس لینوکس منتقل کردم و دیگه نشون نمیده! مشکل چیه؟؟؟
    لطفا تصویر زیر رو ببینید
    http://s9.picofile.com/file/8304804634/a00215.PNG
    بخش ابزارکها هم عکس هدر هم لینک و هم متن رو میذارم و ذخیره رو میزنم اما تو سایت نمایش داده نمیشه!
    ممنون میشم اگه راهنمایی کنید

  9. U4852 ۰۵ خرداد ۱۳۹۶

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

    • رضا حسینی راد رضا حسینی راد ۰۵ خرداد ۱۳۹۶

      کد درست هست. نحوه وارد کردن کد توسط شما مشکل هست. توی سایت سرچ کنید functions.php

  10. U4852 ۰۴ خرداد ۱۳۹۶

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

  11. کاربر مهمان ۱۱ فروردین ۱۳۹۶

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