2022-03-18

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



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

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


خطأ شائع عند إضافة البرامج النصية وأوراق الأنماط في ووردبريس

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


يستخدم البعض wp_head function عن طريق الخطأ لتحميل البرامج النصية وأوراق الأنماط الخاصة بهم.

<?php

add_action('wp_head', 'wpb_bad_script');

function wpb_bad_script() {

echo 'jQuery goes here';

}

?>

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


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


من الممكن أيضًا أن يكون كلا الإصدارين مختلفين ويمكن أن يتسبب أيضًا في حدوث تعارض.


دعنا نلقي نظرة على الطريقة الصحيحة لإضافة البرامج النصية وأوراق الأنماط.


يحتوي ووردبريس WordPress على مجتمع مطور قوي. يقوم آلاف الأشخاص من جميع أنحاء العالم بتطوير قوالب وإضافات لبرنامج ووردبريس WordPress.


للتأكد من أن كل شيء يعمل بشكل صحيح ، ولا يخطو أحد على أصابع قدم الآخر ، فإن WordPress لديه نظام قائمة الانتظار. يوفر هذا النظام طريقة قابلة للبرمجة لتحميل أوراق أنماط JavaScripts و CSS.


باستخدام الدالتين wp_enqueue_script و wp_enqueue_style ، فإنك تخبر ووردبريس WordPress بموعد تحميل ملف ومكان تحميله وما هي تبعياته.


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


كيف تقوم بإدراج البرامج النصية بشكل صحيح في ووردبريس؟

يعد تحميل البرامج النصية بشكل صحيح في ووردبريس WordPress أمرًا سهلاً للغاية. يوجد أدناه مثال على الكود الذي ستلصقه في ملف الملحقات أو في ملف functions.php الخاص بالقالب لتحميل البرامج النصية بشكل صحيح في ووردبريس WordPress.

?php

function wpb_adding_scripts() {

 

wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);

 

wp_enqueue_script('my_amazing_script');

}

  

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  

?>

التفسير :

بدأنا بتسجيل البرنامج النصي الخاص بنا من خلال  wp_register_script() function. تقبل هذه الوظيفة 5 معلمات:


  •  handle $ - هو الاسم الفريد للنص الخاص بك. يُطلق على موقعنا "my_amazing_script"
  • src $ - موقع النص الخاص بك. نحن نستخدم وظيفة plugins_url للحصول على عنوان URL المناسب لمجلد الإضافات. بمجرد أن يجد ووردبريس WordPress ذلك ، سيبحث عن اسم الملف amazing_script.js في هذا المجلد.
  • Deps - $ Deps هو للتبعية. نظرًا لأن نصنا يستخدم jQuery ، فقد أضفنا jQuery في منطقة التبعية. سيقوم ووردبريس WordPress تلقائيًا بتحميل jQuery إذا لم يتم تحميله بالفعل على الموقع.
  •  ver $ - هذا هو رقم إصدار البرنامج النصي الخاص بنا. هذه المعلمة غير مطلوبة.
  •  in_footer $ - نريد تحميل البرنامج النصي الخاص بنا في التذييل ، لذلك قمنا بتعيين القيمة لتكون صحيحة. إذا كنت تريد تحميل البرنامج النصي في الرأس ، فستجعله خطأ.

بعد توفير جميع المعلمات wp_register_script، يمكننا فقط استدعاء النص wp_enqueue_script()الذي يجعل كل شيء يحدث.


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


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


الآن قد يتساءل البعض عن سبب قيامنا بالخطوة الإضافية لتسجيل النص أولاً ثم وضعه في قائمة الانتظار؟ 

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


إضافة الأنماط بشكل صحيح في ووردبريس

تمامًا مثل البرامج النصية ، يمكنك أيضًا إدراج أوراق الأنماط الخاصة بك. انظر للمثال ادناه:

<?php

function wpb_adding_styles() {

wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));

wp_enqueue_style('my_stylesheet');

}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  

?>

بدلاً من الاستخدام wp_enqueue_script، نستخدم الآن wp_enqueue_styleلإضافة ورقة الأنماط الخاصة بنا.


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


في الأمثلة أعلاه ، استخدمنا plugins_urlوظيفة للإشارة إلى موقع البرنامج النصي أو النمط الذي أردنا وضعه في قائمة الانتظار.


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


يوجد أدناه مثال على الكود:

<?php

  

function 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' );  

?>


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


التعليقات
0 التعليقات

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *