كيفية إضافة WordPress انقر للاتصال زر على موقع الويب الخاص بك

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

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

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

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

هل يجب عليك استخدام Click to Call Plugin أو HTML؟

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

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

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

الطريقة 1: استخدم برنامج WordPress المجاني انقر للاتصال بزر الاتصال الإضافي

هناك العديد من الإضافات في WordPress انقر للاتصال ، لكننا سنعرض لك أدلة خطوة بخطوة لثلاثة منهم فقط:

• Really Simple Click To Call Bar - بدلاً من إضافة زر مستقل ، يضيف هذا المكون الإضافي شريطًا كاملاً إلى الجزء السفلي من شاشات زوار الجوال. إذا كنت تريد أن تجعل الأمر واضحًا / سهلًا على الأشخاص للاتصال بك ، فهذا خيار جيد.
• زر الاتصال الآن - بالإضافة إلى شريط كامل مثل المكون الإضافي أعلاه ، يتيح لك هذا المكون الإضافي أيضًا استخدام المزيد من زر الاتصال بنمط زر الإجراء العائم.
• Call Now Button Ultimate - يضيف هذا المكون الإضافي نفس المكالمة الآن الشريط السفلي. ولكن الشيء الفريد هو أنه يتيح لك تعيين "ساعات من العمل" عندما تكون متاحًا عبر الهاتف. خلال ساعات الراحة ، سيطلب الزر من الزائرين إرسال بريد إلكتروني بدلاً من الاتصال.

انقر ببساطة للاتصال شريط البرنامج التعليمي البرنامج المساعد

هذا البرنامج المساعد مجاني ومتاح على WordPress.org ، لذا يمكنك تثبيته مباشرة من لوحة تحكم WordPress بالانتقال إلى Plugins → Add New .

بمجرد تثبيت البرنامج المساعد وتنشيطه ، انتقل إلى الإعدادات → Really Simple Click to Call لتكوين المكون الإضافي. هناك يمكنك:

• تمكين وظيفة زر النقر للاتصال
• أضف عبارة CTA نصية بجوار زر الاتصال الخاص بك
• اختر رقم الهاتف الذي سيتصل به الزوار
• قم بتكوين الألوان المستخدمة عند النقر للاتصال

ثم احفظ التغييرات التي أجريتها لتفعيل الزر. سيظهر هذا الزر فقط لزوار الجوال ، لذلك لن تراه إذا كنت تتصفح من جهاز كمبيوتر سطح المكتب.

فيما يلي مثال على الشكل الذي قد يبدو عليه على الهاتف المحمول:

اتصل الآن زر البرنامج التعليمي البرنامج المساعد

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

مثل الآخرين ، تم إدراجه في WordPress.org ، مما يعني أنه يمكنك تثبيته بالانتقال إلى Plugins → Add New .

بمجرد تثبيت البرنامج المساعد وتنشيطه ، توجه إلى الإعدادات ← زر الاتصال الآن لتهيئة المكون الإضافي.

في الجزء العلوي ، يمكنك:

• قم بتمكين الزر
• أدخل رقم الهاتف الذي سيتصل به الزوار
• اختر نص الزر ( إذا رغبت في ذلك)

يمكنك أيضًا الكشف عن المزيد من الإعدادات بالنقر فوق ارتباط الإعدادات المتقدمة . سيتيح لك ذلك تغيير الموضع والألوان وإضافة تتبع النقرات والمزيد:

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

فيما يلي مثال من موقعنا على نهج زر الإجراء العائم:

اتصل الآن Button Ultimate Plugin Tutorial

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

مثل الآخرين ، يمكنك تثبيت وتفعيل هذا البرنامج المساعد المجاني بالانتقال إلى Plugins → Add New في لوحة معلومات WordPress الخاصة بك.

بمجرد القيام بذلك ، انتقل إلى منطقة Call Now Button Ultimate في لوحة معلومات WordPress الخاصة بك لإعداده.

في الجزء العلوي ، يمكنك تمكين المكون الإضافي وإدخال رقم هاتفك وعنوان بريدك الإلكتروني:

بعد ذلك ، أسفل الصفحة ، يمكنك إدخال ساعات العمل الخاصة بك وتهيئة نص الزر والألوان:

مثل المكونات الإضافية الأخرى ، لن يتم عرض زر الاتصال الآن إلا لزوار الجوال.

إليك ما سيبدو عليه الأمر خلال ساعات العمل:

وإليك ما يبدو خارج ساعات العمل:

الطريقة 2: WordPress انقر لاستدعاء زر HTML

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

لإنشاء مثل هذا الزر ، يمكنك فقط استخدام ارتباط تشعبي عادي ولف رقم هاتفك في مخطط tel :.

إليك ما يبدو عليه - تحتاج فقط إلى استبدال رقم الهاتف النموذجي برقمك الخاص وتحرير نص CTA حسب الحاجة:

<a href="tel:+1-123-456-7890">Call HeroThemes!</a>

هذا كل ما في الامر!

إذا أردت ، يمكنك استخدام CSS المخصص الخاص بك لإنشاء زر بدلاً من ارتباط تشعبي عادي.

على سبيل المثال ، يمكنك استخدام HTML هذا:

<a href="tel:+1-123-456-7890" class="call-button">Call HeroThemes!</a>

بعد ذلك ، يمكنك إضافة بعض CSS المخصص إلى موقع WordPress الخاص بك لتحويله إلى زر. فمثلا:

.call-button {
color: #fff !important;
background: #0ba9d5;
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
}

يمكنك إضافة CSS مخصص بأمان عبر أداة تخصيص WordPress أو مكون إضافي مجاني مثل Simple CSS.

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

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

@media only screen and (min-width: 600px) {
.call-button {
display: none;
}
}

ابدأ باستخدام WordPress الخاص بك انقر فوق زر الاتصال اليوم!

سواء كنت تستخدم مكونًا إضافيًا أو HTML مخصصًا خاصًا بك ، فمن السهل إنشاء زر للاتصال بنقرة واحدة على WordPress.

مع الزر الخاص بك في مكانه ، سيكون من الأسهل من أي وقت مضى على زوار الهاتف المحمول الاتصال بك.

فقط تذكر - المكالمات الهاتفية ثقيلة على الموارد البشرية.

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

تعرف على كيفية البدء باستخدام المكوّن الإضافي لقاعدة المعرفة البطولية أو سمة KnowAll أو المكوّن الإضافي Heroic FAQs.