تعلم طريقة تضمين ملفات CSS و JavaScript في قالب وودربريس بشكل صحيح

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

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

في مقالة اليوم ستتعلم كيف تقوم بإضافة ملفات CSS و Javascript الخاصة بك بالطريقة الصحيحة من خلال وضعها في قائمة انتظار. تمكن هذه القائمة ووردبريس من العثور على هذه الملفات وأي تبعيات تحتاجها (مثل مكتبة jQuery) وتتعرف على طريقة الاستفادة من خطافات ووردبريس من أجل تجميع وإدراج التنسيقات والسكربتات الخاصة بك من مكان واحد.

ما هي الطريقة الصحيحة لإضافة CSS و JavaScript في قالب ووردبريس؟

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

هناك عدة طرق لتضمين كود CSS أو JavaScriptفي موقعك الووردبريس، وفي الواقع الطريقة التي يلجأ لها معظم مطوري القوالب هو تحميل هذه الملفات في ترويسة الموقع (ضمن ملف التمبلت header.php) بالشكل التالي:

<head>
        <title> MY WEB SITE</title>
        <link rel="stylesheet" href="/css/mystyle.css">
        <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>">
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>   
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.js"></script>
    </head>

كما يلجأ معظم المطورين إلى تحميل ملفات جافا سكريبت في تذييل الموقع _قبل وسم إغلاق الـbody_ بدلاً من تحميلها في الترويسة من أجل تسريع القالب وتقليل زمن تحميل صفحات الموقع (ضمن ملف التمبلت footer.php) كما يلي

<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
</body>

لاحظ أننا استخدمنا الدالة get_template_directory_uri() في الكود السابق للحصول على عنوان URL نسبي، التي ترجع لنا عنوان الدليل أو المجلد الحالي الخاص بالقالب الحالي المفعل على موقع الويب.
وكذلك استخدمنا الدالة get_stylesheet_directory_uri() لنفس الغرض فهي كذلك تعيد عنوان دليل ملف تنسيقات القالب الحالي.

لكن يجب الانتباه لأنه في حال كان لديك قالب أب أساسي وقالب ابن فرعي ففي هذه الحالة الدالة get_template_directory_uri تعيد لك دائمًا عنوان دليل القالب الأب، في حين أن الدالة get_stylesheet_directory_uri تعيد لك عنوان دليل ملف تنسيقات القالب الأب أو القالب الابن حسب المكان أو الموضع الذي تستدعى منه.

في الواقع هذه الطريقة في استدعاء الملفات ضمن قوالب ووردبريس ليست الطريقة الموصى بها من قبل WordPress developer وWordPress Codex اللذان يعتبران الموقعين الرسميين لمجتمع مطوري ووردبريس.

فالطريقة الصحيحة الموصى بها لإضافة ملفات جافا سكريبت وملفات تنسيقات CSS إلى قالبك هي من خلال وضعها في رتل الانتظار الذي يوفره ووردبريس ضمن ملف وظائف القالب function.php (وتسمى هذه العملية Enqueue) كما سنشرح بالتفصيل في الفقرات التالية.

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

خطوات إضافة ملفات CSS وJavaScript لقالب ووردبريس من خلال رتل الانتظار

عليك تحميل ملفات التنسيقات وملفات جافا سكريبت في ملف وظائف القالب functions.php ضمن رتل انتظار (Enqueue) لإضافتها إلى كود HTML الخاص بالصفحة عند إنشائها.

ويتم ذلك من خلال الدوال الجاهزة التي توفرها ووردبريس لهذا الأمر وهي:

الدالة wp_enqueue_style(): التي تستخدم لإدراج ملفات CSS في رتل الانتظار.
الدالة wp_enqueue_script(): التي تستخدم لإدراج ملفات JavaScript في رتل الانتظار.

الشكل العام لكتابة الدالة wp_enqueue_style هو كالتالي:

wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )

كما تلاحظ من الكود أعلاه تتضمن هذه الدالة خمس برامترات (أول برامترين إجباريين والبقية اختيارية) وفيما يلي دلالة كل برامتر من بينها:

$ handle هو سلسلة نصية تمثل اسم مميزأو معرف للتنسيق المطلوب.
$ src سلسلة نصية تمثل مسار ملف التنسيق المطلوب.
$ deps هو برامتر اختياري يستخدم في حال كان ملف التنسيقات يعتمد على ملفات أو مكتبات أخرى، في هذه الحالة عليك تمرير هذه التبيعيات بشكل مصفوفة وعندها لن يتم تحميل ملف التنسيق هذا إلا إذا تم تحميل التبيعات الخاصة به أولاً.
$ ver برامتر اختياري يمثل رقم الإصدار الخاص بالتنسيق.
$ media برامتر اختياري يمكنك من خلاله تحديد نوع الوسيط المراد تحميل ملف التنسيقات فيه (العرض على كافة الوسائط، العرض على الشاشات الكبيرة، العرض على الأجهزة المحمولة..)

على سبيل المثال إذا كنت تريد تحميل ملف تنسيقات باسم mystyle.css موجود في مجلد باسم CSS في مجلد للقالب الخاص بك عليك أن تستدعي الدالة بالشكل التالي:

wp_enqueue_style( 'mystyle', get_template_directory_uri() . '/css/mystyle.css',false,'1.0','all');

بينما الشكل العام للدالة wp_enqueue_script هو كما يلي:

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

تتضمن هذه الدالة كذلك خمسة برامترات أول برامترين إجباريين والبقية اختيارية، وفيما يلي دلالة كل برامتر منها:

$ handle هو سلسلة نصية تمثل اسم مميز للسكربت.
$ src سلسلة نصية تمثل مسار ملف جافا سكريبت المطلوب.
$ deps برامتر اختياري يستخدم في حال كان ملف جافا سكريبت يعتمد على ملفات أو مكتبات أخرى في هذه الحالة عليك تمرير هذه التبيعيات بشكل مصفوفة وعندها لن يتم تحميل هذا السكريبت إلا إذا تم تحميل التبيعات الخاصة به أولاً.
$ ver برامتر اختياري يمثل رقم الإصدار.
$ in_footer هو برامتر اختياري يمثل قيمة منطقية إذا كانت قيمتها صحيحة true (وهي القيمة الافتراضية للبرامتر في حال لم تمرر له اي قيمة) عتدها سوف يتم استدعاء السكريبت في تذييل كود HTML الخاص بك، وفي حال كانت قيمتها خطأ false فسوف يتم تحميل السكريبت في ترويسة HTML.

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

  wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js', array ( 'jquery' ), 1.0, true);

أهمية دمج كافة أكواد التنسيقات والسكربتات في دالة واحدة

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

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

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() ); 
  wp_enqueue_style( 'mystyle', get_template_directory_uri() . '/css/mystyle.css', array(), '1.0', 'all');
  wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js', array ( 'jquery' ), 1.0, true);
}

ملاحظة1: بالرغم من أن اسم الخطاف يتضمن scripts إلا أنه يستخدم لإدراج كل من ملفات جافا سكريبت وملفات تنسيقات CSS على حد سواء.

ملاحظة2: في حال كنت تحتاج لتضمين الملفات في الواجهة الخلفية للموقع (أي في صفحات الأدمن) وليس في صفحات الواجهة الأمامية للموقع عندها يمكنك استخدام خطاف الإجراء admin_enqueue_scrips لاستدعاء الدالة add_theme_scripts بالشكل التالي:

add_action( 'admin_enqueue_scrips', 'add_theme_scripts'' );

أما في حال كنت تريد استخدامها في شاشة تسجيل الدخول ففي هذه الحالة استخدم خطاف الإجراء login_enqueue_scripts لاستدعاء الدالة كما يلي:

add_action( 'login_enqueue_scripts', 'add_theme_scripts'' );

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

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

الخلاصة:

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

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

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