كيف يقدم WordPress JavaScript بشكل صحيح؟تحميل مخصص لملفات JS و CSS

سيستعين المبرمجون الذين يستخدمون ووردبريس لبناء مواقع الويب ببعض موارد جافا سكريبت وسي إس إس عند تطوير إضافات ووردبريس أو تخصيص قوالب ووردبريس.

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

طريقة الاستشهاد المعيبة

هناك طريقتان شائعتان للاقتباس ، لا بأس ، إنها ليست مثالية أو معقولة.

الطريقة الأولى: استخدام وسم الرابط للإشارة إلى ملف CSS

• تطبق علامات البرنامج النصي ملفات JS.غير مفصل هنا.

الطريقة الثانية: استخدام دالة wp_head

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

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• انسخ الكود أعلاه في ملف function.php للرجوع إلى الملفات المقابلة.

آلية موارد مخطوطات ووردبريس Enqueue

كما نعلم جميعًا ، يحتوي WordPress على الكثير من المكونات الإضافية:

• يشير كل مكون إضافي تقريبًا إلى بعض ملفات الموارد.
• حتما ، سيكون هناك تعارض بين الموارد المشار إليها بواسطة مكونين إضافيين ، والتي ستصبح غير مستقرة وقد تؤثر على الكفاءة.

استخدم الدالة wp_enqueue_script

• للإشارة إلى مورد في WordPress ، يجب عليك استخدامwp_enqueue_scriptدالة تحتوي على الكلمة enqueue في اسم الوظيفة المدرجة أو الفرز.
• باستخدام طريقة WordPress هذه لإدراج الموارد في قائمة الانتظار (Enqueue Scripts) ، يتم فصل المراجع عن الملفات المقابلة والرمز الأساسي.
• إذا أراد المستخدم تعطيل المورد ، فيمكنه حذفه وتعديله والتعليق عليه دون تعديله من الكود الأساسي.

أيضًا ، تم تضمين بعض المكتبات الشائعة الاستخدام مثل jQuery و jQuery UI وما إلى ذلك في WordPress.

يمكننا استخدام وظيفة wp_enqueue_script لاستدعاء المكتبة المدمجة مباشرة ، مما يحفظ التعليمات البرمجية ومواصفات أوضح.

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

كيفية استيراد ملفات JS و CSS بشكل صحيح في WordPress؟

يوفر WordPress طرق استيراد معقولة لطرق JS و CSS.

يمكنك استخدام الكود التالي لاستيراد ملف plugin.css إلى الملحق ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

يستخدم ما سبق وظيفة wp_register_script لإنشاء مورد باستخدام المعرف plugin_stylesheet.

ثم قم بإضافة الطلبات الموجودة في قائمة الانتظار إلىwp_enqueue_scriptsالإجراءات قيد التشغيل.

على الرغم من أن اسم الوظيفة عبارة عن برنامج نصي ، إلا أنه لا علاقة له بنوع ملف المورد وهو صالح لكل من CSS و JS.

وظيفة wp_register_script ليست بهذه البساطة حقًا ، يمكن أن تحتوي على خمس معلمات:

1) $handle: مُعرّف المورد.

• 由wp_enqueue_scriptنقل.

2) $src: موقع المورد.

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

3) $deps: التبعية.

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

4) $ver: إصدار المورد، اختياري.

5) $in_footer: هل يجب وضعه في الأسفل؟

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

لنلقِ نظرة على مثال مرجعي لملف JavaScript أكثر اكتمالاً ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

تستخدم سمات WordPress wp_enqueue_script لاستيراد الموارد

المبرمجين في تطوير قوالب ووردبريس ، استخدمwp_enqueue_scriptاستيراد الموارد.

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

يتمثل الاختلاف الرئيسي في استخدام الوظيفة المقابلة للحصول على دليل السمة للحصول على عنوان ملف المورد تحت السمة.

يمكنك استخدامget_template_directory_uriوظيفة للحصول على دليل الموضوع الحالي.

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