كيفية إنشاء شريط تنبيه في ووردبريس (طريقتان سهلتان)

هل تريد إضافة شريط تنبيه إلى موقع ووردبريس الخاص بك؟

يعد شريط التنبيه أو شريط التنبيهات طريقة رائعة لإعلام الزائرين بالتحديثات المهمة والعروض الخاصة وإطلاق المنتجات الجديدة والمزيد.

في هذه المقالة ، سنوضح لك كيفية إنشاء شريط تنبيه في ووردبريس بحلين سهلين.

إنشاء شريط تنبيه لموقع ووردبريس الخاص بك

لماذا إنشاء شريط تنبيه في ووردبريس؟

يعد شريط التنبيه طريقة رائعة لإعلام الزائرين بأي شيء مهم. قد يكون ذلك حدث مبيعات مستمرًا أو تحديثًا حول مواعيد العمل أو تغييرات في خدماتك.

يمكنك أيضًا استخدام شريط تنبيه لإخبار الزائرين بصفقة خاصة ، مثل عرض اشترِ واحد واحصل على الآخر مجانًا . يعد هذا خيارًا رائعًا إذا كنت تدير متجرًا عبر الإنترنت .

يعد استخدام شريط التنبيه أفضل من مجرد وضع إعلان على صفحتك الرئيسية . يمكن أن يظهر شريط التنبيه الخاص بك بشكل بارز في الجزء العلوي من كل صفحة عبر الموقع بالكامل.

من السهل إنشاء شريط تنبيه في ووردبريس. سنغطي أفضل مكون إضافي لشريط الإشعارات وطريقة يدوية باستخدام كود HTML و CSS. ما عليك سوى النقر فوق الروابط أدناه للانتقال مباشرةً إلى كل خيار:

الطريقة الأولى: OptinMonster

الطريقة الثانية : تخصيص HTML و CSS

الطريقة الأولى: إنشاء شريط تنبيه باستخدام OptinMonster

OptinMonster هو أفضل برنامج تحسين تحويل في السوق. يساعدك على تحويل المزيد من زوار الموقع إلى مشتركين وعملاء.

يأتي مع النوافذ المنبثقة الجميلة ، وحصائر الترحيب ، وأجهزة ضبط الوقت للعد التنازلي ، والتراكبات الديناميكية الأخرى التي تساعدك على زيادة عدد المشتركين والمبيعات لموقعك على الويب.

يمكنك أيضًا استخدام OptinMonster لإنشاء شريط تنبيه لموقع الويب الخاص بك. هذا هو الشيء الذي سننشئه:

تم إنشاء شريط التنبيه في OptinMonster

هناك الكثير من القوالب المعدة مسبقًا داخل OptinMonster. هذا يجعل من السهل حقًا إنشاء شريط تنبيه يبدو رائعًا في غضون دقائق.

أولاً ، تحتاج إلى زيارة موقع OptinMonster والتسجيل للحصول على حساب.

بعد ذلك ، تحتاج إلى تثبيت وتفعيل المكون الإضافي OptinMonster ووردبريس . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .

يتيح لك هذا المكون الإضافي توصيل موقع ووردبريس الخاص بك ببرنامج OptinMonster.

عند التنشيط ، ستحتاج الآن إلى ربط حسابك. للبدء ، انتقل ببساطة إلى OptinMonster »الإعدادات من لوحة معلومات ووردبريس الخاصة بك.

بعد ذلك ، انطلق وانقر على الزر “ربط حساب موجود”.

قم بتوصيل حساب OptinMonster الخاص بك

سترى الآن نافذة منبثقة تطلب منك إدخال عنوان بريدك الإلكتروني. ما عليك سوى تحديد عنوان بريدك الإلكتروني والنقر فوق الزر “الاتصال بـ ووردبريس”.

انقر فوق الزر Connect to ووردبريس

يمكنك الآن اتباع التعليمات التي تظهر على الشاشة لتوصيل حساب OptinMonster الخاص بك.

بعد توصيل OptinMonster ، ما عليك سوى الانتقال إلى OptinMonster »الحملات في لوحة معلومات ووردبريس الخاصة بك. انطلق وانقر على زر “إنشاء حملتك الأولى”.

أنشئ حملة جديدة

من هنا ، تحتاج إلى تحديد “الشريط العائم” كنوع حملتك لإنشاء شريط تنبيه.

حدد نوع حملة الشريط العائم

بعد ذلك ، سترى مجموعة مختارة من قوالب الحملة. ما عليك سوى اختيار النموذج الذي تريد استخدامه. تحتاج فقط إلى وضع مؤشر الفأرة فوقه والنقر فوق الزر “استخدام النموذج” لتحديده.

سنستخدم نموذج “العرض الترويجي” لشريط التنبيه الخاص بنا.

اختر سمة لشريط التنبيه الخاص بك

بعد ذلك ، سيُطلب منك تسمية القالب الخاص بك. بمجرد تسمية حملتك ، انقر فوق الزر “بدء البناء”.

أدخل اسمًا لحملتك

الآن ، سترى محرر الحملة. هذا هو المكان الذي يمكنك فيه تصميم حملتك.

سترى أن شريط التنبيه الخاص بك يظهر في الجزء السفلي من الشاشة بشكل افتراضي. لنقله إلى أعلى الشاشة ، انقر فوق “الإعدادات العائمة” على الجانب الأيسر.

تغيير الإعدادات العائمة لشريط التنبيه الخاص بك

بعد ذلك ، ما عليك سوى النقر فوق شريط التمرير لتحريك الشريط العائم إلى أعلى الصفحة.

تم وضع الشريط العائم الآن في أعلى الصفحة

لتغيير النص الموجود على الشريط العائم ، ما عليك سوى النقر فوق المنطقة التي تريد تغييرها واكتب أي نص تريده.

قم بتحرير نص شريط التنبيه الخاص بك

يمكنك أيضًا تغيير الخط وحجم النص ولونه والمزيد.

لتغيير مؤقت العد التنازلي ، ما عليك سوى تحديد المؤقت في القالب ثم النقر فوق علامة التبويب العد التنازلي من القائمة اليسرى. ثم انطلق وأدخل تاريخ ووقت الانتهاء المطلوبين.

تحرير عداد العد التنازلي لشريط التنبيه الخاص بك

يمكنك أيضًا ضبط المؤقت ليكون بمثابة عد تنازلي دائم الخضرة بدلاً من العد التنازلي الثابت ، إذا كنت تفضل ذلك. يتم تعيين عد تنازلي دائم الخضرة بشكل منفصل لكل زائر لموقعك.

انطلق وقم بإجراء العديد من التغييرات على شريط التنبيه كما تريد. بمجرد أن تشعر بالرضا عن ذلك ، لا تنس النقر فوق الزر حفظ في الجزء العلوي من شاشتك.

حفظ حملة OptinMonster الخاصة بك

بعد ذلك ، تحتاج إلى الانتقال إلى علامة التبويب “عرض القواعد” لتحديد وقت ومكان عرض شريط التنبيه على موقعك. القاعدة الافتراضية هي أن يتم عرض شريط التنبيه الخاص بك بعد مرور الزائر على الصفحة لمدة 5 ثوانٍ.

سنقوم بتغيير هذا إلى 0 ثانية ، لذلك يظهر شريط التنبيه على الفور. للقيام بذلك ، ما عليك سوى تغيير العد التنازلي “ثانية” إلى 0.

تغيير قاعدة العرض لشريط التنبيه الخاص بك

ثم انقر فوق الزر “الخطوة التالية” لتغيير إعدادات الإجراء. يمكنك ترك إعدادات “إظهار عرض الحملة” على Optin وتحديد ما إذا كنت ترغب في تشغيل مؤثر صوتي عند ظهور شريط التنبيه.

تغيير إعدادات عمل شريط التنبيه الخاص بك

بعد إجراء التغييرات ، امض قدمًا وانقر فوق الزر “الخطوة التالية” مرة أخرى ، وسترى ملخصًا.

ملخص لقواعد العرض

بمجرد أن تشعر بالرضا ، ما عليك سوى النقر فوق الزر “حفظ” في الجزء العلوي من الشاشة.

بعد ذلك ، يمكنك الانتقال إلى علامة التبويب “نشر” في الأعلى وتغيير حالة النشر إلى “نشر”.

قم بتغيير حالة النشر

الخطوة الأخيرة هي تنشيط الحملة على موقع الويب الخاص بك نفسه.

للقيام بذلك ، يمكنك إغلاق محرر الحملة ثم الانتقال إلى OptinMonster »الحملات . سترى حملتك مدرجة هنا ، وستكون حالتها معلقة.

انطلق وانقر على “حالة الانتظار” لتغييرها إلى “نشر” من القائمة المنسدلة.

تغيير حالة الحملة من معلق إلى نشر

الآن ، ما عليك سوى زيارة أي صفحة على موقع الويب الخاص بك ، وسترى حملتك قيد التنفيذ.

تم إنشاء شريط التنبيه في OptinMonster

الطريقة الثانية: إنشاء شريط تنبيه يدويًا باستخدام HTML / CSS مخصص

ماذا لو كنت لا تريد استخدام OptinMonster؟ في هذه الطريقة ، سنوضح لك كيفية إنشاء شريط إعلام باستخدام كود HTML و CSS .

ملاحظة: لا نوصي بهذه الطريقة للمبتدئين. إذا كنت جديدًا على ووردبريس أو لا تشعر بالثقة في إضافة رمز إلى موقعك ، فنحن نقترح استخدام الطريقة أعلاه بدلاً من ذلك.

أولاً ، ستحتاج إلى نسخ ولصق بعض أكواد CSS المخصصة لشريط التنبيه. ما عليك سوى الانتقال إلى المظهر » صفحة المُخصص في لوحة المعلومات الخاصة بك ، ثم انقر فوق علامة التبويب” CSS إضافية “في الجزء السفلي.

إدخال CSS إضافي في أداة تخصيص السمات

الآن ، انسخ والصق كود CSS هذا في هذا المربع:

.alertbar { 
    background-color: #ff0000; 
    color: #FFFFFF; 
    display: block; 
    line-height: 45px;
    height: 50px; 
    position: relative; 
    text-align: center; 
    text-decoration: none; 
    top: 0px; 
    width: 100%;
    z-index: 100;
}

بعد نسخ هذا الرمز ، يجب أن يبدو هكذا. ما عليك سوى النقر فوق الزر “نشر” أعلى الصفحة لحفظ كود CSS الخاص بك.

CSS الإضافي كما هو معروض في أداة تخصيص السمات

بعد ذلك ، تحتاج إلى إضافة رمز HTML لنص شريط التنبيه إلى موقعك.

أفضل طريقة للقيام بذلك هي تثبيت وتفعيل المكون الإضافي المجاني Insert Headers and Footers .

ملاحظة: إدراج الرؤوس والتذييلات هو أحد المكونات الإضافية الخاصة بـ WPBeginner. لقد قمنا بإنشائه لتسهيل إضافة البرامج النصية ورمز HTML والمزيد إلى صفحات موقع الويب الخاص بك.

بعد تنشيط المكون الإضافي ، انتقل إلى الإعدادات »إدراج الرؤوس والتذييلات في مسؤول ووردبريس الخاص بك. ما عليك سوى نسخ السطر التالي من تعليمات HTML البرمجية ولصقه في مربع “البرامج النصية في النص الأساسي”:

<div class="alertbar">We are currently closed due to Covid-19.</div>

إليك كيفية ظهور هذه الشفرة في مربع “نصوص برمجية في النص” الخاص بإدراج الرؤوس والتذييلات:

إضافة كود HTML باستخدام المكون الإضافي Insert Headers and Footers

بالطبع ، يمكنك تغيير نص التنبيه إلى أي شيء آخر تريده. لا تنس النقر فوق الزر “حفظ” أسفل الصفحة بمجرد الانتهاء.

الآن ، يمكنك زيارة موقعك لمشاهدة شريط التنبيه. يجب أن يظهر في أعلى كل صفحة ، على النحو التالي:

شريط التنبيه CSS موجود على الموقع

نصيحة: في بعض سمات ووردبريس ، قد يتداخل شريط التنبيه الخاص بك مع قائمتك. يمكنك تغيير ارتفاع الشريط إلى 40 بكسل أو 30 بكسل لتجنب ذلك. ستحتاج أيضًا إلى تقليل ارتفاع السطر وفقًا لذلك بحيث يظل نصك في المنتصف عموديًا في الشريط.

نأمل أن تساعدك هذه المقالة في تعلم كيفية إنشاء شريط تنبيه في ووردبريس. قد ترغب أيضًا في المقارنة بين أفضل أدوات إنشاء صفحات السحب والإفلات في ووردبريس لمساعدتك على تخصيص موقعك بشكل أكبر دون كتابة أي رمز ، وقائمة أفضل ملحقات WooCommerce لزيادة مبيعات متجرك.

خدمات مميزة لآجلك

نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.

اشترك معنا لمزيد من المعرفة

إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..