نمایش نوار اطلاعیه در بالای سایت وردپرس

فرض کنید یه کمپین تخفیف ۴۸ ساعته راه انداختید. بنرش رو توی صفحه اصلی گذاشتید، توی اینستاگرام هم اعلام کردید. اما بیشتر بازدیدکننده‌های سایت شما اصلاً از صفحه اصلی وارد نمی‌شن؛ اون‌ها از گوگل مستقیم می‌رسن به یه مقاله یا صفحه محصول، کارشون رو می‌کنن و می‌رن — بدون اینکه حتی بفهمن تخفیفی در کار بوده.

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

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

نوار اطلاع‌رسانی (Notification Bar) چیست؟

نوار اطلاع‌رسانی یه نوار باریک افقیه که معمولاً بالای صفحه — بالاتر از هدر و منوی سایت — قرار می‌گیره و یه پیام کوتاه به همراه یه دکمه یا لینک نشون می‌ده. توی فارسی بهش نوار اعلان، بنر بالای سایت یا نوار اطلاعیه هم می‌گن و توی منابع انگلیسی با اسم‌های Notification Bar، Announcement Bar، Alert Bar و Top Bar شناخته می‌شه. همه‌ی این‌ها یه چیزن؛ فقط هر افزونه یه اسم دیگه روش گذاشته.

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

فرق نوار اطلاع‌رسانی با پاپ‌آپ چیه؟

یه نکته که خیلی‌ها نمی‌دونن: گوگل از سال ۲۰۱۷ سایت‌هایی رو که توی موبایل پاپ‌آپ تمام‌صفحه نشون می‌دن جریمه می‌کنه، ولی نوارهای اطلاع‌رسانی که فضای کمی از صفحه رو می‌گیرن صراحتاً از این قاعده مستثنا هستن. یعنی نوار اطلاع‌رسانی هم برای کاربر بهتره، هم برای سئوی شما امن‌تره.

انواع نوار اطلاع‌رسانی

• نوار ثابت بالای صفحه (Static): با اسکرول کردن از دید خارج می‌شه. کمترین مزاحمت رو داره و برای پیام‌های عمومی مناسبه.
• نوار چسبان (Sticky): موقع اسکرول هم بالای صفحه می‌مونه. بیشتر دیده می‌شه و برای کمپین‌های فروش عالیه.
• نوار پایین صفحه: برای پیام‌های کم‌اولویت‌تر مثل اطلاعیه کوکی یا لینک شبکه‌های اجتماعی.
• نوار تأخیری یا اسکرولی: بعد از چند ثانیه یا بعد از اینکه کاربر یه مقدار اسکرول کرد ظاهر می‌شه. نرخ کلیکش بالاتره، چون کاربر قبلش با محتوا درگیر شده.

چرا سایت شما به نوار اطلاع‌رسانی نیاز داره؟

جواب کوتاهش اینه: چون صفحه اصلی، اصلی‌ترین صفحه ورود کاربرا نیست. توی بیشتر سایت‌های محتوایی و فروشگاهی، سهم بزرگی از ترافیک ارگانیک مستقیم می‌شینه روی صفحات داخلی. هر پیامی که فقط توی صفحه اصلی بذارید، اکثریت مخاطباتون رو از دست می‌دید.

نوار اطلاع‌رسانی تنها المان سایته که همزمان سه تا ویژگی داره: توی تمام صفحات دیده می‌شه، بالاتر از خط تا (Above the Fold) قرار می‌گیره، و ساختن و حذفش کمتر از پنج دقیقه طول می‌کشه.

۷ کاربرد پرتکرار نوار اطلاع‌رسانی

۱. اعلام تخفیف و کمپین فروش — پرکاربردترین حالتشه. اگه شمارش معکوس هم بهش اضافه کنید، حس فوریت رو چند برابر می‌کنه.

۲. اعلام ارسال رایگان — توی فروشگاه‌های اینترنتی، نشون دادن «ارسال رایگان برای خریدهای بالای X تومان» توی تمام صفحات، یکی از ساده‌ترین راه‌های بالا بردن میانگین سبد خریده.

۳. جذب عضو خبرنامه — یه دکمه کوچیک «عضویت» توی نوار، بدون اینکه کاربر رو اذیت کنه، لیست ایمیلتون رو رشد می‌ده.

۴. اطلاع‌رسانی تعطیلات و تغییر ساعت کاری — قبل از نوروز یا تعطیلات، تعداد تیکت‌های «سفارش من کی ارسال می‌شه؟» رو به شکل محسوسی کم می‌کنه.

۵. اعلام وبینار یا رویداد — با قابلیت تاریخ شروع و پایان، نوار خودش روز رویداد ظاهر می‌شه و بعدش ناپدید می‌شه.

۶. هشدار قطعی سرویس یا اختلال — پیام مهمی که همه باید ببینن، فرقی نمی‌کنه توی کدوم صفحه باشن.

۷. معرفی محصول یا محتوای جدید — ترافیکی که همین حالا توی سایتتون هست رو هدایت می‌کنید به صفحه‌ای که تازه منتشر کردید.

تأثیر واقعیش روی نرخ تبدیل چقدره؟

بذارید واقع‌بین باشیم: نوار اطلاع‌رسانی معجزه نمی‌کنه. نرخ کلیکش معمولاً یک تا سه درصد بازدیدکننده‌هاست. ولی دو تا نکته این عدد رو ارزشمند می‌کنه.

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

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

روش‌های ساخت نوار اطلاع‌رسانی در وردپرس

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

روش اول: استفاده از افزونه (پیشنهاد ما)

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

برای ۹۵ درصد سایت‌ها همین روش درسته. توی بخش بعدی، بهترین افزونه‌های موجود رو با هم مقایسه می‌کنیم.

روش دوم: قابلیت داخلی قالب

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

• نمایش ← سفارشی‌سازی و بگردید دنبال گزینه‌هایی با اسم Top Bar، Announcement Bar، Notification یا Header Notice
• تنظیمات اختصاصی قالب (معمولاً یه منوی جداگونه با اسم خود قالب توی پیشخوان)
• اگه از سازنده صفحه استفاده می‌کنید، بخش Theme Builder یا Header Builder اون رو ببینید

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

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

روش سوم: کدنویسی دستی

اگه با کد راحتید و می‌خواید سبک‌ترین حالت ممکن رو داشته باشید، با چند خط کد می‌تونید نوار رو بسازید. کد زیر رو توی فایل functions.phpقالب فرزند خودتون یا توی افزونه‌ای مثل Code Snippets بذارید:

php

// نمایش نوار اطلاع‌رسانی در بالای سایتadd_action( 'wp_body_open', 'mwp_notification_bar' );function mwp_notification_bar() {    $message  = 'جشنواره تخفیف نوروزی آغاز شد — تا ۵۰٪ تخفیف';    $btn_text = 'مشاهده تخفیف‌ها';    $btn_link = 'https://example.com/sale';    ?>    <div id="mwp-bar">        <span class="mwp-bar-text"><?php echo esc_html( $message ); ?></span>        <a class="mwp-bar-btn" href="<?php echo esc_url( $btn_link ); ?>">            <?php echo esc_html( $btn_text ); ?>        </a>        <button class="mwp-bar-close" aria-label="بستن نوار">&times;</button>    </div>    <?php}

بعدش این استایل‌ها رو توی نمایش ← سفارشی‌سازی ← CSS اضافی وارد کنید:

css

#mwp-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 48px 12px 16px;
    background: #1f2b6c;
    color: #fff;
    font-size: 15px;
    position: relative;
    z-index: 9999;
}
#mwp-bar.is-hidden { display: none; }
.mwp-bar-btn {
    background: #ffcf3f;
    color: #1f2b6c !important;
    padding: 6px 18px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 700;
    white-space: nowrap;
}
.mwp-bar-close {
    position: absolute;
    left: 14px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
@media (max-width: 600px) {
    #mwp-bar { flex-direction: column; gap: 10px; padding: 12px 40px 12px 16px; }
    .mwp-bar-text { text-align: center; }
}

و در آخر، برای اینکه بعد از اینکه کاربر نوار رو بست دیگه بهش نشون داده نشه، این تیکه جاوااسکریپت رو اضافه کنید:

javascript

document.addEventListener('DOMContentLoaded', function () {    var bar = document.getElementById('mwp-bar');    if (!bar) return;    if (localStorage.getItem('mwpBarClosed') === '1') {        bar.classList.add('is-hidden');        return;    }    bar.querySelector('.mwp-bar-close').addEventListener('click', function () {        bar.classList.add('is-hidden');        localStorage.setItem('mwpBarClosed', '1');    });});

دو تا نکته مهم درباره این روش:

این کد از هوک wp_body_open استفاده می‌کنه که از وردپرس ۵.۲ اضافه شده. اگه قالبتون قدیمی باشه و این هوک رو توی فایل header.php نداشته باشه، نوار اصلاً نمایش داده نمی‌شه. توی این حالت باید <?php wp_body_open(); ?> رو دقیقاً بعد از تگ <body> توی فایل header.php قالب فرزند اضافه کنید.

دوم اینکه هر بار بخواید متن نوار رو عوض کنید باید برید سراغ کد — و اگه کسی غیر از خودتون بخواد این کار رو بکنه، عملاً غیرممکنه. این بزرگ‌ترین ضعف روش کدنویسیه.

مقایسه سه روش

معرفی و مقایسه بهترین افزونه‌های نوار اطلاع‌رسانی

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

WPFront Notification Bar — انتخاب اول ما

WPFront Notification Bar با بیش از ۵۰ هزار نصب فعال و امتیاز ۴.۵ از ۵، پرکاربردترین افزونه این دسته‌ست. نسخه رایگانش به شکل عجیبی کامله و این قابلیت‌ها رو داره: نمایش پیام همراه با دکمه، پشتیبانی از شورت‌کد، دکمه‌ای که می‌تونه لینک باز کنه یا کد جاوااسکریپت اجرا کنه، انتخاب موقعیت بالا یا پایین صفحه، حالت چسبان، نمایش موقع اسکرول، تعیین ارتفاع دلخواه، تأخیر قبل از نمایش، دکمه بستن و بستن خودکار بعد از چند ثانیه، رنگ‌بندی کاملاً سفارشی، دکمه بازکردن دوباره، انتخاب صفحه‌ها و نوشته‌های خاص برای نمایش، فیلتر بر اساس نقش کاربری، تعیین تاریخ شروع و پایان، و مخفی کردن نوار توی دستگاه‌های کوچیک.

آخرین نسخه‌ش (۳.۵.۱) دو ماه پیش منتشر شده و با وردپرس ۷.۰.۱ تست شده — یعنی نگهداری فعال داره و بابت ناسازگاری نگرانی ندارید.

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

Easy Notification Bar — سبک‌ترین گزینه

اگه فقط یه نوار ساده می‌خواید و از پیچیدگی فراری هستید، Easy Notification Bar دقیقاً برای شماست. کاملاً رایگانه، هیچ نسخه پرویی نداره و به همین خاطر هیچ تبلیغ، پیشنهاد ارتقا یا برندینگی داخل افزونه نمی‌بینید — چیزی که بین افزونه‌های رایگان واقعاً کمیابه.

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

یه نکته فنی مهم: این افزونه برخلاف خیلی از رقباش که از موقعیت‌دهی absolute استفاده می‌کنن، نوار رو دقیقاً بعد از تگ body درج می‌کنه و به همین خاطر روی هر قالب استانداردی بدون تداخل نمایش داده می‌شه.

نقطه ضعف اصلیش: امکان ساخت چند نوار مختلف رو نداره و سازنده‌ش صراحتاً گفته که هدف افزونه ساده و سریع موندنه — اگه به چند تا نوار نیاز دارید باید سراغ افزونه دیگه‌ای برید. زمان‌بندی و فیلتر صفحات هم نداره. WP Lift

Notibar — مدرن‌ترین ظاهر

Notibar یه نوار اطلاع‌رسانی بالای سایت اضافه می‌کنه که می‌تونید چسبانش کنید تا موقع اسکرول هم دیده بشه. دکمه بستنش سه تا حالت داره: غیرفعال، بستن دائمی، یا حالتی که کاربر بتونه دوباره نوار رو باز کنه. حالت پیش‌نمایش زنده هم داره که قبل از انتشار، اثر هر تنظیم رو نشون می‌ده. آخرین به‌روزرسانیش دی ۱۴۰۴ بوده.

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

FooBar — نوار اطلاع‌رسانی به‌علاوه اطلاعیه کوکی

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

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

بالاخره کدوم رو انتخاب کنم؟

• می‌خواید بیشترین امکانات رو رایگان داشته باشید؟ → WPFront Notification Bar
• فقط یه نوار ساده می‌خواید و از شلوغی بدتون میاد؟ → Easy Notification Bar
• ظاهر مدرن و پیش‌نمایش زنده براتون مهمه؟ → Notibar
• همزمان به اطلاعیه کوکی هم نیاز دارید؟ → FooBar

توی ادامه این مقاله، آموزش گام‌به‌گام رو با WPFront Notification Bar جلو می‌ریم، چون امکاناتش بیشترین پوشش رو به نیازهای مختلف می‌ده. اگه افزونه دیگه‌ای انتخاب کردید هم نگران نباشید — مفاهیم و تنظیمات توی همه این افزونه‌ها تقریباً یکسانه.

آموزش گام‌به‌گام ساخت نوار اطلاع‌رسانی با WPFront Notification Bar

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

گام ۱: نصب و فعال‌سازی افزونه

از پیشخوان وردپرس برید به افزونه‌ها ← افزودن. توی کادر جستجو بنویسید WPFront Notification Bar. افزونه‌ای که مال Syam Mohan هست رو پیدا کنید، روی نصب بزنید و بعدش فعال کنید.

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

بعد از فعال‌سازی، تنظیمات افزونه رو از منوی تنظیمات پیدا می‌کنید. اگه اونجا نبود، دنبال منوی WPFront توی نوار کناری پیشخوان بگردید.

گام ۲: پیام نوار و دکمه‌ش رو بنویسید

اولین کاری که باید بکنید اینه که تیک فعال‌سازی نوار رو بزنید، وگرنه هرچی تنظیم کنید روی سایت چیزی نمایش داده نمی‌شه.

بعد می‌رید سراغ فیلد پیام. اینجا متن اصلی نوار رو می‌نویسید. یه نکته مهم: این فیلد شورت‌کد رو پردازش می‌کنه. یعنی می‌تونید شورت‌کد افزونه‌های دیگه رو هم داخلش بذارید — که جلوتر برای ساخت شمارش معکوس دقیقاً از همین قابلیت استفاده می‌کنیم.

برای دکمه هم دو تا فیلد دارید: متن دکمه و آدرسی که باید باز کنه. دکمه اختیاریه، ولی اگه هدفتون گرفتن کلیکه، حتماً بذاریدش. جالب اینجاست که دکمه می‌تونه به جای باز کردن لینک، یه کد جاوااسکریپت هم اجرا کنه — برای وقتی که مثلاً می‌خواید با کلیک روی دکمه یه فرم پاپ‌آپ باز بشه.

گام ۳: تعیین کنید نوار کجا و چطور ظاهر بشه

اینجا رفتار نوار رو مشخص می‌کنید. مهم‌ترین گزینه‌ها:

• موقعیت (Position): بالا یا پایین صفحه. برای پیام‌های مهم بالا، برای پیام‌های فرعی پایین.
• حالت چسبان (Fixed): اگه فعالش کنید، نوار موقع اسکرول هم بالای صفحه می‌مونه. دیده شدنش خیلی بیشتر می‌شه ولی یه نوار باریک از صفحه رو دائمی اشغال می‌کنه. برای کمپین‌های کوتاه‌مدت روشنش کنید، برای پیام‌های همیشگی خاموش.
• نمایش هنگام اسکرول (Display on Scroll): نوار اول مخفیه و وقتی کاربر یه مقدار اسکرول کرد ظاهر می‌شه. تجربه کاربری بهتری داره چون کاربر رو موقع ورود غافلگیر نمی‌کنه.
• ارتفاع نوار: هر عددی که بخواید. پیشنهاد ما بین ۴۰ تا ۵۵ پیکسله. کمتر از این متن خفه می‌شه، بیشتر از این زیادی جای مفید صفحه رو می‌گیره.
• تأخیر قبل از نمایش: می‌تونید بگید نوار مثلاً ۳ ثانیه بعد از باز شدن صفحه ظاهر بشه. حرکت ناگهانیش توجه رو بیشتر جلب می‌کنه.

گام ۴: دکمه بستن رو تنظیم کنید

این گام رو جدی بگیرید. همیشه دکمه بستن رو فعال کنید. کاربری که نتونه یه پیام رو ببنده، به جاش کل سایت رو می‌بنده.

سه تا تنظیم اینجا دارید:

• دکمه بستن: فعالش کنید، بدون استثنا.
• بستن خودکار بعد از چند ثانیه: اگه پیامتون صرفاً اطلاع‌رسانیه (مثلاً «سایت به‌روزرسانی شد»)، می‌تونید بذارید بعد از ۱۰ ثانیه خودش بره. ولی برای کمپین فروش این گزینه رو خاموش بذارید.
• دکمه بازکردن مجدد: بعد از اینکه کاربر نوار رو بست، یه آیکون کوچیک باقی می‌مونه که با کلیک روش دوباره نوار باز می‌شه. برای پیام‌های مهم مفیده.

گام ۵: رنگ‌بندی و ظاهر نوار

تمام رنگ‌ها قابل تغییرن: پس‌زمینه نوار، رنگ متن، رنگ دکمه و رنگ متن دکمه.

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

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

گام ۶: مشخص کنید نوار به کی و کجا نشون داده بشه

اینجا جاییه که این افزونه از رقباش جلو می‌زنه. چهار تا فیلتر دارید:

• انتخاب صفحه‌ها و نوشته‌ها: می‌تونید بگید نوار فقط توی صفحات محصول نمایش داده بشه، یا مثلاً توی صفحه تماس با ما نمایش داده نشه.
• فیلتر بر اساس نقش کاربری: خیلی کاربردیه. مثلاً پیام «عضو خبرنامه شوید» رو فقط به کاربران مهمان نشون بدید، نه به کسایی که قبلاً ثبت‌نام کردن.
• مخفی کردن در دستگاه‌های کوچک: اگه نوار توی موبایل به‌هم می‌ریزه یا فضای زیادی می‌گیره، می‌تونید کلاً توی موبایل خاموشش کنید. (البته اول سعی کنید متن رو کوتاه‌تر کنید — خاموش کردن آخرین راه‌حله.)

گام ۷: زمان‌بندی خودکار

اگه کمپینتون تاریخ مشخصی داره، فیلدهای تاریخ شروع و تاریخ پایان رو پر کنید. نوار خودش سر تاریخ مشخص‌شده ظاهر می‌شه و بعدش هم خودش ناپدید می‌شه.

این قابلیت ظاهراً ساده‌ست ولی خیلی به دردتون می‌خوره: دیگه لازم نیست نصفه‌شب بیدار بمونید که بنر جشنواره رو دستی خاموش کنید، یا بدتر از اون، سه روز بعد از تموم شدن تخفیف تازه یادتون بیفته که هنوز روی سایته.

گام ۸: قبل از رفتن، اینا رو چک کنید

بعد از ذخیره تنظیمات، این چند مورد رو حتماً بررسی کنید:

۱. سایت رو توی حالت ناشناس مرورگر باز کنید. اگه فقط توی حالت لاگین‌شده چک کنید ممکنه چیزی که کاربر می‌بینه با چیزی که شما می‌بینید فرق داشته باشه.
۲. صفحه رو توی موبایل باز کنید و ببینید متن شکسته نشده و دکمه از کادر بیرون نزده باشه.
۳. روی دکمه کلیک کنید و مطمئن بشید لینک درست کار می‌کنه.
۴. دکمه بستن رو بزنید، صفحه رو رفرش کنید و ببینید نوار دیگه برنمی‌گرده.
۵. اگه افزونه کش دارید (مثل LiteSpeed یا WP Rocket)، کش رو خالی کنید. این شماره یک دلیل «چرا نوارم نمایش داده نمی‌شه»ست.

جدول مرجع: تمام تنظیمات مهم در یک نگاه

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

ترفند: چطور به نوار اطلاع‌رسانی شمارش معکوس اضافه کنیم؟

WPFront Notification Bar به صورت داخلی شمارش معکوس نداره. ولی یادتونه گفتیم فیلد پیام شورت‌کد رو پردازش می‌کنه؟ دقیقاً از همین‌جا می‌تونیم تایمر رو اضافه کنیم. دو تا راه دارید:

راه اول: با یه افزونه شمارش معکوس

افزونه Countdown Timer Ultimate یکی از گزینه‌های خوب و به‌روزه — بیش از ۲۰ هزار نصب فعال داره و آخرین به‌روزرسانیش بهمن ۱۴۰۴ بوده. بعد از نصب:

۱. یه تایمر جدید بسازید و تاریخ پایانش رو تنظیم کنید.
۲. شورت‌کدی که بهتون می‌ده رو کپی کنید — چیزی شبیه [wpcdt-countdown id="1"].
۳. برگردید به تنظیمات WPFront و شورت‌کد رو داخل فیلد پیام بچسبونید. مثلاً:

🔥 جشنواره تخفیف تا [wpcdt-countdown id="1"] دیگه تموم می‌شه!

همین. حالا نوار اطلاع‌رسانی‌تون یه تایمر زنده داره.

راه دوم: با یه شورت‌کد اختصاصی (سبک‌تر)

اگه نمی‌خواید فقط برای یه تایمر ساده یه افزونه دیگه به سایتتون اضافه کنید، این کد رو توی functions.php قالب فرزند یا افزونه Code Snippets بذارید:

php

// شورت‌کد شمارش معکوس سادهadd_shortcode( 'mwp_countdown', 'mwp_countdown_shortcode' );function mwp_countdown_shortcode( $atts ) {    $atts = shortcode_atts( array(        'date'    => '',        'expired' => 'مهلت به پایان رسید',    ), $atts );    if ( empty( $atts['date'] ) ) {        return '';    }    $uid = 'mwpcd-' . wp_rand( 1000, 9999 );    ob_start();    ?>    <span class="mwp-countdown" id="<?php echo esc_attr( $uid ); ?>"          data-date="<?php echo esc_attr( $atts['date'] ); ?>"          data-expired="<?php echo esc_attr( $atts['expired'] ); ?>"></span>    <script>    (function () {        var el = document.getElementById('<?php echo esc_js( $uid ); ?>');        if (!el) { return; }        var end = new Date(el.dataset.date.replace(' ', 'T')).getTime();        function tick() {            var diff = end - Date.now();            if (diff <= 0) {                el.textContent = el.dataset.expired;                return;            }            var d = Math.floor(diff / 86400000);            var h = Math.floor(diff % 86400000 / 3600000);            var m = Math.floor(diff % 3600000 / 60000);            var s = Math.floor(diff % 60000 / 1000);            el.textContent = d + ' روز و ' + h + ':' +                ('0' + m).slice(-2) + ':' + ('0' + s).slice(-2);            setTimeout(tick, 1000);        }        tick();    })();    </script>    <?php    return ob_get_clean();}

بعدش کافیه این شورت‌کد رو توی فیلد پیام نوار بذارید:

🔥 فقط [mwp_countdown date="2026-09-22 23:59" expired="تمام شد"] تا پایان جشنواره!

دو تا نکته: فرمت تاریخ باید دقیقاً به شکل YYYY-MM-DD HH:MM باشه. ضمناً این تایمر بر اساس ساعت مرورگر کاربر محاسبه می‌شه، پس اگه مخاطب خارج از کشور هم دارید، ممکنه عدد دقیقی که می‌بینن با چیزی که شما انتظار دارید چند ساعت فرق داشته باشه.

۵ نکته برای ساختن نواری که واقعاً کلیک می‌گیره

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

این پنج تا نکته رو از روی چیزی که واقعاً روی سایت‌ها جواب می‌ده جمع کردیم:

نکته ۱: متن رو کوتاه کنید، بعد بازم کوتاه‌ترش کنید

کاربر نوار اطلاع‌رسانی رو نمی‌خونه — اسکن می‌کنه. کمتر از دو ثانیه فرصت دارید. اگه پیامتون توی این دو ثانیه منتقل نشه، از دست رفته.

قانون ساده‌ای که می‌تونید بهش پایبند باشید: متن نوار نباید بیشتر از ۸ تا ۱۰ کلمه باشه. هر کلمه‌ای که حذفش به پیام آسیب نمی‌زنه، حذفش کنید.

نکته ۲: دکمه‌تون باید فعل داشته باشه

بزرگ‌ترین اشتباهی که توی دکمه‌های CTA می‌بینیم، استفاده از کلمات خنثی و بی‌جونه. «اطلاعات بیشتر»، «کلیک کنید»، «مشاهده» — این‌ها به کاربر نمی‌گن قراره چه اتفاقی بیفته.

دکمه خوب دو تا ویژگی داره: یه فعل مشخص داره و مشخص می‌کنه کاربر چی گیرش میاد.

یه ترفند کوچیک که تأثیر عجیبی داره: دکمه رو از زبان کاربر بنویسید، نه از زبان خودتون. «تخفیفم رو می‌خوام» خیلی بهتر از «دریافت تخفیف» جواب می‌ده، چون کاربر داره جمله‌ی خودش رو می‌بینه.

نکته ۳: کنتراست، کنتراست، کنتراست

قبلاً هم اشاره کردیم ولی چون مهم‌ترین عامل دیده شدنه، دوباره می‌گیم: نوار نباید شبیه بقیه سایت باشه.

مغز آدم توی چند سال گذشته یاد گرفته هر چیزی که شبیه بنر تبلیغاتیه رو نادیده بگیره — بهش می‌گن «کوری بنری». تنها راه فرار از این فیلتر، متفاوت بودنه.

سه تا قانون عملی:

• رنگ پس‌زمینه نوار باید با رنگ هدر سایت کاملاً فرق کنه، نه اینکه یه سایه روشن‌تر از همون رنگ باشه.
• دکمه باید نسبت به پس‌زمینه نوار درخشان باشه. ترکیب‌های امتحان‌شده: سرمه‌ای + زرد، مشکی + سبز روشن، قرمز تیره + سفید.
• متن باید خوانا باشه. اگه پس‌زمینه تیره‌ست، متن سفید؛ اگه روشنه، متن تیره. متن خاکستری روی پس‌زمینه رنگی، بدترین انتخابه.

نکته ۴: در هر لحظه فقط یک پیام

وسوسه می‌شید که همه چیز رو توی نوار بذارید: هم تخفیف، هم ارسال رایگان، هم لینک اینستاگرام. نکنید این کار رو.

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

نکته ۵: نوار رو فراموش نکنید

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

راه‌حلش ساده‌ست: از همون اول تاریخ پایان رو تنظیم کنید. حتی اگه فکر می‌کنید کمپینتون تمدید می‌شه، تاریخ بذارید. تمدید کردن یه تاریخ راحت‌تر از یادت افتادن یه بنر فراموش‌شده‌ست.

اشتباهاتی که حتماً ازشون دوری کنید

• نذاشتن دکمه بستن. کاربری که نتونه پیام رو ببنده، صفحه رو می‌بنده.
• نوار خیلی بلند. بیشتر از ۶۰ پیکسل یعنی دارید محتوای اصلی رو هل می‌دید پایین‌تر.
• استفاده همزمان با پاپ‌آپ. کاربری که همزمان با نوار و پاپ‌آپ روبرو بشه، حس می‌کنه وارد یه سایت اسپم شده. یکی رو انتخاب کنید.
• انیمیشن‌های چشمک‌زن. جلب توجه با حرکت جواب می‌ده، ولی چشمک زدن مداوم فقط عصبانی‌کننده‌ست و برای کاربرانی با حساسیت بینایی مشکل‌ساز می‌شه.
• پیام مبهم. «خبر مهم!» بدون هیچ توضیحی، کلیک نمی‌گیره. کاربر باید قبل از کلیک بدونه قراره کجا بره.

رفع مشکلات رایج نوار اطلاع‌رسانی

اگه به مشکل خوردید، احتمالاً یکی از این پنج مورده. به ترتیب از شایع‌ترین شروع می‌کنیم.

مشکل ۱: نوار رو ساختم ولی توی سایت نمایش داده نمی‌شه

این شایع‌ترین مشکله و معمولاً یکی از این پنج تا دلیل رو داره. به همین ترتیب چکشون کنید:

اول از همه، کش رو خالی کنید. اگه افزونه کش دارید (LiteSpeed Cache، WP Rocket، W3 Total Cache و…) یا سرویس CDN مثل آروان‌کلاد یا کلادفلر استفاده می‌کنید، کش رو پاک کنید. توی ۷۰ درصد مواقع مشکل همینجا حل می‌شه.

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

سوم، صفحه رو توی حالت ناشناس باز کنید. ممکنه فیلتر نقش کاربری روی «کاربران مهمان» تنظیم شده باشه و شما که لاگین هستید نبینیدش.

چهارم، فیلتر صفحات رو ببینید. شاید ناخواسته نوار رو فقط برای یه صفحه خاص فعال کردید.

پنجم، هوک قالب رو بررسی کنید. بعضی افزونه‌ها — از جمله Easy Notification Bar — از هوک wp_body_open استفاده می‌کنن که از وردپرس ۵.۲ اضافه شده. اگه قالب شما قدیمی باشه و این هوک رو نداشته باشه، نوار نمایش داده نمی‌شه. راه‌حل: توی فایل header.php قالب فرزند، دقیقاً بعد از تگ <body> این خط رو اضافه کنید: WP Lift

php

<?php wp_body_open(); ?>

مشکل ۲: نوار زیر هدر چسبان قالب گم شده

اگه قالبتون هدر چسبان (Sticky Header) داره، ممکنه هدر بیاد روی نوار اطلاع‌رسانی و بخشیش رو بپوشونه، یا برعکس، نوار روی منو بیفته.

دلیلش اینه که هر دو از position: fixed استفاده می‌کنن و سر جای بالای صفحه با هم دعوا دارن. راه‌حل اینه که به هدر بگید یه مقدار پایین‌تر بشینه. این کد رو توی نمایش ← سفارشی‌سازی ← CSS اضافی بذارید:

css

/* عدد ۵۰ را با ارتفاع نوار خودتان جایگزین کنید */.site-header.sticky,header.is-sticky {    top: 50px;}

نکته مهم: کلاس .site-header.sticky توی هر قالبی فرق می‌کنه. برای پیدا کردن کلاس درست، روی هدر سایتتون راست‌کلیک کنید و Inspect رو بزنید تا اسم واقعی کلاس رو ببینید.

اگه مشکل برعکس بود و نوار زیر هدر رفته بود، این رو امتحان کنید:

css

#wpfront-notification-bar {
    z-index: 99999 !important;
}

مشکل ۳: توی موبایل به‌هم می‌ریزه

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

به ترتیب این راه‌حل‌ها رو امتحان کنید:

۱. متن رو کوتاه‌تر کنید. بهترین راه‌حل همیشه همینه.
۲. ارتفاع نوار رو توی موبایل بیشتر کنید تا متن و دکمه زیر هم بشینن:

css

@media (max-width: 600px) {    #wpfront-notification-bar .wpfront-message {        font-size: 13px;        line-height: 1.6;    }}

۳. گزینه «مخفی کردن در دستگاه‌های کوچک» رو فعال کنید. این آخرین راه‌حله — چون معمولاً بیشتر از نصف ترافیک سایت از موبایله و با این کار پیامتون رو از اکثریت مخاطبا پنهان می‌کنید.

مشکل ۴: نوار اطلاع‌رسانی سایتم رو کند می‌کنه؟

جواب کوتاه: نه، تقریباً هیچ اثری نداره.

جواب بلندتر: یه افزونه نوار اطلاع‌رسانی معمولاً چند کیلوبایت CSS و جاوااسکریپت به صفحه اضافه می‌کنه که در مقایسه با تصاویر و اسکریپت‌های دیگه سایت ناچیزه. اگه سایتتون کنده، مقصر جای دیگه‌ایه.

ولی یه نکته هست که واقعاً باید حواستون بهش باشه: CLS یا جابجایی ناگهانی چیدمان. اگه نوار با تأخیر لود بشه و یکهو ظاهر بشه، کل محتوای صفحه چند پیکسل می‌پره پایین. این هم برای کاربر آزاردهنده‌ست و هم روی نمره Core Web Vitals سایتتون اثر منفی می‌ذاره.

افزونه‌های خوب این مشکل رو حل کردن — مثلاً Easy Notification Bar توی نسخه ۱.۶ روش نمایش نوار رو بهینه کرد تا از مشکل CLS جلوگیری کنه. اگه بعد از نصب نوار متوجه پرش صفحه شدید، گزینه «تأخیر قبل از نمایش» رو خاموش کنید و حالت چسبان رو امتحان کنید.

مشکل ۵: امنیت — چیزی که کسی درباره‌ش حرف نمی‌زنه

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

هر افزونه‌ای که نصب می‌کنید یه در جدید به سایتتونه. حتی افزونه‌های محبوب و پرنصب هم گاهی آسیب‌پذیری پیدا می‌کنن — مثلاً همین WPFront Notification Bar توی نسخه‌های قبلیش چند بار آسیب‌پذیری XSS داشته که سازنده‌ش توی نسخه‌های بعدی برطرفشون کرده.

این یعنی افزونه بدیه؟ نه. یعنی روال طبیعی نرم‌افزاره. ولی چند تا عادت ساده هست که باید داشته باشید:

• افزونه‌ها رو همیشه به‌روز نگه دارید. بیشتر هک‌ها از طریق افزونه‌های قدیمی و به‌روزنشده اتفاق می‌افته.
• قبل از نصب هر افزونه، تاریخ آخرین به‌روزرسانیش رو چک کنید. افزونه‌ای که بیشتر از یک سال به‌روز نشده، ریسکه.
• یه افزونه امنیتی مثل Wordfence یا Sucuri داشته باشید که سایتتون رو منظم اسکن کنه.
• افزونه‌هایی که استفاده نمی‌کنید رو غیرفعال نکنید، حذفشون کنید. افزونه غیرفعال هم می‌تونه آسیب‌پذیر باشه.

سؤالات متداول

جمع‌بندی

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

اگه بخوایم همه‌ی مقاله رو توی سه جمله خلاصه کنیم:

۱. نوار اطلاع‌رسانی ارزون‌ترین راه برای دیده شدن پیام مهمتونه — چون از ترافیکی استفاده می‌کنه که همین الان روی سایتتونه.
۲. متن کوتاه، دکمه با فعل مشخص، و رنگ با کنتراست بالا — این سه تا بیشترین تأثیر رو روی نرخ کلیک دارن.
۳. همیشه تاریخ پایان بذارید — بنر فراموش‌شده بدتر از نداشتن بنره.

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

اگه سؤالی داشتید یا موقع راه‌اندازی به مشکلی خوردید، توی بخش دیدگاه‌ها بنویسید — حتماً جواب می‌دیم. موفق و پیروز باشید. 🙂

تیم تولید محتوا

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