ساخت نوار اعلان در وردپرس با WPFront Notification Bar

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

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

ساخت نوار اعلان در وردپرس با افزونه WPFront Notification Bar

نوار اعلان چه کاربردی برای سایتتون داره؟

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

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

WPFront Notification Bar چه امکاناتی در اختیارتون می‌ذاره؟

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

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

تفاوت نسخه رایگان و حرفه‌ای افزونه چیه؟

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

نصب و فعال‌سازی WPFront Notification Bar

قبل از شروع چه چیزهایی رو بررسی کنید؟

اول یک نسخه پشتیبان از سایتتون بگیرید و مطمئن بشید وردپرس و افزونه‌ها به‌روز هستن. اگه از افزونه کش استفاده می‌کنید، اسمش رو هم به خاطر بسپارید؛ چون شاید بعد از تغییر تنظیمات لازم باشه کش سایت رو پاک کنید.

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

چطور افزونه رو از مخزن وردپرس نصب کنید؟

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

از کجا وارد تنظیمات نوار اعلان بشید؟

بعد از فعال‌کردن افزونه، از منوی پیشخوان وارد «WPFront» و بعد «Notification Bar» بشید. تنظیمات اصلی نوار توی همین صفحه قرار دارن. شاید ترجمه یا جای بعضی گزینه‌ها با توجه به نسخه افزونه کمی فرق کنه، ولی عنوان انگلیسی اون‌ها کمک می‌کنه راحت‌تر پیداشون کنید.

تنظیمات نمایش نوار اعلان

فعال‌کردن نوار و انتخاب بالا یا پایین صفحه

اول «Enabled» رو فعال کنید تا نوار نمایش داده بشه. بعد از بخش «Position» مشخص کنید نوار بالای صفحه باشه یا پایین اون. نوار بالای صفحه معمولاً زودتر به چشم میاد، ولی حتماً بررسی کنید که سربرگ یا منوی سایتتون رو نپوشونه.

ثابت نگه‌داشتن نوار موقع اسکرول

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

نمایش نوار بعد از اسکرول یا چند ثانیه تأخیر

اگه نمی‌خواید نوار همون لحظه اول ظاهر بشه، با «Display After» چند ثانیه تأخیر براش بذارید. مقدار صفر یعنی نوار بدون تأخیر دیده می‌شه.

برای اینکه نوار بعد از حرکت کاربر توی صفحه ظاهر بشه، «Display on Scroll» رو فعال کنید. بعد توی «Scroll Offset» مقدار حرکت صفحه رو بر اساس پیکسل بنویسید. پیکسل یکی از واحدهای اندازه‌گیری بخش‌های صفحه‌ست. مثلاً با مقدار ۳۰۰، نوار بعد از پایین‌رفتن صفحه به‌اندازه ۳۰۰ پیکسل نمایش داده می‌شه. عدد مناسب برای همه سایت‌ها یکسان نیست؛ چند مقدار رو امتحان کنید تا ببینید کدوم‌یک برای صفحه‌های سایتتون بهتره.

تنظیم ارتفاع، فاصله و سرعت نمایش

«Bar Height» ارتفاع نوار رو بر اساس پیکسل مشخص می‌کنه. توی بعضی نسخه‌ها، اگه مقدار رو روی صفر بذارید، ارتفاع با توجه به متن تنظیم می‌شه. بعد از ذخیره، نتیجه رو روی کامپیوتر و موبایل ببینید. اگه متن کامل یا مرتب دیده نشد، ارتفاع رو دستی تغییر بدید.

«Position Offset» فاصله نوار از جای اصلیش رو تغییر می‌ده و وقتی نوار با سربرگ چسبان روی هم می‌افتن به درد می‌خوره. سربرگ چسبان همون بخش بالای سایته که با پایین‌رفتن توی صفحه همچنان جلوی چشم می‌مونه. «Animation Duration» هم مدت بازشدن نوار رو تعیین می‌کنه. چند مقدار کوتاه رو امتحان کنید و حالتی رو نگه دارید که حرکت نوار طبیعی‌تر به نظر میاد.

اضافه‌کردن دکمه بستن و بازکردن دوباره نوار

«Display Close Button» دکمه بستن رو نشون می‌ده. بهتره این گزینه روشن باشه تا کاربر مجبور نشه نوار رو همیشه ببینه. با فعال‌کردن «Display Reopen Button» هم بعد از بسته‌شدن نوار، یک دکمه کوچک ظاهر می‌شه که اون رو دوباره باز می‌کنه.

«Keep Closed» باعث می‌شه انتخاب کاربر برای بسته‌ماندن نوار توی صفحه‌های بعدی هم حفظ بشه. «Keep Closed For» مدت این وضعیت رو بر اساس روز مشخص می‌کنه. اگه «Auto Close After» رو تنظیم کنید، نوار بعد از چند ثانیه خودش بسته می‌شه.

مخفی‌کردن نوار در موبایل و نمایشگرهای کوچک

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

نوشتن پیام و ساخت دکمه نوار اعلان

چطور یک پیام کوتاه و واضح بنویسید؟

متن پیام رو توی «Message Text» بنویسید. کاربر باید با یک نگاه بفهمه چه خبریه و چرا بهتره روی دکمه کلیک کنه. مثلاً پیام «ارسال رایگان سفارش‌ها تا پایان امروز» خیلی روشن‌تر از یک توضیح طولانی و مبهمه.

اضافه‌کردن دکمه و لینک به صفحه دلخواه

برای ساخت دکمه، «Display Button» رو فعال کنید. بعد یک متن کوتاه مثل «مشاهده تخفیف» یا «ثبت‌نام» رو توی «Button Text» بنویسید. در بخش «Button Action» گزینه «Open URL» رو انتخاب کنید و نشانی کامل صفحه مقصد رو بذارید.

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

بازکردن لینک در صفحه تازه و تنظیم نوفالو

با «Open URL in New Tab/Window» لینک توی یک زبانه تازه باز می‌شه. برای لینک‌های داخلی معمولاً به این کار نیازی ندارید. نوفالو هم ویژگی‌ایه که به موتور جست‌وجو می‌گه لینک رو مثل یک تأیید عادی دنبال نکنه. اگه لینک تبلیغاتی یا پولیه، فعال‌کردن «No Follow Link» رو تنها راه‌حل در نظر نگیرید و نوع رابطه مناسب لینک رو هم بررسی کنید. راهنمای نوفالو کردن لینک‌های خارجی در وردپرس این تفاوت‌ها رو ساده‌تر توضیح می‌ده.

استفاده از شورت‌کد و JavaScript چه زمانی مناسبه؟

شورت‌کد یک کد کوتاه مثل [example] هست که خروجی یک افزونه یا قابلیت رو نشون می‌ده. اگه توی متن نوار شورت‌کد دارید، «Process Shortcode» رو فعال کنید. فقط سراغ شورت‌کدی برید که منبعش رو می‌شناسید و قبلاً عملکردش رو آزمایش کردید.

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

مشخص‌کردن محل و زمان نمایش نوار

نمایش نوار در همه سایت یا صفحه‌های انتخابی

از بخش «Display on Pages» انتخاب کنید که نوار توی همه سایت دیده بشه یا فقط روی چند صفحه مشخص. مثلاً اگه پیام فقط به فروشگاه مربوطه، لازم نیست اون رو توی نوشته‌های وبلاگ نشون بدید. بعد از انتخاب صفحه‌ها، یک صفحه مجاز و یک صفحه خارج از فهرست رو باز کنید تا از درست‌بودن تنظیم مطمئن بشید.

نمایش نوار برای نقش‌های کاربری مشخص

«Display for User Roles» تعیین می‌کنه کدوم نقش‌ها نوار رو ببینن. نقش کاربری یعنی نوع دسترسی حساب هر فرد توی وردپرس؛ مثل مدیر، نویسنده یا مشترک. اگه پیام برای بازدیدکننده‌های عادی نوشته شده، تنظیم مربوط به کاربران مهمان رو هم بررسی کنید.

تعیین تاریخ و ساعت شروع و پایان نمایش

زمان شروع رو با «Start Date & Time» و زمان پایان رو با «End Date & Time» وارد کنید. این تنظیم برای تخفیف‌ها و کمپین‌های محدود خیلی به درد می‌خوره. یادتون نره منطقه زمانی وردپرس رو از مسیر «تنظیمات ← عمومی» ببینید؛ چون افزونه زمان‌بندی رو با ساعت تنظیم‌شده سایت اجرا می‌کنه. بهتره اول یک بازه کوتاه آزمایشی بسازید تا مطمئن بشید زمان‌بندی توی نسخه فعلی افزونه درست کار می‌کنه.

نمایش نوار فقط در اولین صفحه بازدید

«Only in Landing Page» نوار رو فقط توی اولین صفحه‌ای نشون می‌ده که کاربر از راه اون وارد سایت شده. Landing Page اینجا لزوماً یک برگه فرود جدا نیست و به همون اولین صفحه بازدید اشاره می‌کنه. چون رفتار این گزینه ممکنه به نسخه افزونه و روش ورود کاربر ربط داشته باشه، اون رو با یک پنجره ناشناس مرورگر آزمایش کنید.

تغییر رنگ و ظاهر نوار اعلان

انتخاب رنگ پس‌زمینه و متن

رنگ پس‌زمینه رو از «Bar Color» و رنگ نوشته رو از «Message Text Color» انتخاب کنید. متن باید با پس‌زمینه تفاوت رنگ کافی داشته باشه تا راحت خونده بشه. مثلاً نوشته سفید روی زرد روشن خوانایی خوبی نداره، ولی یک نوشته تیره روی همون پس‌زمینه واضح‌تر دیده می‌شه.

تنظیم رنگ دکمه‌ها و سایه نوار

با «Button Color» و «Button Text Color» می‌تونید رنگ دکمه اصلی و نوشته اون رو عوض کنید. «Reopen Button Color» رنگ دکمه بازکردن دوباره و «Close Button Color» رنگ دکمه بستن رو تغییر می‌ده. اگه می‌خواید مرز نوار با محتوای صفحه مشخص‌تر باشه، «Display Shadow» رو فعال کنید.

شخصی‌سازی ظاهر نوار با CSS

CSS زبانی برای تغییر ظاهر قسمت‌های مختلف سایت، مثل رنگ، اندازه و فاصله‌هاست. می‌تونید کدهای ظاهری رو توی «Custom CSS» بنویسید، ولی اگه با CSS آشنا نیستید بهتره این قسمت رو خالی بذارید. قبل از واردکردن هر کدی هم یک نسخه از کد و تنظیمات قبلی نگه دارید تا در صورت نیاز راحت به حالت قبل برگردید.

ذخیره تنظیمات و آزمایش نوار اعلان

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

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

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

آزمایش لینک، دکمه بستن و زمان‌بندی

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

رفع مشکل نمایش‌ندادن نوار اعلان

اگه نوار نمایش داده نمی‌شه، اول ببینید «Enabled» فعاله یا نه. بعد تاریخ شروع و پایان، صفحه‌های مجاز، نقش کاربری و تنظیم نمایشگرهای کوچک رو بررسی کنید. شاید نوار قبلاً بسته شده و «Keep Closed» هنوز جلوی نمایش دوباره اون رو می‌گیره.

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

نکته‌های مهم برای ساخت یک نوار اعلان مؤثر

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

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

سؤال‌های رایج

جمع‌بندی

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

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

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

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