صفحه اصلی / آموزش ایجاد پیام نیفیکیشن در وردپرس / ساخت نوار نوتیفیکیشن در وردپرس با افزونه WPFront Notification Bar

ساخت نوار نوتیفیکیشن در وردپرس با افزونه WPFront Notification Bar

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

ساخت نوار نوتیفیکیشن در وردپرس

ساخت نوار نوتیفیکیشن در وردپرس با افزونه WPFront Notification Bar

افزونه WPFront Notification Bar وردپرس

این افزونه وردپرس بیش از ۲۰٫۰۰۰ نصب فعال در مخزن وردپرس به ثبت رسانده است.

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

تنظیمات افزونه WPFront Notification Bar وردپرس

در اینجا به بررسی تنظیمات بخش Disply افزونه خواهیم پرداخت.

ساخت نوار نوتیفیکیشن در وردپرس با افزونه WPFront Notification Bar

Enable : فعال یا غیر فعال کردن نوار نوتیفیکیشن در این قسمت است
Position : انتخاب موقعیت نوار نوتیفیکیشن که می توانید Top یا Bottom را انتخاب کنید
Fixed at Position : در صورت فعال کردن این گزینه ، نوار نوتیفیکیشن در موقعیت خود ثابت خواهد ماند یعنی حتی با اسکرول کردن کاربر، قابل مشاهده خواهد بود. در غیر این صورت با اسکرول کردن، نوار از دید خارج می شود .
Display on Scroll : با فعال کردن این گزینه، می توانید تعیین کنید که ابتدا نوار نمایش داده نشود و پس از اسکرول کردن توسط کاربر، نوار نوتیفیکیشن نمایش داده شود
Scroll Offset : در صورت فعال کردن گزینه ی Display on Scroll، در این کادر می توانید تعیین کنید که پس از اسکرول کردن چه تعداد پیکسل، نوار نوتیفیکیشن به نمایش در بیاید
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 افزونه WPFront Notification Bar وردپرس میپردازیم :

ساخت نوار نوتیفیکیشن در وردپرس با افزونه WPFront Notification Bar

Message Text : در این قسمت می توانید متنی را که می خواهید نمایش داده شود، وارد کنید. اجازه ی استفاده از تگ های HTML در این قسمت داده شده است .
Process Shortcode : در صورت فعال کردن این گزینه، اگر در قسمت بالا از شورت کد استفاده کرده باشید، شورت کد موردنظر پردازش خواهد شد .
Display Button : در صورت فعال کردن این گزینه ، یک دکمه در کنار متن ورودی شما نمایش داده خواهد شد .
Button Text : در این قسمت می توانید متنی را که دوست دارید روی دکمه نمایش داده شود، وارد کنید .
Button Action : در این قسمت می توانید عملی را که با کلیک کردن روی دکمه اتفاق می افتد، انتخاب کنید که دو گزینه زیر وجود دارند .
Open URL : می توانید آدرس URL مدنظر خود را در این قسمت وارد کنید که با کلیک کردن بر روی دکمه، کاربر به آدرس مورد نظر منتقل می شود .
Open URL in new tab/window : با فعال کردن این گزینه ، آدرس مورد نظر در برگه یا پنجره ی جدیدی نمایش داده خواهد شد .
No follow Link : با فعال کردن این گزینه، لینک به صورت nofollow قرار خواهد گرفت .
Execute JavaScript : در صورت انتخاب این گزینه، با کلیک بر روی دکمه، کد جاوا اسکریپت مدنظر شما اجرا خواهد شد که می توانید آن را در کادر موجود وارد کنید .
Close Bar on Button Click : در صورت فعال کردن این گزینه، با کلیک بر روی دکمه ابتدا نوار بسته می شود و سپس عملی که در بالا برای دکمه تعریف کرده اید، اتفاق می افتد .

در بخش بعدی به تنظیمات ایتم filter خواهیم پرداخت.

ساخت نوار نوتیفیکیشن در وردپرس با افزونه WPFront Notification Bar

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 Users : نمایش برای تمام کاربران
All logged in users : نمایش برای تمام کاربران وارد شده به سیستم
Guest users : نمایش برای کاربران مهمان
For Following user roles : در صورت انتخاب این گزینه می توانید نقش های کاربری را که مایل هستید نوار نوتیفیکیشن برای آن ها نمایش داده شود، از لیست موجود انتخاب کنید

بخش اخر که مربوط به تنظیمات color افزونه است…

ساخت نوار نوتیفیکیشن در وردپرس با افزونه WPFront Notification Bar

Bar Color : انتخاب رنگ نوار نوتیفیکیشن، برای ایجاد گرادیان رنگ و زیبایی بیش تر، می توانید دو رنگ متفاوت را انتخاب کنید .
Message Text Color : انتخاب رنگ متن نوشته شده روی نوار نوتیفیکیشن .
Button Color : انتخاب رنگ دکمه، برای ایجاد گرادیان رنگ و زیبایی بیش تر، می توانید دو رنگ متفاوت را انتخاب کنید .
Button Text Color : انتخاب رنگ متن نوشته شده بر روی دکمه .
Reopen Button Color : انتخاب رنگ دکمه ی مربوط به باز کردن مجدد نوار نوتیفیکیشن .
Close Button Color : انتخاب رنگ دکمه ی مربوط به بستن نوار نوتیفیکیشن که رنگ اول از سمت چپ برای حالت عادی، رنگ دوم برای حالتی که موس روی دکمه قرار می گیرد و رنگ سوم مربوط به رنگ علامت x داخل دکمه است .
Custom CSS : در صورت تمایل برای سفارشی سازی بیش تر می توانید در این قسمت کد Css دلخواه خود را، وارد کنید.

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

موفق و پاینده باشید…

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


منبع مطلب

این مطالب را نیز ببینید!

انتخاب خودکار تصویر شاخص | دکتر وردپرس

انتخاب خودکار تصویر شاخص | دکتر وردپرس

اکثر قالب هایی که امروزه مورد استفاده میشوند از تصویر شاخص پشتیبانی میکنند برای اینکه در …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *