Anonim

كما ادعى مجتمع CMS الرائد ، فإن 25٪ من الإنترنت يستخدم WordPress. رؤية الاتجاهات ، ليس لدينا خيار سوى تصديقها ، ويبدو أن كل مدونة تقريبًا وكل موقع رابع يستخدم CMS الأقوى والأكثر سهولة في الاستخدام. نتطلع إلى ذلك ، بدأ الأشخاص والمطورين في نقل مواقعهم إلى منصة WordPress.

في هذا المسعى لتحويل موقع الويب الخاص بك الحلو والبسيط إلى موقع CMS معقد وعالي الأداء ، يتعثر الأشخاص في خطوة أساسية للغاية ويطرحون السؤال التالي: For the Love ، كيف أحصل على ملف JavaScript (.js) الخارجي هذا؟ العمل في هذا الموضوع وورد؟ هل أنت أيضًا الشخص الذي يطرح نفس السؤال؟ حسنًا ، إنك في النهاية في المكان الصحيح: أنا هنا لإرشادك خطوة بخطوة عبر أبسط طريقة ممكنة لتحقيق هذه المهمة!

الآن بافتراض أن WordPress لديك قد تم تثبيته وتشغيله مع JS خارجي جاهز ، دعنا ندخل في مهمة تضمين الملف!

ملاحظة: أنا أستخدم الملف التالي (testrun.js) لهذا البرنامج التعليمي والموضوع الذي أعمل عليه هو WordPress's Twenty Sixteen.

تنبيه ( 'مرحبا')؛

هيا نبدأ!

يتم تحميل جميع البرامج النصية وأوراق الأنماط من داخل function.php . هذه هي الطريقة الصحيحة لتحميلها داخل WordPress لتجنب التعارض مع أي نصوص برمجية أخرى يتم تحميلها إما بواسطة WordPress نفسه أو المكونات الإضافية التي تستخدمها. إذا سمحت لـ WordPress بإدارة جميع الملفات المضمّنة ، فأنت بحاجة إلى إخباره أنك تريد إدراج هذا الملف في جزء الرأس (البداية) أو التذييل (النهاية) من الملف. كل قالب / سمة لها وظائف خاصة بها. لذلك سيكون من الصعب تعميم الاسم الدقيق للوظائف التي تشمل جميع الملفات التي سيتم تضمينها. نظرًا لأنني آخذ ستة وعشرون كمسألة ، في ما يلي لقطة لكيفية استخدام وظائفاتي. php (المستخدمة في تضمين الملفات). يجب أن تشبه إلى حد ما هذا:

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

يأخذ wp_enqueue_script (مقبض $ ، $ src ، $ deps ، $ ver ، $ in_footer) في params التالية:

$ مقبض

(سلسلة) (مطلوب) اسم البرنامج النصي.

$ SRC

(string | bool) (اختياري) المسار إلى البرنامج النصي من دليل جذر WordPress. مثال: '/js/myscript.js'.

القيمة الافتراضية: خطأ

$ DEPS

(مجموعة) (اختياري) مجموعة من المقابض المسجلة التي يعتمد عليها هذا البرنامج النصي.

القيمة الافتراضية: array ()

$ الاصدار

(string | bool) (اختياري) سلسلة تحدد رقم إصدار البرنامج النصي ، إذا كان به رقم. يتم استخدام هذه المعلمة للتأكد من إرسال الإصدار الصحيح إلى العميل بغض النظر عن التخزين المؤقت ، ولذا يجب تضمينه في حالة توفر رقم إصدار ومعقول للبرنامج النصي.

القيمة الافتراضية: خطأ

$ in_footer

(منطقي) (اختياري) ما إذا كنت تريد إدخال البرنامج النصي من قبل أو قبل . الافتراضي "خطأ". يقبل "خطأ" أو "صحيح".

القيمة الافتراضية: خطأ

يمكنك تجاهل وظيفة wp_register_script () لهذا البرنامج التعليمي. هدفنا هو تضمين JS خارجي فقط. يجب أن تعمل بشكل جيد دون ذلك!

لذلك ، إذا كنت أرغب في تسمية البرنامج النصي الخاص بي كـ "اختبار" ، تذكر أن هذا param (مقبض $) لا يكون بالضرورة هو اسم الملف الفعلي ، وملفي له تبعية خارجية على jquery والإصدار هو 1.0 ويتم تحميله قبل تحميل الصفحة ثم تبدو وظيفتي:

wp_enqueue_script ('tutorial'، get_template_directory_uri (). '/js/testrun.js'، array ('jquery')، '1.0'، false)؛

إذا لاحظت ، لقد استخدمت get_template_directory_uri () ، لذلك ، فإن السلسلة المتسلسلة بعد الوظيفة ، وهي " /js/testrun.js " هي في الواقع مسار الملف الذي يكتب ملف فهرس القالب .

لذلك تصبح السمة $ src ، والتي هي مصدر ملف js الخاص بك: get_template_directory_uri (). 'path_to_js_wrt_index_of_template'.

لذلك ، تبدو الوظائف النهائية.

امسك هناك ، لقد انتهينا تقريبا! فقط احفظ هذا الآن واضغط على التحديث على موقع الويب الخاص بك … يجب أن ترى JS يعمل! تلك هي خاصتي:

نظرًا لأننا قمنا بتعيين الخيار $ in_footer على "false" ، يتم تحميل البرنامج النصي قبل تحميل الصفحة ، ولكن بعد تحميل JQuery عند إضافته كتبعية!

و .. فويلا! هنا تذهب .. لقد قمت بنجاح بتضمين ملف JS خارجي مخصص في سمة WP الخاصة بك!

ترميز سعيد!

المرجع: Enqueue الوظيفة: WordPress Codex

ما هي أفضل طريقة لإضافة شبيبة خارجية مخصصة إلى وورد