كيفية إضافة أنماط وأنماط JavaScripts بشكل صحيح في WordPress

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

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

توجد طرق مختلفة لكتابة رمز ولكن هناك طرقًا محددة فقط لكتابة التعليمات البرمجية بكفاءة.

إذا كان بإمكانك كتابة رمز في سطرين بدلاً من عشرة ، فإنك توفر الكثير من المعالجة وكذلك الذاكرة.

إذا لم يكن الأمر مهمًا بالنسبة إلى موقع ويب صغير وخفيف الوزن ، ولكن بالنسبة إلى موقع ويب ثقيل ، فقد يعني ذلك الكثير.

إذا لم تكتب تعليمات برمجية واضحة وتستخدم الموارد المتاحة بكفاءة ، فسوف تخلق الكثير من التعارضات للبرامج الأخرى.

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

ولكن إذا لم تتبع المعيار المناسب ، فقد تتعرض جميع المكونات الإضافية النشطة للتشويش بشكل سيئ.

هذه المقالة مخصصة بشكل أساسي لمطوري WordPress الجدد الذين يرغبون في تطوير سمات WordPress والإضافات.

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

لذلك ، من الأفضل معرفة كيفية إضافة JavaScripts وأنماط بشكل صحيح في WordPress .

أخطاء إضافة JavaScript

قد يكون البعض منكم على دراية بحقيقة أن WordPress لديه وظيفة تسمى wp_head تساعدك على تحميل أي شيء في قسم رأس الموقع.

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

add_action ('wp_head'، 'wpb_bad_script') ؛
دالة wpb_bad_script () {
صدى "jQuery يذهب هنا" ؛
}

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

على سبيل المثال ، تقوم بتحميل JQuery يدويًا في المكون الإضافي الخاص بك ، ويقوم مطور آخر أيضًا بتحميل نفس JQuery يدويًا أو من خلال المعيار المناسب. إذا قام شخص ما بتنشيط كلا المكونين الإضافيين ، فسيتم تحميل JQuery مرتين في الذاكرة مما يعد مضيعة.

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

كيف نتجنب مثل هذه الأخطاء - مفهوم وظيفة Enqueue؟

كما تعلم ، فإن مجتمع مطوري WordPress هو مجتمع كبير وقوي. هناك الآلاف والآلاف من المطورين يطورون موضوعات وإضافات جديدة كل يوم.

ولكن ما يفعلونه للتأكد من عدم وجود أي تعارض مع طريقة الترميز الخاصة ببعضهم البعض هو من خلال وظيفة البرنامج النصي.

هذه هي الوظيفة المسؤولة عن إضافة JavaScripts وأنماط بشكل صحيح في WordPress بحيث لا يكون هناك أي تعارض أو حظر غير ضروري للذاكرة.

يضمن طريقة منهجية لتحميل JavaScripts والأنماط. الدالة qp_enquque_function تخبر Wordless متى يتم تحميل هذه الأنماط والجافا سكريبت ، ومكان تحميلها وخاصةً في ظل أي ظروف.

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

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

خطوات إضافة JavaScripts وأنماط بشكل صحيح في WordPress-

1. قائمة النصوص في ووردبريس

تقوم سطور التعليمات البرمجية التالية بتحميل حزمة JavaScript المضمنة التي تأتي مع WordPress. يجب عليك وضع هذه الأسطر في ملف الملحقات عند إنشاء المكونات الإضافية أو يجب عليك وضعها في function.php إذا كنت تقوم بإنشاء سمة.

الوظيفة wpb_adding_scripts () {
wp_register_script ('my_amazing_script'، plugins_url ('amazing_script.js'، __FILE__)، مجموعة ('jquery')، '1.1'، true) ؛
wp_enqueue_script ('my_amazing_script') ،
}
add_action ('wp_enqueue_scripts'، 'wpb_adding_scripts') ؛ 

شرح المدونة

يتم تسجيل البرنامج النصي من خلال الوظيفة wp_register_script () التي تحتوي على خمس معاملات مختلفة.

1. $ handle - هو اسم فريد للنص البرمجي. ها هو "my_amazing_script".

2. src $ - وهي تحدد موقع البرنامج النصي الخاص بك. تقوم وظيفة المكتبة plugins_url بجلب عنوان URL المناسب لمجلد البرنامج المساعد الخاص بك. بمجرد جلبه ، سيبدأ في البحث عن ملف amazing_script.js بداخله.

3. Deps دولار - تحدد التبعية. تحتاج إلى إضافته عندما تطلب من WordPress تحميل نص مكتبة مثل Jquery.

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

4. $ ver - يحدد رقم إصدار البرنامج النصي. انها ليست إلزامية.

5. in_footer $ - يتم استخدامه لتحميل البرنامج النصي في التذييل. إذا كنت تريد تحميل البرنامج النصي في الرأس ، فيجب عليك الاحتفاظ به على "خطأ".

بمجرد تحديد كل شيء ، ما عليك سوى استدعاء البرنامج النصي باستخدام wp_enqueue_script ().

2. إدراج الأنماط في WordPress

تمامًا مثل JavaScript ، يجب عليك إدراج أوراق الأنماط. استخدم الجزء التالي من الكود في ملف البرنامج المساعد أو ملف function.php لإنشاء السمة.

دالة wpb_adding_styles () {
wp_register_script ('my_stylesheet'، plugins_url ('my-stylesheet.css'، __FILE__)) ؛
wp_enqueue_script ('my_stylesheet') ،
}
add_action ('wp_enqueue_scripts'، 'wpb_adding_styles') ؛ 

الرموز أعلاه مناسبة أثناء إنشاء مكون إضافي. عندما تقوم بإنشاء قالب ، يجب عليك تغيير plugins_url () إلى get_template_directory_uri (). ستبقى بقية الأشياء كما هي بالضبط.

الوظيفة wpb_adding_scripts () {
wp_register_script ('my_amazing_script'، get_template_directory_uri (). '/js/amazing_script.js'، array ('jquery')، '1.1'، true) ؛
wp_enqueue_script ('my_amazing_script') ،
}
add_action ('wp_enqueue_scripts'، 'wpb_adding_scripts') ؛ 

إذا كنت تقوم بإنشاء قالب فرعي ، فعليك استخدام get_stylesheet_direcroy_uri () بدلاً من get_template_directory_uri ().

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

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

اتبع دائمًا معايير الترميز المتبعة في جميع أنحاء العالم لتكون على نفس الصفحة مع مطورين ناجحين آخرين.