إضافة جافا سكريبت إلى ثيمات WordPress بالطريقة الصحيحة

محتويات المقالة

طريقة خاطئة لإضافة Javascript إلى WordPress Themes

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

<script src="https://site.com/wp-content/themes/mytheme/js/my-script.js"></script>

الطريقة الصحيحة لإضافة Javascript إلى WordPress Themes

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

مثال

wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), true );

سيقوم الكود أعلاه بتحميل ملف my-script.js على موقعك. كما ترى ، فقد قمت فقط بتضمين مقبض $ ولكن يمكنك أيضًا إضافة تبعيات للنص الخاص بك ورقم الإصدار وما إذا كنت تريد تحميله في الرأس أو التذييل (الافتراضي هو الرأس).

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

نصوص ووردبريس المستضافة

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

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

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

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

wp_enqueue_scripts – الإجراء المستخدم لتحميل البرامج النصية على الواجهة الأمامية
admin_enqueue_scripts – الإجراء المستخدم لتحميل البرامج النصية في مشرف WP

فيما يلي مثال (سيتم إضافته إلى ملف function.php الخاص بك) عن كيفية إنشاء دالة ثم استخدام خطاف WordPress لاستدعاء البرامج النصية الخاصة بك.

/**
 * Enqueue a script
 */
function myprefix_enqueue_scripts() {
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );

ملاحظة : انظر كيف نستخدم وظيفة “get_template_directory_uri” عند تحديد موقع البرنامج النصي الخاص بك؟ تقوم هذه الوظيفة بإنشاء عنوان URL لمجلد السمة الخاص بك. إذا كنت تعمل مع موضوع فرعي ، فستحتاج إلى استخدام “get_stylesheet_directory_uri” بدلاً من ذلك بحيث يشير إلى المظهر الفرعي الخاص بك وليس الموضوع الرئيسي.

مضيفا التعليمات البرمجية جافا سكريبت مضمنة

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

function myprefix_add_inline_script() {
    wp_add_inline_script( 'my-script', 'alert("hello world");', 'after' );
}
add_action( 'wp_enqueue_scripts', 'myprefix_add_inline_script' );

ما سيفعله هذا هو إضافة جافا سكريبت المضمنة بعد البرنامج النصي “my-script” المسجل مسبقًا. عند استخدام wp_add_inline_script ، يمكنك فقط إضافة رمز مضمّن إما قبل أو بعد نص برمجي مسجل بالفعل ، لذا إذا كنت تحاول تعديل رمز نص برمجي معين ، فتأكد من تحميله بعده ، أو إذا كنت بحاجة فقط إلى إضافة بعض التعليمات البرمجية المخصصة ، فيمكنك ربط إلى سكربت jquery الذي يتم تحميله عمومًا بواسطة معظم سمات WordPress وإذا لم يكن كذلك يمكنك استخدام wp_enqueue_script لتحميل إصدار WordPress المستضاف من jQuery.

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

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

add_action( 'wp_footer', function() { ?>
	<script>
		( function( $ ) {
			'use strict';
			$( document ).on( 'ready', function() {
				// Your custom code here
			} );
		} ( jQuery ) );
	</script>
<?php } );