عندما بدأنا العمل مع ووردبريس، كانت إضافة JavaScript وCSS تبدو سهلة للغاية. ما عليك سوى إضافة الكود مباشرة إلى قالبك أو إضافتك والمضي قدمًا.

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

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

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

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

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

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

<?php
add_action('wp_head', 'wp_dm_bad_script');
function wp_dm_bad_script() {
echo 'jQuery goes here';
}
?>

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

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

ومن الممكن أيضًا أن تكون النسختان مختلفتين، مما قد يؤدي أيضًا إلى حدوث تعارضات.

وبناء على ذلك، دعونا نلقي نظرة على الطريقة الصحيحة لإضافة إسكربتات وأوراق الأستايل.

لماذا يجب عليك إضافة إسكربتات وأستايلات Enqueue في ووردبريس؟

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

للتأكد من أن كل شيء يعمل بشكل صحيح، ولا أحد يتدخل في عمل الأخر، يحتوي ووردبريس على نظام Enqueuing (وضع في قائمة الانتظار). يوفر هذا النظام طريقة قابلة للبرمجة لتحميل JavaScript وأوراق أستايل CSS.

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

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

كيفية Enqueue الاسكربتات بشكل صحيح في ووردبريس؟

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

?php
function wp_dm_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', 'wp_dm_adding_scripts' );  
?>

توضيح:

بدأنا بتسجيل سكربتنا عبر دالة wp_register_script(). تقبل هذه الدالة خمسة معلمات:

• handle$ – يعد Handle هو الاسم الفريد للاسكربت الخاص بك. اسم اسكربتنا هو “my_amazing_script”.
• src$ – يعد src هو موقع الاسكربت الخاص بك. نستخدم دالة plugins_url للحصول على عنوان URL الصحيح لمجلد الإضافات. بمجرد عثور ووردبريس عليه، سيبحث عن اسم ملفنا amazing_script.js في ذلك المجلد.
• deps$ – يعد deps هو للتبعيات. بما أن اسكربتنا يستخدم jQuery، فقد أضفنا jQuery في منطقة التبعيات. سيقوم ووردبريس تلقائيًا بتحميل jQuery إذا لم يكن محمل مسبقًا على الموقع.
• ver$ – هذا هو رقم إصدار الاسكربت. هذه المعلمة غير مطلوبة.
• in_footer$ – نريد تحميل الاسكربت في الفوتر، لذلك عينا القيمة إلى true. إذا كنت تريد تحميل الاسكربت في الهيدر، فاجعلها false.

بعد توفير جميع المعلمات في دالة wp_register_script، يمكننا استدعاء السكربت في دالة wp_enqueue_script()، مما يؤدي إلى إتمام جميع الخطوات.

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

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

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

Enqueue الأستايلات بشكل صحيح في ووردبريس

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

<?php
function wp_dm_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wp_dm_adding_styles' );  
?>

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

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

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

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

مع ذلك، إذا كنت تستخدم دالة enqueue scripts في قالبك، فاستخدم ببساطة get_template_directory_uri() بدلاً من ذلك. إذا كنت تعمل مع قالب فرعي، فاستخدم get_stylesheet_directory_uri().

فيما يلي مثال على الكود:

<?php
   
function wp_dm_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', 'wp_dm_adding_scripts' );  
?>

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

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

هل وجدت هذا المنشور مفيدًا؟ شاركنا رأيك من خلال ترك تعليق أدناه، أو انضم إلينا على تويتر وفيسبوك.