نوار نوتیفیکیشن یکی از راه های ارتباط با مخاطبان سایت می باشد. با استفاده از افزونه نواراعلان وردپرس می توان آخرین اخبار، تبلیغات شبکه های اجتماعی، فروشگاه، تخفیفات و … را اطلاع رسانی کرد. کاربرد افزونه wpfront notification bar بسیار زیاد می باشد و بسته به هر موضوعی می توان از آن استفاده کرد.
کاربرد افزونه wpfront notification bar
ساخت نوارنوتیفیکیشن در وردپرس میتواند برای موارد گوناگونی از جمله اطلاع‌رسانی، نمایش کد تخفیف در وردپرس برای فروش محصولات و… مورد استفاده قرار بگیرد تا با استفاده از آن بتوانید در قالب یک نوار اعلان که در بالا یا پایین صفحه سایت به کاربران نمایش داده میشود را به صفحه خاصی منتقل کرده و یک پیغام دلخواه برای آنها به نمایش بگذارید.
در این سری از مقالات آموزش وردپرس قصد داریم تا به معرفی افزونه WPFront Notification Bar بپردازیم که با استفاده از افزونه نواراعلان وردپرس قادر به نمایش نواراعلان در وردپرس خواهید بود و میتوانید پیغام دلخواهی را با مواردی مثل نمایش در صفحه‌ای خاص، نمایش به بازدیدکنندگانی که از موتور جستجوی گوگل به سایت مراجعه می‌کنند و.. نمایش دهید.
امکانات افزونه WPFront Notification Bar
- نمایش پیام با یک دکمه (اختیاری)
- پردازش شورتکد های دلخواه شما
- اجرا کد جاوا اسکریپت مورد نظر شما
- نمایش نوار نوتیفیکیشن در بالا یا پایین
- نمایش نوار نوتیفیکیشن هنگام اسکرول کردن
- تنظیم ارتفاع نوار نوتیفیکیشن
- تنظیم نمایش نوار بعد از چند ثانیه
- نمایش یک دکمه برای بستن نوار نوتیفیکیشن
- سفارش سازی رنگ دکمه و نوار نوتیفیکیشن
- نمایش دکمه باز کردن مجدد نوار نوتیفیکیشن
- نوار در کدام صفحات یا نوشته ها نمایش داده شود
- تعیین کردن نوار نوتیفیکیشن برای چه دسته ای از کاربران نمایش داده شود
- تنظیم تاریخ و زمان شروع و پایان نمایش نوار نوتیفیکیشن
آموزش کار با افزونه WPFront Notification Bar
پس از نصب و فعال سازی افزونه wpfront notification bar ، آیکون افزونه در نوار منو ها ظاهر می شود که می توانید از منوی WPFront گزینه ی Notification Bar را انتخاب کنید. سپس وارد قسمت تنظیمات افزونه نوار اعلان وردپرس شوید. گزینه های متعددی مشاهده می شودند که در ادامه به توضیح هر کدام از آن ها می پردازیم.
تنظیمات بخش display
Enable: فعال و غیرفعال کردن نوار نوتیفیکیشن
Position: انتخاب موقعیت نوار که دارای دو گزینه بالا topو پایین buttom است
Fixed at position: اگر این گزینه فعال باشد نوار ثابت خواهد بود و با اسکرول نیز تغییر نکرده و قابل مشاهده است در غیر این صورت با اسکرول نوار از دید خارج می شود.
Display on scroll: با این گزینه مشخص می کنید که در ابتدا نوار مخفی و با اسکرول کردن نمایان شود
Scroll offset: با فعال شدن این گزینه در کادر موجود می توانید مشخص کنید که پس از اسکرول کردن چه تعداد پیکسل از نوار نوتیفیکیشن به نمایش درآید.
Bar height: ارتفاع نوار برحسب پیکسل مشخص می شود در صورتی که صفر باشد ارتفاع نوار با توجه به ابعاد محتوای وب سایت به صورت خودکار تنظیم خواهد شد
Position offset: تنظیم موقعیت نوار برحسب پیکسل.
Display after: در این قسمت مشخص می کنید که بعد از چند ثانیه نوار نشان داده شود اگر این گزینه فعال باشد گزینه ی display on scroll غیرفعال خواهد بود
Animation duration: در این قسمت مدت زمان اتفاق افتادن انیمیشن را انتخاب کنید منظور از انیمیشن همان حرکت ظاهر شدن نوار از بالا به پایین و یا پایین به بالا است و اگر می خواهید انیمیشن وجود نداشته باشد مقدار آن را روی صفر قرار دهید.
Display close button: در صورتی که این گزینه فعال باشد یک دکمه برای بستن نوار در گوشه ی بالا و سمت راست نوار نمایان می شود.
Auto close after: در این قسمت مشخص کنید بعد از چند ثانیه نوار نوتیفیکیشن بسته شود در صورتی که مقدار بر روی صفر باشد نوار به طور خودکار بسته نخواهد شد و اگر display on scroll فعال باشد این گزینه کار نخواهد کرد.
Display shadow: اگر این گزینه فعال باشد نوار نوتیفیکیشن سایه دار خواهد بود.
Display reopen button: با این گزینه چنانچه نوار بسته شود یک دکمه دیگر جهت باز کردن مجدد آن در نوار قرار داده میشود.
Keep closed :با این گزینه چنانچه نوار بسته شود در تمام صفحات نیز بسته خواهد بود.
Keep closed for: در اینجا مشخص می کنید در صورت بسته شدن نوار به مدت چند روز به صورت بسته باقی بماند.
تنظیمات قسمت content
Message text: متن نمایشی را وارد کنید توجه داشته باشید شما در این قسمت می توانید از تگ های html نیز استفاده کنید
Process shortcode: اگر از شورت کد استفاده کرده باشید با این گزینه می توانید آن را پردازش کنید
Display button: یک دکمه در کنار متن ورودی نشان داده می شود
Button text: متنی که دوست دارید بر روی دکمه نشان داده شود را وارد کنید
Button action: عملی که با کلیک بر روی دکمه می خواهید انجام شود را انتخاب کنید دارای دو گزینه است:
Open url: میتوانید آدرس url مورد نظر را وارد کنید تا با کلیک بر روی دکمه کاربر به این آدرس منتقل شود
Open url in new tab/ Window: با این گزینه آدرس مورد نظر در برگه و یا پنجره ی جدید نمایش داده خواهد شد
No follow link: لینک به صورت نوفالو با این گزینه قرار خواهد گرفت.
Execute javascript: در صورت انتخاب این گزینه با کلیک بر روی دکمه کد جاوا اسکریپت اجرا می شود که این کد ها را می توانید در کادر وارد کنید
Close bar on button click: با این گزینه در صورتی که بر روی دکمه کلیک شود نوار بسته می شود و سپس عملی که برای دکمه تعریف شده است اتفاق می افتد.
تنظیمات قسمت filter
Start date &time : تاریخ و زمان شروع نمایش نوتیفیکیشن را مشخص کنید
End date & time: تاریخ و زمان پایان نوار را مشخص کنید
Display on pages: مشخص کنید که نوار در چه صفحاتی نشان داده شوند که عبارتند از :
All pages: نمایش در تمام صفحات
Only in landing page: نمایش در صفحه فرود منظور همان صفحه نخست سایت است
Include in following pages: با این گزینه می توانید پست و صفحاتی که مایلید نوار در آنها نشان داده شود را انتخاب کنید.
Exclude in following pages: با این گزینه برگه ها و نوشته هایی که می خواهید نوار نوتیفیکیشن نشان داده نشود را از لیست انتخاب کنید.
Display for user roles: در این قسمت مشخص می کنید که نوار برای چه دسته ای از کاربران نمایش داده شود که دارای گزینه های زیر است:
All user: نمایش برای تمام کاربران
All logged in users: نمایش برای تمام کاربران وارد شده به سیستم
Guest users: نمایش برای کاربران مهمان
For following user roles: با این گزینه می توانید نقش کاربری هایی که مایلید نوار نوتیفیکیشن برای آنها نشان داده شود را از لیست انتخاب کنید.
تنظیمات قسمت color
Bar color: انتخاب رنگ نوار نوتیفیکیشن، برای ایجاد زیبایی می توانید دو رنگ متفاوت انتخاب کنید
Message text color: انتخاب رنگ نوشته شده روی نوار نوتیفیکیشن
Button color: انتخاب رنگ دکمه که می توان دو رنگ متفاوت را نیز انتخاب کرد
Button text color: انتخاب رنگ متن نوشته شده بر روی دکمه
Reopen button color: انتخاب رنگ مربوط به باز کردن مجدد نوار
Close button color: انتخاب رنگ دکمه مربوط به بستن نوار که رنگ اول از سمت چپ برای حالت عادی و رنگ دوم برای حالتی که ماوس روی آن دکمه قزل می گیرد و رنگ x مربوط به رنگ علامت دکمه است.
Custom css: در صورت دلخواه برای سفارش سازی بیشتر می توانید رنگ با استفاده از کد در این قسمت قرار دهید.
در انتها نیز تمام تغییرات را ذخیره کنید.
نتیجه گیری
امیدوارم که این آموزش افزونه WPFront Notification Bar هم مورد توجه و پسند شما قرار گرفته باشه و با استفاده از اون تونسته باشید تا نسبت به ساخت نوار اعلان در وردپرس با افزونه اعلان وردپرس اقدام کنید. اگر در رابطه با این آموزش سوال و یا مشکلی داشتید در بخش دیدگاه‌ها اعلام کنید تا در کوتاه‌ترین زمان ممکن پاسخگوی شما باشیم.
