نحوه ایجاد نوار هشدار در وردپرس (3 راه آسان)

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

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

در این مقاله ، ما به شما نحوه ایجاد یک نوار هشدار در وردپرس با 3 راه حل آسان نشان خواهیم داد.

Creating an alert bar for your WordPress site

چرا یک نوار هشدار در وردپرس ایجاد کنید؟ h4>

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

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

استفاده از نوار هشدار بهتر از قرار دادن اطلاعیه در صفحه اصلی . نوار هشدار شما می تواند کاملاً در بالای هر صفحه در کل سایت شما ظاهر شود.

ایجاد نوار هشدار در وردپرس آسان است. ما دو بهترین به علاوه یک روش دستی با استفاده از کد HTML و CSS. برای رفتن مستقیم به هر گزینه ، کافی است روی پیوندهای زیر کلیک کنید:

روش 1: ایجاد نوار هشدار با استفاده از OptinMonster

OptinMonster بهترین نرم افزار بهینه سازی تبدیل در بازار است. به شما کمک می کند بازدیدکنندگان وب سایت بیشتری را به مشترکان و مشتریان تبدیل کنید.

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

همچنین می توانید از OptinMonster برای ایجاد یک نوار هشدار برای وب سایت خود استفاده کنید. این موردی است که ما می خواهیم ایجاد کنیم:

Alert bar created in OptinMonster

تعداد زیادی الگو از پیش ساخته شده در داخل OptinMonster وجود دارد. این کار ایجاد یک نوار هشدار را که در عرض چند دقیقه عالی به نظر می رسد بسیار آسان می کند.

ابتدا باید از وب سایت OptinMonster بازدید کرده و وارد سیستم شوید برای یک حساب

در مرحله بعدی ، شما باید OptinMonster را نصب و فعال کنید افزونه وردپرس . برای جزئیات بیشتر ، به راهنمای گام به گام ما در نحوه نصب افزونه وردپرس .

این افزونه سایت وردپرس شما را به برنامه OptinMonster متصل می کند.

پس از فعال سازی ، باید کلید مجوز خود را وارد کنید. این را می توانید در قسمت حساب خود در وب سایت OptinMonster پیدا کنید.

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

Connect your WordPress site to your OptinMonster account

پس از اتصال OptinMonster ، به سادگی به OptinMonster »کمپین ها در داشبورد وردپرس خود بروید. پیش بروید و روی دکمه “ایجاد کمپین جدید” کلیک کنید:

Create a new campaign in OptinMonster

شما به ابزار ایجاد کمپین OptinMonster هدایت خواهید شد. از اینجا ، باید “نوار شناور” را به عنوان نوع کمپین خود انتخاب کنید.

Pick the Floating Bar campaign type for your alert bar

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

ما می خواهیم از الگوی “تبلیغ” برای نوار هشدار خود استفاده کنیم:

Using the promo template for the alert bar

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

Name your OptinMonster campaign

پس از نامگذاری کمپین خود ، روی دکمه “شروع ساخت” کلیک کنید.

اکنون ویرایشگر کمپین را مشاهده خواهید کرد. اینجاست که می توانید کمپین خود را طراحی کنید.

خواهید دید که نوار هشدار شما به طور پیش فرض در پایین صفحه نمایش شما ظاهر می شود. برای انتقال آن به بالای صفحه ، روی «تنظیمات شناور» در سمت چپ کلیک کنید.

Changing the floating settings for your alert bar

بعد ، فقط روی نوار لغزنده کلیک کنید تا نوار شناور را به بالای صفحه منتقل کنید:

The floating bar is now positioned at the top of the page

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

Editing the text for your alert bar

همچنین می توانید قلم ، اندازه و رنگ متن و موارد دیگر را تغییر دهید.

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

Editing the countdown timer for your alert bar

همچنین می توانید تایمر را طوری تنظیم کنید که به عنوان

بعد ، باید به برگه “Display Rules” بروید تا انتخاب کنید چه زمانی و در چه نوار هشدار شما در سایت شما نمایش داده می شود. قانون پیش فرض این است که نوار هشدار شما بعد از 5 بازدید کننده در صفحه در صفحه نمایش داده شود.

ما می خواهیم این را به 0 ثانیه تغییر دهیم ، بنابراین نوار هشدار فوراً ظاهر می شود. فقط شمارش معکوس “ثانیه” را به 0 تغییر دهید:

Changing the display rule for your alert bar

سپس ، روی دکمه “مرحله بعدی” کلیک کنید و عملکرد را به عنوان “نمایش نمای کمپین: Optin” در صفحه بعدی بگذارید. یک بار دیگر روی “مرحله بعدی” کلیک کنید و خلاصه ای را خواهید دید.

Summary of the display rules for your alert bar

پس از خوشحال شدن ، به سادگی بر روی دکمه “ذخیره” در بالای صفحه کلیک کنید ، سپس روی برگه “انتشار” کلیک کنید. روی نوار لغزنده “وضعیت” کلیک کنید تا روی Active تنظیم شود.

Switching on your alert bar in the OptinMonster interface

مرحله آخر فعال کردن کمپین در وب سایت خود است. بر روی برگه OptinMonster در داشبورد وردپرس خود کلیک کنید ، سپس بر روی دکمه “تازه سازی مبارزات” کلیک کنید

Click the button to refresh your OptinMonster campaigns

سپس کمپین خود را در اینجا لیست می کنید.

Your OptinMonster campaign should be listed in your WordPress dashboard

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

Alert bar created in OptinMonster

روش 2: ایجاد نوار هشدار با استفاده از SeedProd

روش دیگر ایجاد نوار هشدار ، استفاده از افزونه وردپرس SeedProd است. SeedProd بیشتر به دلیل “بزودی” و حالت تعمیر و نگهداری برای وردپرس قرار دهیم.

SeedProd همچنین دارای یک پلاگین Notification Bar است که می توانید هنگام ثبت نام در هر بسته پولی ، آن را دریافت کنید.

ابتدا باید از وب سایت SeedProd دیدن کرده و امضا کنید برای یک حساب بعد ، به صفحه «بارگیری ها» در حساب خود بروید و افزونه Notification Bar Pro را بارگیری کنید:

Downloading Notification Bar Pro from SeedProd

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

پس از نصب ، صفحه ای را مشاهده خواهید کرد که باید کلید مجوز خود را وارد کنید. این را می توانید در حساب SeedProd خود پیدا کنید.

Entering your license key for Notification Bar Pro

بعد ، به تنظیمات »نوار اعلان طرفدار بروید و در آنجا شروع به ایجاد نوار اعلان خود می کنید. کافی است نامی برای آن وارد کنید و روی دکمه “ایجاد نوار” کلیک کنید.

Creating a notification bar in SeedProd

اکنون ویرایشگر نوار اعلان SeedProd را مشاهده خواهید کرد. برای شروع ، نوار اعلان به عنوان یک نوار نارنجی در بالای صفحه نشان داده می شود:

The editing interface for your notification bar

برای افزودن متن به نوار اعلان ، روی برگه “Call to Action Message and Button” در سمت چپ کلیک کنید. به سادگی متنی را که می خواهید استفاده کنید وارد کنید. اگر می خواهید دکمه تماس با عمل را اضافه کنید ، می توانید متن و پیوند دکمه را وارد کنید:

Editing the text for your notification bar

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

در اینجا می توانید هر نوع قلم و اندازه دلخواه خود را برای متن خود نوار و متن دکمه تنظیم کنید.

Changing the typography settings for your notification bar

در صورت تمایل ، می توانید رنگ نوار و دکمه خود را در برگه “رنگها” تغییر دهید.

حتی می توانید عناصر دیگری را به نوار اعلانات خود اضافه کنید ، مانند ایمیل optin ، تایمر شمارش معکوس ، دکمه تماس را کلیک کنید ، و حتی پیوندهای خود را نمایه های اجتماعی.

وقتی از نوار اعلان خود راضی هستید ، روی برگه “Enable / Disable Bar” کلیک کنید سپس به گزینه “Enable Bar” بروید. در آخر ، روی دکمه “ذخیره” در بالای صفحه کلیک کنید.

Enable your notification bar to put it live
نوار اعلانات شما اکنون در سایت شما ظاهر می شود :

The notification bar displaying live on our website

روش 3: ایجاد دستی نوار هشدار با استفاده از HTML / CSS سفارشی h4>

اگر نمی خواهید از OptinMonster یا Notification Bar Pro استفاده کنید ، چه می کنید؟ در این روش ، ما به شما نحوه ایجاد نوار اعلان با استفاده از HTML و CSS کد.

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

ابتدا باید برخی از موارد CSS سفارشی کد برای نوار هشدار. کافی است در داشبورد خود به صفحه Appearance »Customizer بروید ، سپس روی برگه« CSS اضافی »در پایین کلیک کنید.

Entering additional CSS in the theme customizer

اکنون ادامه دهید و این کد CSS را کپی کرده و در آن جعبه جای گذاری کنید:

.alertbar {
    background-color: # ff0000؛
    رنگ: #FFFFFF؛
    نمایش: بلوک؛
    ارتفاع خط: 45 پیکسل
    ارتفاع: 50 پیکسل؛
    موقعیت: نسبی؛
    text-align: مرکز؛
    دکوراسیون متن: هیچ؛
    بالا: 0px؛
    عرض: 100٪
    z-index: 100؛
}

بعد از اینکه آن کد را کپی کردید ، باید به این شکل باشد. برای ذخیره کد CSS خود کافیست روی دکمه انتشار در بالای صفحه کلیک کنید.

The additional CSS as displayed in the theme customizer

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

بهترین راه برای این کار نصب و فعال کردن درج Headers and Footers plugin .

توجه: Insert Headers and Footers یکی از افزونه های WPBeginner است. ما آن را ایجاد کردیم تا افزودن اسکریپت ، کد HTML و موارد دیگر به صفحات وب سایت شما واقعاً آسان باشد.

پس از فعال سازی افزونه ، به تنظیمات »درج سرصفحه ها و پاورقی ها در سرپرست وردپرس خود بروید. فقط کافی است خط زیر کد HTML را در کادر Scripts in Body ’کپی و جایگذاری کنید:

 
ما در حال حاضر به دلیل Covid-19 بسته شده ایم.

نحوه مشاهده این کد در کادر "Scripts in Body" درج سرصفحه ها و پاورقی ها به شرح زیر است:

Adding the HTML code using the Insert Headers and Footers plugin

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

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

The CSS alert bar live on the website

نکته: در چند مورد " را انتخاب کنید ، نوار هشدار شما ممکن است با فهرست شما تداخل داشته باشد. برای جلوگیری از این امر می توانید ارتفاع میله را به 40px یا 30px تغییر دهید. همچنین باید متناسب با آن ارتفاع خط را کاهش دهید تا متن شما به صورت عمودی در نوار قرار بگیرد.

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

اگر این مقاله را دوست داشتید ، لطفاً مشترک شوید کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-create-an-alert-bar-in-wordpress/.

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


Fatal error: Uncaught wfWAFStorageFileException: Unable to save temporary file for atomic writing. in /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php:35 Stack trace: #0 /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php(659): wfWAFStorageFile::atomicFilePutContents('/home/wekjriusd...', '<?php exit('Acc...') #1 [internal function]: wfWAFStorageFile->saveConfig('livewaf') #2 {main} thrown in /home/wekjriusd1/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php on line 35