كيفية جعل أرقام الهواتف قابلة للنقر على الموقع الإلكتروني

Social media

أهمية روابط الهاتف في العصر المتنقل

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

1 إنشاء روابط الهاتف بشكل صحيح

التعرف التلقائي على الهواتف

عادةً ما تقوم الهواتف المحمولة تلقائيًا بالتعرف على أرقام الهواتف وتحويلها إلى روابط قابلة للنقر.

قبل التحويل:

<div class="phone">+7 (495) 123-45-67</div>
        

بعد التحويل:

<div class="phone"><a href="tel:+74951234567">+7 (495) 123-45-67</a></div>
        

تنسيق روابط الهاتف

لضمان ظهور الروابط بشكل متناسق، يمكنك استخدام أحد الخيارين التاليين:

1 تنسيق العنصر والرابط معًا

.phone {
    color: #000;
    font-size: 16px;
    font-weight: 900;
}
.phone a {
    color: #000;
    font-size: 16px;
    font-weight: 900;
}
        

2 تنسيق جميع روابط الهاتف

a[href^="tel:"] {
    color: #000;
    font-size: 16px;
    font-weight: 900;
}
        

2 تعطيل التعرف التلقائي على الهواتف

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

<meta name="format-detection" content="telephone=no">
        

3 مشاكل شائعة في روابط الهاتف

لاحظت وجود مشكلة في بعض أجهزة Android حيث لا تعمل روابط الهاتف عند تضمين تنسيق الرقم (مثل الأقواس أو المسافات):

<a href="tel:+74951234567">+7 (495) 123-45-67</a>


<a href="tel:+7 (495) 123-45-67">+7 (495) 123-45-67</a>
        

4 أتمتة تحويل أرقام الهواتف إلى روابط

إذا كان لديك العديد من أرقام الهواتف في موقعك، يمكنك أتمتة العملية باستخدام PHP والتعابير النمطية:

الطريقة الأساسية

function replace_phone_call($matches){
    $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]);
    $tel = str_replace('+7', '8', $tel);
    return '<a href="tel:' . $tel . '">' . $matches[0] . '</a>';
}

function replace_phone($text){
    return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]{9,}\d/', 'replace_phone_call', $text);
}

$text = 'اتصل بنا على الرقم +7 (495) 123-45-67، أو 88001234567';
echo replace_phone($text);
        

النتيجة:

اتصل بنا على الرقم <a href="tel:84951234567">+7 (495) 123-45-67</a>، أو <a href="tel:88001234567">88001234567</a>
        

التمييز بين الأجهزة المحمولة والمكتبية

يمكنك استخدام مكتبة Mobile_Detect لتطبيق روابط الهاتف فقط على الأجهزة المحمولة:

require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet());

function replace_phone_call($matches){
    $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]);
    $tel = str_replace('+7', '8', $tel);
    return '<a href="tel:' . $tel . '">' . $matches[0] . '</a>';
}

function replace_phone($text){
    if (IS_MOBILE) {
        return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]{9,}\d/', 'replace_phone_call', $text);
    } else {
        return $text;
    }
}

$text = 'اتصل بنا على الرقم +7 (495) 123-45-67، أو 88001234567';
echo replace_phone($text);
        

عرض نموذج الاتصال على الأجهزة المكتبية

بدلاً من عرض روابط الهاتف على الأجهزة المكتبية، يمكنك عرض رابط لنموذج طلب اتصال:

require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
define('IS_MOBILE', $detect->isMobile() && !$detect->isTablet());

function replace_phone_call($matches){
    if (IS_MOBILE) {
        $tel = str_replace(array('-', ' ', '(' , ')'), '', $matches[0]);
        $tel = str_replace('+7', '8', $tel);
        return '<a href="tel:' . $tel . '">' . $matches[0] . '</a>';
    } else {
        return '<a class="modal" href="/callback">' . $matches[0] . '</a>';
    }
}

function replace_phone($text){
    return preg_replace_callback('/(?:\+|\d)[\d\-\(\) ]{9,}\d/', 'replace_phone_call', $text);
}

$text = 'اتصل بنا على الرقم +7 (495) 123-45-67، أو 88001234567';
echo replace_phone($text);
        

النتيجة على الأجهزة المكتبية:

اتصل بنا على الرقم <a class="modal" href="/callback">+7 (495) 123-45-67</a>، أو <a class="modal" href="/callback">88001234567</a>
        

النتيجة على الأجهزة المحمولة:

اتصل بنا على الرقم <a href="tel:84951234567">+7 (495) 123-45-67</a>، أو <a href="tel:88001234567">88001234567</a>
        

كيفية جعل أرقام الهواتف قابلة للنقر في بلوجر

الحل الأول: استخدام JavaScript فقط (الأسهل لبلوجر)

<b:if cond='data:blog.isMobileRequest'>
  <script>
  function makePhoneNumbersClickable() {
    const phoneElements = document.querySelectorAll('body');
    phoneElements.forEach(element => {
      const phoneRegex = /(\+?\d[\d\-\(\) ]{8,}\d)/g;
      
      element.innerHTML = element.innerHTML.replace(phoneRegex, function(match) {
        const cleanNumber = match.replace(/[^\d+]/g, '');
        return `<a href="tel:${cleanNumber}" style="color: inherit; text-decoration: none;">${match}</a>`;
      });
    });
  }

  window.addEventListener('DOMContentLoaded', makePhoneNumbersClickable);
  </script>
</b:if>

طريقة الإضافة:

1. انتقل إلى لوحة تحكم بلوجر → القالب → تحرير HTML
2. ابحث عن </body> وأضف الكود أعلاه قبله
3. احفظ التغييرات

الحل الثاني: باستخدام jQuery

<b:if cond='data:blog.isMobileRequest'>
  <script>
  $(document).ready(function() {
    $('body').html(function(i, html) {
      return html.replace(/(\+?\d[\d\-\(\) ]{8,}\d)/g, function(match) {
        const cleanNumber = match.replace(/[^\d+]/g, '');
        return '<a href="tel:' + cleanNumber + '">' + match + '</a>';
      });
    });
  });
  </script>
</b:if>

الحل الثالث: لمستخدمي بلوجر المتقدمين

<script>
function isMobileDevice() {
  return (typeof window.orientation !== "undefined") || 
         (navigator.userAgent.indexOf('IEMobile') !== -1) ||
         (window.innerWidth <= 768);
}

function processPhoneNumbers() {
  const phoneRegex = /(\+?\d[\d\-\(\) ]{8,}\d)/g;
  const isMobile = isMobileDevice();
  
  document.querySelectorAll('p, div, span').forEach(element => {
    element.innerHTML = element.innerHTML.replace(phoneRegex, function(match) {
      const cleanNumber = match.replace(/[^\d+]/g, '');
      
      if (isMobile) {
        return `<a href="tel:${cleanNumber}" class="clickable-phone">${match}</a>`;
      } else {
        return `<a href="javascript:void(0)" onclick="showCallbackForm('${cleanNumber}')" class="clickable-phone">${match}</a>`;
      }
    });
  });
}

function showCallbackForm(phoneNumber) {
  alert('سيتم الاتصال بالرقم: ' + phoneNumber);
}

window.addEventListener('DOMContentLoaded', processPhoneNumbers);
</script>

<style>
.clickable-phone {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.clickable-phone:hover {
  text-decoration: underline;
}
</style>

نصائح مهمة لبلوجر

لتحسين الأداء:

<b:if cond='data:blog.isMobileRequest'>
  <!-- الكود هنا -->
</b:if>

لحماية خصوصية الرقم:

function encodePhone(number) {
  return number.split('').map(c => '&#'+c.charCodeAt(0)+';').join('');
}

لتحسين SEO:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "telephone": "رقم الهاتف هنا"
}
</script>

النتيجة النهائية:

• على الجوال: سيظهر الرقم كرابط اتصال مباشر
• على الكمبيوتر: سيظهر كنافذة اتصال أو نموذج طلب اتصال

هذه الحلول تعمل دون الحاجة إلى PHP وتتكامل تمامًا مع منصة بلوجر.

خاتمة

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

كيف كان المقال؟