كيفية إضافة نصوص jQuery إلى ووردبريس بسهولة

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

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

وضع توافق jQuery

من المهم أيضًا فهم وضع توافق jQuery قبل البدء في استخدام jQuery في WordPress.

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

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

الق نظرة على هذا المثال.

/ * مسج عادي * /

$ ('. hideable'). on ('click' ، الوظيفة () {

$ (هذا). إخفاء () ؛

})

/* وضع التوافق */

jQuery ('. hideable'). on ('click' ، الوظيفة () {

jQuery (this) .hide () ؛

})

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

ولكن لا تقلق ، مع بعض التعديلات ، يمكنك التغلب على مشكلة التوافق والقدرة على استخدام علامة $ القديمة الجيدة.

كمرجع ، $ هو اسم مستعار لـ jQuery () ومقبض لوظيفة.

إليك كيف تبدو البنية الأساسية.

$ (محدد) .action ()

هنا ، تشير علامة $ إلى jQuery ، ويعثر $ (selector) على عناصر HTML ، ويحدد الإجراء () الإجراء الذي سيتم تنفيذه على هذه العناصر.

إليك بعض الأساليب التي يمكنك الاستفادة منها للتغلب على مشكلة توافق jQuery.

كيف تتغلب على مشكلة توافق jQuery؟

1. أدخل وضع "jQuery Stealth"
2. أدخل وضع "عدم التعارض"

ادخل إلى وضع التسلل في jQuery

مصدر الصورة: Podfeet

الطريقة الأولى والأكثر شيوعًا للتغلب على مشكلة التوافق هي الدخول في وضع التخفي (التخفي باستخدام التعليمات البرمجية الخاصة بك).

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

الرجوع إلى هذا المثال

(وظيفة ($) {

$ ('. hideable'). on ('click' ، الوظيفة () {

$ (هذا). إخفاء () ؛

})

}) (jQuery) ؛

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

هنا مثال.

jQuery (مستند) .ready (الوظيفة ($) {

$ ('. hideable'). on ('click' ، الوظيفة () {

$ (هذا). إخفاء () ؛

})

}) ؛

أدخل وضع عدم التعارض

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

var $ j = jQuery.noConflict () ،

الآن بعد أن عرفت كيفية استخدام jQuery في WordPress ، دعنا ننتقل إلى موضوعنا الرئيسي - كيفية إضافة نصوص jQuery إلى موقع WordPress الخاص بك.

كيفية إضافة مسج إلى مواقع ووردبريس

مصدر الصورة: fl1digital.com

يمكن إضافة jQuery إلى WordPress بسهولة من خلال عملية تسمى Enqueueing .

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

لنفترض أنك تعمل على قالب WordPress. استخدم هذه الوظيفة في ملف jobs.php الخاص بك.

wp_enqueue_script ()

هنا كيف يبدو.

الوظيفة my_theme_scripts () {

wp_enqueue_script ('my-great-script'، get_template_directory_uri (). '/js/my-great-script.js'، array ('jquery')، '1.0.0'، true) ؛

}

add_action ('wp_enqueue_scripts'، 'my_theme_scripts') ؛

فيما يلي خمس حجج قد تتطلبها هذه الوظيفة.

1. مقبض $: مقبض فريد يمكن استخدامه للإشارة إلى نص برمجي
2. $ src: موقع ملف البرنامج النصي الخاص بك
3. deps $: يستخدم لتحديد مجموعة من التبعيات
4. $ ver: رقم إصدار البرنامج النصي
5. in_footer $: لإرشاد WordPress إلى مكان وضع النص البرمجي

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

ذات صلة: دليلك النهائي حول كيفية تحرير WordPress - HTML ، CSS ، PHP ، JavaScript

كيفية إضافة نصوص jQuery إلى مدير WordPress

يمكنك إضافة jQuery إلى مسؤول WordPress باستخدام نفس الوظائف. كل ما عليك فعله هنا هو استخدام خطاف مختلف.

هنا مثال

الوظيفة my_admin_scripts () {

wp_enqueue_script ('my-great-script'، plugin_dir_url (__FILE__). '/js/my-great-script.js'، array ('jquery')، '1.0.0'، true) ؛

}

add_action ('admin_enqueue_scripts'، 'my_admin_scripts') ؛

الآن فقط قم بتبديل wp_enqueue_scripts مع admin_enqueue_scripts وأنت على ما يرام.

كيفية إلغاء تسجيل jQuery في WordPress

ستحتاج إلى إلغاء تسجيل jQuery في WordPress إذا كنت ترغب في استخدام إصدار مختلف من jQuery من التحميلات المسبقة.

فيما يلي مثال لكيفية إلغاء تسجيل jQuery في WordPress.

// تضمين مسج مخصص

function shapeSpace_include_custom_jquery () {

wp_deregister_script ('jquery') ،

wp_enqueue_script ('jquery'، 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'، array ()، null، true) ؛

}

add_action ('wp_enqueue_scripts'، 'shapeSpace_include_custom_jquery') ؛

انه سهل. كل ما عليك فعله هو إلغاء تسجيل jQuery في WordPress باستخدام wp_deregister_script () وتضمين البرنامج النصي الذي تريده.

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

هل يجب عليك تسجيل النصوص قبل الشطف؟

يمكنك تسجيل البرنامج النصي مسبقًا في العملية إذا كنت تريد تحميله عند الحاجة فقط في صفحاتك.

هنا مثال

add_action ('wp_loaded'، 'register_all_scripts') ؛

وظيفة register_all_scripts ()

{

wp_register_script (…) ،

}

بمجرد الانتهاء من ذلك ، قم بتدوين البرامج النصية عندما تحتاج إليها. إليك الطريقة.

add_action ('wp_enqueue_scripts'، 'enqueue_front_scripts') ؛

add_action ('admin_enqueue_scripts'، 'enqueue_back_scripts') ؛

استخدام العلامات الشرطية

يمكنك أيضًا استخدام العلامات الشرطية لتحميل jQuery في WordPress فقط عند الحاجة.

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

ارجع إلى وثائق البرنامج النصي للمشرف في WordPress للحصول على مزيد من المعلومات حول استخدام العلامات الإضافية.

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

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

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

فيما يلي بعض الإضافات الأكثر شيوعًا لإضافة jQuery إلى WordPress.

• الحقول المخصصة المتقدمة
• بسيط CSS و JS مخصص
• أنماط مخطوطات N
• تنظيف الأصول

استنتاج

لذا ها أنت ذا. أنت الآن تعرف كيفية إضافة واستخدام WordPress jQuery.

سيساعدك تطبيق هذه المعرفة على مشاريعك في إنشاء مشاريع رائعة. يمكنك أيضًا قراءة أدلةنا النهائية حول مواضيع مثل JPG مقابل JPEG و WordPress White Label لزيادة معرفتك.