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

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

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

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

ما هي جافا سكريبت؟

جافا سكريبت (JavaScript) هي لغة برمجة تعمل على متصفح المستخدم، وليس على السيرفر الخاص بك. تتيح هذه البرمجة من جانب العميل للمطورين إنجاز العديد من المهام الرائعة دون إبطاء الموقع الكتروني الخاص بك.

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

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

<script type="text/javascript"> 
// Some JavaScript code
</script>
 
<!-- Another Example: --!>  
<script type="text/javascript" src="/path/to/some-script.js"></script>

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

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

دعنا نتعمق!

الطريقة الأولى: اضافة جافا سكريبت في أي مكان على موقع ووردبريس الخاص بك باستخدام WPCode (سهل الاستخدام)

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

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

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

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

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

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

إذا كنت تبحث عن بديل جيد لـ WPCode، فاطلع على Ultimate Addons for Elementor، الذي يتكامل مع منشئ الصفحة Elementor الشهير.

هناك أيضًا بديل جيد لمستخدمي Beaver Builder يسمى Header Footer for Beaver Builder. وهو إضافة خفيفة الوزن ورائعة. إذا كنت ترغب في إكمال البرنامج التعليمي باستخدام WPCode، فتابع القراءة أدناه.

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

بعد التفعيل، انتقل إلى Code Snippets » Headers & Footer.

هنا، ستجد ثلاثة حقول منفصلة مسماة بـ ‘Header’، و’Body’، و’Footer’.

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

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

للقيام بذلك، انتقل إلى Code Snippets » + Add Snippet، ثم انقر فوق ‘Use Snippets’.

بعد ذلك، حدد “JavaScript Snippet” كنوع الكود من قائمة الخيارات التي تظهر على الشاشة.

ستظهر لك الأن صفحة “Create Custom Snippet” حيث يمكنك إضافة عنوان للكود الخاص بك. يمكنك استخدام أي شيء لمساعدتك على تذكر الغرض من الكود.

بعد ذلك، الصق الكود في مربع “Code Preview”.

بعد ذلك، مرر الشاشة حتى تجد قسم “Insertion”.

الآن، كل ما عليك فعله هو تحديد “Location” الكود من القائمة اليمني اختار “Page-Specific”. بعد ذلك ابحث عن “الصفحة، المنشور، نوع المنشور المخصص” واختر المكان الذي تريد ظهور الكود فيه في الصفحة أو المنشور.

إذا اخترت أن يدرج WPCode المقتطف قبل أو بعد فقرة، فستتمكن من اختيار الفقرة التي سيظهر قبلها أو بعدها في المنشور.

على سبيل المثال، إذا وضعتَ الرقم 1 في حقل “Insert Number”، فسيظهر المقتطف قبل أو بعد الفقرة الأولى. استخدم الرقم 2 للفقرة الثانية، وهكذا.

بعد ذلك، ما عليك سوى النقر على زر التبديل أعلى الشاشة للانتقال إلى “Active”، ثم انقر على زر “Save Snippet” بجواره.

هذا كل ما يتطلبه الأمر لجعل مقتطف الكود الخاص بك متاح على الموقع!

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

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

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

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

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

اضافة جافا سكريبت إلى منشور ووردبريس محدد باستخدام الكود

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

لنلقِ نظرة أولًا على مقتطف الكود التالي:

function wpb_hook_javascript() {
  if (is_single ('71')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'wpb_hook_javascript');

سيعمل الكود أعلاه فقط إذا كان معرف المنشور يطابق الرقم “71”. تأكد من استبدال الرقم “5” بمعرف منشورك.

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

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

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

انظر إلى المثال التالي:

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

سيشغل الكود أعلاه جافا سكريبت فقط إذا كان معرف الصفحة “71”. تأكد من استبدال “71” بمعرف صفحتك.

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

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

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

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

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

نصيحة إضافية: المزيد من أدلة المقتطفات المخصصة

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

إضافة أكورديون جيكوري الأسئلة الشائعة في ووردبريس

جيكوري (jQuery )، مكتبة جافا سكريبت سهلة الاستخدام، تضيف ميزات تفاعلية إلى موقعك.

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

ولكن هذا ليس كل شيء.

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

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

تضمين كود iFrame في ووردبريس

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

يمكن أن يؤدي استخدام iFrame أيضًا إلى تعزيز سرعة موقعك وأدائه لأنه يسحب المحتوى من مصدر خارجي.

للمزيد من المعلومات، يمكنك الاطلاع على دليلنا حول كيفية تضمين كود الإطار المضمن بسهولة في ووردبريس.

إنشاء موجز RSS منفصل لكل نوع منشور مخصص في ووردبريس

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

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

لمزيد من المعلومات، يمكنك قراءة دليلنا حول كيفية إنشاء موجز RSS منفصل لكل نوع منشور مخصص في ووردبريس.

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

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