in ,

كيفية إضافة جافا سكريبت بسهولة في صفحات ووردبريس أو المشاركات (3 طرق)

إضافة جافا سكريبت لصفحات الووردبريس

إضافة جافا سكريبت
إضافة جافا سكريبت

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

قد يبدو مقتطف شفرة جافا سكريبت النموذجي كما يلي:

 
 
// Some JavaScript code
 

 
<!-- مثال آخر : --!>  
 
/path/to/some-script.js

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

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

الطريقة 1. إضافة JavaScript على مستوى الموقع باستخدام Insert Headers and Footers

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

على سبيل المثال ، يجب أن يكون رمز تثبيت Google Analytics موجودًا في كل صفحة من صفحات موقعك على الويب ، حتى يمكنه تتبع زائري موقعك على الويب.

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

لهذا السبب ، نوصي باستخدام مكون إضافي لتحميل javascript على موقعك.

أولاً ، تحتاج إلى تثبيت وتفعيل المكون الإضافي “Insert Headers and Footers”. لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي. عند التنشيط ، تحتاج إلى زيارة الإعدادات »إدراج صفحة Insert Headers and Footers . سترى مربعين ، أحدهما للهيدر والآخر لقسم الفوتر. يمكنك الآن لصق شفرة JavaScript التي قمت بنسخها إلى أحد هذه المربعات ثم النقر فوق زر الحفظ.   سيتم تلقائيًا الآن تحميل الرمز الذي أضفته في كل صفحة من صفحات موقعك على الويب.

الطريقة الثانية: إضافة تعليمات JavaScript البرمجية يدوياً باستخدام الاكواد

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

أولاً ، دعنا نلقي نظرة على كيفية إضافة الشفرة إلى موقع ووردبريس. ستحتاج إلى إضافة الشفرة التالية إلى ملف functions.php في المظهر أو مكون إضافي خاص بالموقع.

function wpb_hook_javascript() {
    ?>
        
          // your javscript code goes
        
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

إضافة JavaScript إلى WordPress Post أو الصفحة باستخدام الاكواد

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

function wpb_hook_javascript() {
  if (is_single ('16')) { 
    ?>
        
          // your javscript code goes here
        
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

إذا ألقيت نظرة عن كثب على الكود أعلاه ، فسترى أننا قمنا بلف شفرة جافا سكريبت حول المنطق الشرطي لمطابقة مُعرّف منشور محدد. يمكنك استخدام هذا عن طريق استبدال 16 بمعرّف المشاركة الخاص بك.

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

function wpb_hook_javascript() {
  if (is_page ('10')) { 
    ?>
        
          // your javscript code goes here
        
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

بدلاً من is_single ، نحن الآن نستخدم is_page للتحقق من معرّف الصفحة.

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

function wpb_hook_javascript_footer() {
    ?>
        
          // your javscript code goes
        
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

بدلا من ربط الـfunction إلى wp_head ، لدينا الآن hooked إلى wp_footer. يمكنك أيضًا استخدامه مع العلامات الشرطية لإضافة جافا سكريبت إلى مشاركات أو صفحات محددة.

طريقة 3. إضافة كود جافا سكريبت داخل المشاركات أو الصفحات باستخدام الاضفات.

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

أولاً ، تحتاج إلى تثبيت وتفعيل المكوِّن الإضافي Code Embed. لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون WordPress الإضافي.

جافا سكريبت
جافا سكريبت

عند التنشيط ، يلزمك تعديل المشاركة أو الصفحة حيث تريد إضافة javascript. في صفحة تعديل المشاركة ، انقر على زر “خيارات الشاشة” وتحقق من خيار “الحقول المخصصة”.

سيظهر الآن اسم الحقل المخصص وحقول القيمة.

يلزمك تقديم اسم للحقل المخصص ببادئة CODE (على سبيل المثال ، CODEmyjscode) ثم لصق شفرة جافا سكريبت في حقل القيمة.

جافا سكريبت

لا تنس النقر على الزر “إضافة حقل مخصص” لحفظ حقلك المخصص.

يمكنك الآن استخدام هذا الحقل المخصص لتضمين شفرة جافا سكريبت في أي مكان في هذه المشاركة أو الصفحة. ما عليك سوى إضافة شفرة التضمين هذه في أي مكان في محتوى مشاركاتك.  الشورت كود {{CODEmyjscode}}

يمكنك الآن حفظ مشاركتك أو صفحتك وعرض موقعك. ستتمكن من رؤية كود javascript باستخدام أداة الفحص أو عن طريق عرض مصدر الصفحة.

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

نأمل أن تساعدك هذه المقالة على تعلم كيفية إضافة جافا سكريبت بسهولة في صفحات WordPress أو منشوراتها.

إذا كنت تحب هذه المقالة ، فالرجاء الاشتراك في قناتنا التعليمية على اليوتيوب . يمكنك أيضا أن تجدنا على Twitter و Facebook.

Veteran

الموضوع بواسطه محمد طمان

مرحباً انا محمد طمان مصرى اقيم بروسيا مهتم بتكنلوجيا المعلومات وهذا الموقع من احدى مواقعى على الانترنت اعمل حاليا فى تصميم الجرافيك و تصميم مواقع الوورد بريس بدات رحلتى فى عالم التكنلوجيا و الكمبيوتر منذ عام 1998 , عملت فى مجال الالكترونيات و صيانة اللاب توب و المازربورد لمدة 10 سنوات  إلي أن قررت تغيير مجال عملي عام 2017 عندما توجهت للاقامة بروسيا, أنشأت هذا الموقع لمُشاركة معرفتي وخبراتي التي إكتسبتها علي مدار الأعوام السابقة.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *