كيفية إضافة رمز مسج على وورد بشكل صحيح

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

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

حول وضع التوافق مسج

قبل البدء في إضافة البرامج النصية إلى WordPress ، من المهم أن تفهم وضع توافق jQuery.

كما تعلمون ، يأتي WordPress مع مسج مدرج بالفعل.

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

جزء من هذه الآلية الدفاعية يعني أنك لا يمكن استخدم $التوقيع مباشرة كما تفعل في مشاريع أخرى.

بدلاً من ذلك ، عند كتابة كود jQuery لـ WordPress ، يجب عليك استخدام jQuery.

إليك مثال على هذا الرمز:

/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})

/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})

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

الخبر السار؟

مع بعض التعديلات ، يمكنك مرة أخرى استخدام رمز الدولار الصغير الجميل.

بالمناسبة ، إذا كنت جديد على مسج ، علامة $ هي مجرد اسم مستعار لـ jQuery () ، ثم اسم مستعار لوظيفة.

يبدو الهيكل الأساسي كما يلي: $(selector).action(). تحدد علامة الدولار jQuery ... استعلامات "(المحدد)" أو العثور على عناصر HTML ... وأخيرًا "jQuery () action" هو الإجراء الذي يتعين تنفيذه على العناصر.

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

1. أدخل jQuery وضع الشبح

الطريقة الأولى للتغلب على وضع التوافق هي التسلل في الشفرة.

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

كما في المثال أدناه:

( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);

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

jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});

2. أدخل وضع "لا تعارض"

طريقة أخرى سهلة لتجنب تهجئة jQuery هي التبديل إلى الوضع "الصراع الحر" واستخدام اختصار مختلف.

في هذه الحالة: $jبدلا من الافتراضي $.

كل ما عليك فعله هو إعلانه في الجزء العلوي من البرنامج النصي:var $j = jQuery.noConflict();

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

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

تعد إحدى أسهل الطرق لإضافة نصوص jQuery إلى WordPress من خلال عملية تسمى الإعداد طابور ".

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

وبهذه الطريقة ، فإنه يدير جميع تبعياتنا بالنسبة لنا (شكرًا WP!).

إذا كنت تعمل على سمة ، يمكنك استخدام الوظيفة  wp_enqueue_script() في الخاص  functions.php الملف.

إليك ما يبدو عليه:

function my_theme_scripts () {
wp_enqueue_script('mon-grand-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. $ handle - مقبض فريد يمكنك استخدامه للإشارة إلى البرنامج النصي.
2. src $ - موقع ملف البرنامج النصي.
3. deps $ - يحدد مجموعة من التبعيات.
4. $ ver - رقم إصدار البرنامج النصي الخاص بك.
5. $ in_footer - يتيح لـ WordPress معرفة مكان وضع النص.

* شيء واحد لملاحظة  $in_footer يعني أنه سيتم تحميل البرامج النصية بشكل افتراضي في الرأس.

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

إضافة نصوص إلى مدير 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 على الصفحة.

لتجنب ذلك ، نحتاج إلى إلغاء تسجيل إصدار WP.

إليك ما يبدو عليه:

/ / يتضمن مسج مخصص
وظيفة الشكل space_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');

إنه سهل مثل استخدام ملف  wp_deregister_script () ل إلغاء مسج من WP ، ثم بما في ذلك البرنامج النصي مسج تريد إضافته.

في المثال أعلاه ، استخدمنا مكتبة مسج تستضيفها جوجل ، ولكن من الواضح أنك ستستبدله بعنوان URL الخاص بالبرنامج النصي الخاص بك.

ألا يجب عليك حفظ البرامج النصية قبل وضعها في قائمة الانتظار؟

إذا كنت ترغب في تحميل البرامج النصية الخاصة بك حسب الحاجة بدلاً من تحميلها مباشرة في صفحاتك - يمكنك حفظ النص في وقت سابق.

على سبيل المثال ، على  wp_loaded:

add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}

بمجرد القيام بذلك ، يمكنك حينئذٍ وضع البرامج النصية في قائمة انتظار عندما تحتاج إليها:

add_action ('wp_enqueue_scripts'، 'enqueue_front_scripts') ؛

add_action ('admin_enqueue_scripts'، 'enqueue_back_scripts') ؛

تذكر استخدام نفس الأسماء لتجنب الاصطدام بالنصوص الأخرى.

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

استخدم العلامات الشرطية لتحميل البرامج النصية الخاصة بك فقط عند الحاجة.

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

نلقي نظرة على توثيق البرامج النصية في قائمة الانتظار  في WordPress Codex لمزيد من المعلومات.

أضف jQuery إلى WordPress باستخدام الإضافات

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

فيما يلي بعض الأمثلة على مكونات JavaScript / jQuery الإضافية المعروفة: الحقول المخصصة المتقدمة , عرف بسيط CSS و JS , أنماط البرنامج النصي n et تنظيف الموارد.

إنشاء مشروع مسج الخاصة بك

سيؤدي فهم jQuery بشكل أفضل إلى جعل عملك أكثر تأثيرًا. سواء لموقع الويب الخاص بك أو لمشاريع العميل.

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

نعم ، هناك قدر ضئيل من النفقات العامة مقارنة باستخدام لغة HTML الفانيليا ، ولكن هناك أيضًا فائدة إضافية تتمثل في إدارة التبعية والوضوح.

ليس ذلك فحسب ، باستخدام بعض الحيل مثل تجاوز التوافق الافتراضي لـ jQuery WP ، ستوفر على نفسك الكثير من الوقت والجهد والتعليمات البرمجية المتضخمة.