افزونه WPFront Notification Bar

By سمانه حسین زاده آموزش وردپرس, طراحی سایت

افزونه WPFront Notification Bar

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

برخی امکانات افزونه WPFront Notification Bar عبارت است از:

نمایش یک پیام با یک دکمه (اختیاری)
با کلیک بر روی دکمه، یک URL باز شده یا یک کد جاوااسکریپت اجرا می شود.
امکان قرار دادن نوار در بالا یا پایین صفحات
قابلیت چسبنده کردن نوار
امکان تنظیم بلندی نوار
امکان تنظیم ثانیه ها، قبل از ظاهر شدن نوار
نمایش دکمه بستن برای بازدید کننده
تنظیم تعداد ثانیه ها قبل از بسته شدن خودکار نوار
امکان سفارشی سازی رنگ ها
نمایش دکمه بازگشایی نوار
امکان انتخاب نوشته ها/برگه های مورد نظر خود برای نمایش نوار اعلان
امکان انتخاب نقشهای کاربر برای نمایش نوار

از سری مقاله های آموزش رایگان طراحی سایت امروز به آموزش افزونه WPFront Notification Bar می پردازیم.

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

افزونه WPFront Notification Bar را دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید.

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه در پیشخوان وردپرس به مسیر تنظیمات » Notification Bar بروید.

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

در بخش Display افزونه WPFront Notification Bar می توانید تنظیمات زیر را پیکربندی کنید.

Enabled: برای فعال کردن افزونه WPFront Notification Bar و ساخت نوار نوتیفیکیشن در وردپرس این گزینه را فعال کنید. این گزینه به شما امکان می دهد نوار موجود در وب سایت خود را بدون نیاز به فعال یا غیرفعال کردن افزونه، فعال یا غیرفعال کنید.
Position: موقعیت قرارگیری نوار در وب سایت شما را به صورت بالا / پایین مشخص می کند.
Fixed at Position: با فعال کردن این گزینه، نوار به صورت چسبنده همیشه در موقعیت خود قابل مشاهده خواهد بود و با اسکرول کردن کاربر همراه او پایین خواهد آمد.
Display on ScrollScroll: با فعال کردن این گزینه وقتی کاربر شروع به اسکرول کند، نوار نشان داده می شود.
Scroll Offset: در این قسمت می توانید تعداد پیکسل هایی که باید قبل از ظاهر شدن نوار، پیمایش شوند را مشخص کنید.
Bar Height: در این قسمت می توانید ارتفاع نوار را به پیکسل وارد کنید. اگر این مقدار را روی صفر تنظیم کنید، نوار به صورت خودکار با محتوای درون آن تنظیم می شود.
Position Offset: این گزینه به شما امکان می دهد یک افست در نوار از موقعیت پیش فرض آن تنظیم کنید. هنگامی که یک محتوای چسبنده / استاتیک دیگر با نوار همپوشانی دارد، این تنظیمات مفید است. مقدار این قسمت را برابر با ارتفاع محتوای چسبنده / استاتیک تنظیم کنید تا از همپوشانی جلوگیری کنید. توجه داشته باشید که این گزینه فقط در مورد نوار بالایی اعمال می شود.
Display After: در این قسمت می توانید مدت زمانی (به ثانیه) که طول می کشد تا نوار نوتیفیکیشن در صفحه ظاهر شود را مشخص کنید. تنظیم این مقدار روی صفر باعث می شود که نوار به محض بارگیری صفحه قابل مشاهده باشد. این گزینه هنگام تنظیم نمایش نوار روی اسکرول هیچ اهمیتی ندارد.
Animation Duration: مدت زمانی (به ثانیه) که طول می کشد تا افکت های انیمیشنی (slide up/slide down)، نوار را نمایش داده یا پنهان کنند. برای خاموش کردن انیمیشن، این گزینه را روی صفر تنظیم کنید.
Display Close Button: با فعال کردن این گزینه، افزونه WPFront Notification Bar دکمه ای به بازدید کننده نشان می دهد که با کلیک بر روی آن می تواند به راحتی نوار را ببندد.
Auto Close After: در این قسمت می توانید تعداد ثانیه هایی که نوار قبل از بسته شدن خودکار نمایش داده می شود را مشخص کنید. وارد کردن عدد صفر باعث می شود نوار بسته نشود. این گزینه هنگام تنظیم نمایش نوار همراه با اسکرول، در نظر گرفته نمی شود.
Display Shadow: فعال کردن این گزینه باعث می شود یک سایه برای نوار نشان داده شود.
Display Reopen Button: دکمه بازگشایی را هنگامی که نوار بسته می شود نشان می دهد و به کاربر این امکان را می دهد تا دوباره آن را باز کند.
Keep Closed: فعال کردن این گزینه باعث می شود پس از بسته شدن نوار ، در صفحات دیگر نیز بسته می شود.
Keep Closed For: پس از بسته شدن نوار، در این قسمت می توانید تعداد روزهایی که نوار بسته باقی بماند را مشخص کنید.

در بخش Content افزونه WPFront Notification Bar می توانید تنظیمات زیر را پیکربندی کنید:

Message Text: در این قسمت می توانید متنی که در نوار نمایش داده می شود را وارد کنید. می توانید از کدهای HTML نیز استفاده کنید.
Process Shortcode: فعال کردن این گزینه باعث می شود شورت کدها موجود در متن پیام پردازش شود.
Display Button: با فعال کردن این گزینه یک دکمه در کنار متن پیام نشان داده می شود.
Button Text: در این قسمت می توانید برای دکمه یک برچسب وارد کنید.
Button Action: افزونه WPFront Notification Bar به شما امکان می دهد عملی که بعد از کلیک بر روی دکمه اتفاق می افتد را مشخص کنید. شما می توانید یک URL را مشخص کنید که کاربر با کلیک بر روی دکمه، به آن ریدایرکت شود. با فعال کردن گزینه ” Open URL in new tab/window” ، آدرس url مورد نظر شما در یک تب/پنجره جدید باز می شود و با فعال کردن “No follow link” اتربیوت rel=”nofollow” برای سئو به آن اضافه می شود. همچنین می توانید یک کد جاوااسکریپت را وارد کنید تا پس از کلیک بر روی دکمه، اجرا شود.
Close Bar on Button Click: در صورت انتخاب این گزینه، با کلیک کردن بر روی دکمه، نوار بسته می شود.

در بخش Filter افزونه WPFront Notification Bar می توانید تنظیمات زیر را پیکربندی کنید:

Start Date & Time : در این قسمت می توانید تاریخی که در آن نوار نمایش داده می شود را مشخص کنید.
End Date & Time : در این قسمت می توانید تاریخی که در آن نمایش نوار به پایان می رسد را مشخص کنید.
Display on Pages: افزونه WPFront Notification Bar به شما امکان می دهد نوشته ها/برگه هایی که نوار در آنها نمایش داده می شود را فیلتر کنید. اگر گزینه “only in landing page” را انتخاب کنید، نوار فقط در همان صفحه ای که بازدیدکننده برای اولین بار از وب سایت شما بازدید می کند، نمایش داده می شود.
Display For User Roles: این گزینه به شما امکان می دهد نقش کاربرانی که نوار به آنها نمایش داده می شود را فیلتر کنید. اگر “Guest users” را انتخاب کنید، نوار فقط به کاربرانی که وارد سایت شما نشده اند نشان داده می شود. “[No Role]” وقتی به کار برده می شود که کاربر وارد سیستم شده است اما به هیچ نقش کاربری تعلق نمی گیرد. از گزینه ” Enable WP eMember integration ” استفاده کنید تا کاربران افزونه WP eMember به عنوان کاربران وارد شده در نظر گرفته شوند.

در بخش color افزونه WPFront Notification Bar می توانید تنظیمات رنگ را به صورت زیر پیکربندی کنید:

Bar Color: در این قسمت می توانید رنگ نوار را مشخص کنید. انتخاب دو رنگ باعث ایجاد gradient می شود.
Message Text Color: در این قسمت می توانید رنگ متن پیام را مشخص کنید.
Button Color: رنگ دکمه را می توانید از این قسمت انتخاب کنید.
Button Text Color: در این قسمت می توانید رنگ برچسب دکمه کنار تصویر را انتخاب کنید.
Reopen Button Color: رنگ دکمه ای که برای باز کردن مجدد نوار نشان داده می شود را از این قسمت انتخاب کنید.
Close Button Color: رنگ دکمه “بستن” در نوار را می توانید از این قسمت انتخاب کنید. اولین رنگ برای نمایش رنگ پس زمینه دکمه بستن استفاده می شود. رنگ دوم برای نمایش رنگ پس زمینه هنگام هاور ماوس کاربر استفاده می شود. از رنگ سوم برای تنظیم رنگ علامت “X” در دکمه بستن استفاده می شود.

در بخش CSS می توانید کد CSS سفارشی خود را وارد کنید:

Custom CSS: از این قسمت برای بازنویسی تنظیمات CSS نوار استفاده کنید. در زیر انتخابگرهای CSS که می توانید برای ویرایش هر عنصر استفاده کنید، آورده شده است.

/* برای ویرایش استایل نوار نوتیفیکیشن */ #wpfront-notification-bar { }

/* برای ویرایش استایل متن نوار */ #wpfront-notification-bar div.wpfront-message { }

/* برای ویرایش استایل دکمه */ #wpfront-notification-bar div.wpfront-button { }

/* برای ویرایش استایل دکمه بستن نوار */ #wpfront-notification-bar div.wpfront-close { }

/* برای ویرایش استایل دکمه بازگردانی بالایی نوار */ #wpfront-notification-bar-open-button.top { }

/* برای ویرایش استایل دکمه بازگردانی پایینی نوار */ #wpfront-notification-bar-open-button.bottom { }

در پایان روی دکمه “ذخیره تغییرات” کلیک کنید.

حال به فرانت اند سایت خود مراجعه کرده و نوار نوتیفیکیشن را مشاهده کنید.