كيفية إضافة JavaScript إلى صفحات ومنشورات WordPress

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

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

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

هل يمكنك استخدام JavaScript في WordPress؟

JavaScript هي لغة برمجة يمكنك استخدامها لتحسين تجربة المستخدم (UX) لموقع الويب بجعله أكثر تفاعلية واستجابة.

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

يمكن لـ JavaScript إضافة آلات حاسبة ومشغلات فيديو وأدوات أخرى إلى صفحات ومشاركات WordPress. بينما ستحتاج إلى بعض المعرفة الأساسية بلغة HTML و CSS لإضافة JavaScript إلى WordPress ، فهي عملية مباشرة إلى حد ما.

ما يجب القيام به قبل إضافة كود JavaScript إلى WordPress

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

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

هناك جزءان من موقع WordPress الخاص بك تحتاج إلى نسخهما احتياطيًا قبل إضافة أي تخصيصات:

1. قاعدة البيانات : حيث يتم تخزين جميع منشوراتك وصفحاتك وإعداداتك وتكويناتك.
2. الملفات: الصور ومقاطع الفيديو والسمات والمكونات الإضافية.

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

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

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

كيفية إضافة JavaScript إلى موقع WordPress بالكامل

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

هناك طريقة أخرى تتمثل في إنشاء مكون إضافي لبرنامج WordPress يحتوي على كود JavaScript الخاص بك. يمكنك أيضًا ببساطة تحرير ملف jobs.php وإدخال الكود هناك.

بدلاً من ذلك ، لإجراء تغييرات عبر موقع WordPress بالكامل ، يمكنك إضافة JavaScript إلى الرأس أو التذييل. أسهل طريقة هي تثبيت وتنشيط المكون الإضافي Insert Headers and Footers. دعنا نستكشف جميع الطرق الأربعة بعمق.

أربع طرق لإضافة JavaScript مخصص إلى WordPress

هناك طرق مختلفة يمكنك من خلالها إضافة WordPress JavaScript مخصص إلى موقع الويب الخاص بك. إليك دليل خطوة بخطوة لكل منها:

الطريقة الأولى: استخدام البرنامج المساعد

أسهل طريقة لإضافة JavaScript إلى WordPress هي باستخدام مكون إضافي. هذه الطريقة أكثر مرونة وأسهل في الإدارة من إضافة الشفرة مباشرة إلى قالبك.

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

في هذا البرنامج التعليمي ، سنستخدم إدراج الرؤوس والتذييلات.

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

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

لنفترض أنك تريد إضافة مربع تأكيد JavaScript. في البرامج النصية في العنوان أدخل الكود التالي:

 <!DOCTYPE html> <html> <body> <h2>JavaScript Confirm Box</h2> <button>Try it</button> <p></p> <script> function myFunction() { var txt; if (confirm("Press a button!")) { txt = "You pressed OK!"; } else { txt = "You pressed Cancel!"; } document.getElementById("demo").innerHTML = txt; } </script> </body> </html>

سيعرض هذا الرمز زر جربه في الرأس. عند تحديد الزر ، سيؤكد أنك ضغطت عليه.

يمكنك اختبار هذه الميزة بالذهاب إلى موقع الويب الخاص بك والنقر فوق الزر جربه .

الطريقة الثانية: أضف JavaScript إلى المظهر الخاص بك

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

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

 ?php%20bloginfo('template_directory');%20?/custom.js

تذكر استبدال "custom.js" باسم ملفك. بمجرد إضافة هذا السطر من التعليمات البرمجية ، احفظ ملف header.php الخاص بك وقم بتحميله على الخادم الخاص بك. يجب أن تعمل شفرة JavaScript الآن على موقع WordPress بالكامل.

الطريقة الثالثة: استخدام وظائف WordPress والخطافات

يمكنك أيضًا إضافة رمز مخصص باستخدام وظائف WordPress والخطافات. الوظيفة هي جزء من التعليمات البرمجية التي تقوم بإجراء معين. على سبيل المثال ، يتم استخدام وظيفة wp_enqueue_script () لتحميل ملف JavaScript.

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

الإجراء هو وظيفة PHP يتم تشغيلها في نقاط محددة أثناء تحميل الصفحة. على سبيل المثال ، يتم تشغيل خطاف الإجراء wp_head قبل علامة </head> في ملف header.php الخاص بالسمة. يمكنك استخدام هذا الخطاف لإضافة كود مخصص أو نصوص برمجية إلى رأسك.

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

لإضافة JavaScript مخصص إلى موقع WordPress الخاص بك باستخدام الوظائف والخطافات ، ستحتاج إلى إدخال الكود الخاص بك في ملف jobs.php الخاص بالقالب الخاص بك.

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

 /* Theme Name: Twenty Twenty-Two Child Template: twentytwentytwo */

الآن بعد أن أنشأت السمة الخاصة بك ، يمكنك تنشيطها بالانتقال إلى المظهر ← محرر ملف السمة من لوحة معلومات WordPress الخاصة بك. انتقل إلى ملف functions.php ، ثم أضف الكود التالي:

 function ti_custom_javascript() { ?> <script> // your javascript code goes here </script> <?php } add_action('wp_head', 'ti_custom_javascript');

عند الانتهاء ، احفظ التغييرات.

الطريقة الرابعة: إنشاء مكون إضافي

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

لإنشاء مكون إضافي ، تحتاج أولاً إلى إنشاء دليل جديد في wp-content / plugins الخاص بتثبيت WordPress الدليل. قم بتسمية الدليل بشيء مثل "my-javascript-plugin".

بعد ذلك ، أنشئ ملفًا جديدًا في هذا الدليل وقم بتسميته "my-javascript-plugin.php." يجب أن تبدو محتويات هذا الملف كما يلي:

 <?PHP /* Plugin Name: My JavaScript Plugin Plugin URI: http://example.com/ Description: This plugin contains my JavaScript code. Version: 1.0 Author: Jane Doe Author URI: http://example.com/ */ ?>

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

بعد ذلك ، تحتاج إلى إضافة كود JavaScript الخاص بك إلى الملف. يجب أن يظهر الكود أسفل معلومات البرنامج المساعد الأولية ولكن قبل علامة PHP الختامية (؟>). بمجرد إضافة الرمز الخاص بك ، احفظ الملف وقم بتحميله على الخادم الخاص بك.

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

كيفية إضافة JavaScript إلى صفحة أو منشور WordPress معين

إذا كنت ترغب في إضافة JavaScript إلى صفحة WordPress معينة أو منشور معين ، يمكنك إدراج التعليمات البرمجية مباشرة في محرر السمات. انتقل إلى ملف functions.php ، ثم أضف الكود التالي:

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

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

بمجرد استبدال هذا الرقم وإضافة JavaScript المخصص ، تذكر حفظ ملفك.

كيفية إضافة JavaScript إلى قائمة WordPress الخاصة بك

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

كيفية إضافة JavaScript إلى تذييل WordPress الخاص بك

أسهل طريقة لإضافة JavaScript إلى تذييل WordPress الخاص بك هي باستخدام مكون إضافي مثل Insert Headers and Footers. يمكن لهذه الأداة إدراج رمز في رأس وتذييل موقع WordPress الخاص بك دون تحرير أي ملفات موضوع.

لاستخدام "إدراج الرؤوس والتذييلات" ، ما عليك سوى تثبيت المكون الإضافي وتنشيطه. بعد ذلك ، انتقل إلى الإعدادات ← إدراج الرؤوس والتذييلات .

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

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

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

سيتم ربط هذا الرمز في wp_footer. تذكر حفظ الملف لتحديث التغييرات عند الانتهاء.

كيفية إضافة JavaScript إلى عنصر واجهة مستخدم WordPress

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

في محرر التعليمات البرمجية للكتلة ، أضف علامات <script> ورمز JavaScript. عند الانتهاء ، حدد زر التحديث .

كيفية إضافة "onclick" JavaScript إلى زر WordPress

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

لإضافة حدث onclick إلى زر WordPress ، ستحتاج إلى تعديل رمز الزر وإضافة السمة التالية: onclick = ”your_function ()”. تأكد من استبدال "your_function ()" برمز JavaScript الذي تريد تشغيله عند النقر فوق الزر.

بمجرد إضافة سمة onclick ، ​​اضغط على زر حفظ . يجب أن يحتوي الزر الآن على حدث onclick مضافًا إليه.

كيفية البحث عن خطأ JavaScript وتصحيحه في صفحة WordPress

للبحث عن أخطاء JavaScript وتصحيحها ، يمكنك تمكين تصحيح أخطاء البرنامج النصي في ملف wp-config.php الخاص بموقعك.

افتح الملف عبر عميل بروتوكول نقل الملفات (FTP) أو مدير الملفات الخاص بك. ثم أدخل الكود التالي:

 define('SCRIPT_DEBUG', true);

تذكر وضع هذا الرمز قبل "هذا كل شيء ، توقف عن التعديل! خط تدوين سعيد ".

للعثور على أخطاء JavaScript وتصحيحها في صفحة WordPress ، يمكنك استخدام متصفحك. في Google Chrome ، انقر فوق رمز القائمة (ثلاث نقاط رأسية) في الزاوية العلوية اليمنى. ثم حدد المزيد من الأدوات → أدوات المطور من القائمة المنسدلة.

يمكنك أيضًا الوصول إلى أدوات المطور بالضغط على Ctrl + Shift + J (Windows / Linux) أو Cmd + Option + J (Mac).

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

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

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

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

كيفية إضافة لغات برمجة أخرى إلى WordPress (HTML، CSS، PHP)

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

هناك طريقة أخرى وهي تثبيت مكون إضافي مثل Code Snippets.

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

الأسئلة المتداولة حول إضافة JavaScript إلى WordPress

في هذه المرحلة ، يجب أن يكون لديك فهم قوي لكيفية إضافة JavaScript إلى WordPress. لنلقِ نظرة الآن على بعض الأسئلة الشائعة.

ما هي أفضل طريقة لإضافة JavaScript مضمنة إلى WordPress؟

أفضل طريقة لإضافة JavaScript مضمنة هي استخدام وظيفة wp_add_inline_script () WordPress.

ما هي أفضل طريقة لإضافة مكتبة JavaScript إلى WordPress؟

إذا كنت ترغب في إضافة مكتبة JavaScript ، فيمكنك القيام بذلك عن طريق تحرير رمز المظهر الخاص بك. سنستخدم jQuery كمثال.

في لوحة معلومات WordPress الخاصة بك ، انتقل إلى Appearance → Editor وحدد موقع الملف المسمى footer.php . انقر فوق هذا الملف لتحريره.

في الجزء السفلي من الملف ، سترى سطرًا من التعليمات البرمجية يبدو كالتالي: "wp_footer ()؛". أضف الكود التالي فوق هذا السطر:

 wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery.js', array(), '1.0.0', true );

احفظ التغييرات. يجب الآن إضافة مكتبة jQuery الخاصة بك إلى WordPress. يمكنك اختباره بالانتقال إلى الواجهة الأمامية لموقع الويب الخاص بك ومعرفة ما إذا كان يعمل بشكل صحيح.

هل يمكنك إضافة JavaScript مخصص باستخدام رمز قصير في WordPress؟

يمكنك استخدام JavaScript مخصص مع رموز WordPress المختصرة. ستحتاج إلى إضافة الكود التالي إلى ملف jobs.php الخاص بك:

 function my_shortcode_javascript() { ?> <script type="text/javascript"> // Add your javascript here </script> <?php } add_shortcode( 'my-shortcode', 'my_shortcode_javascript' );

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

هل يمكنك إضافة JavaScript مخصص باستخدام Block Editor؟

يمكنك إضافة JavaScript مخصص إلى موقع WordPress الخاص بك باستخدام Block Editor. للقيام بذلك ، ما عليك سوى إضافة كتلة HTML المخصصة .

ثم الصق كود JavaScript الخاص بك في الكتلة. فقط تأكد من استخدام علامتي الفتح <script> والإغلاق </script>.

هل يمكنك إضافة JavaScript مخصص باستخدام المحرر الكلاسيكي (TinyMCE)؟

يوصي WordPress بالترقية إلى محرر Block. ولكن إذا كنت لا تزال تستخدم المحرر الكلاسيكي (TinyMCE) ، فيمكنك إضافة JavaScript مخصص في بضع خطوات بسيطة.

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

هنا ، يمكنك إدخال كود JavaScript الخاص بك. مرة أخرى ، تأكد من تضمين علامات <script>.

ابدأ في تخصيص موقع WordPress الخاص بك

يمكن أن تؤدي إضافة JavaScript إلى موقع WordPress الخاص بك إلى إنشاء ميزات تفاعلية وتحسين تجربة مستخدم صفحتك (UX). هناك عدة طرق مختلفة لإضافة JavaScript.

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

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