wp_enqueue_scripts – كيفية إدراج أصولك في قائمة الانتظار في وورد بريس

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

كيف يعمل Enqueueing

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

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

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

أساسيات قائمة الانتظار باستخدام wp_enqueue_scripts

لإدراج النصوص والأنماط في الواجهة الأمامية ، ستحتاج إلى استخدام wp_enqueue_scriptsالخطاف. ضمن الدالة مدمن مخدرات يمكنك استخدام wp_register_script()، wp_enqueue_script()، wp_register_style()و wp_enqueue_style()ظائف.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );
}

في المثال أعلاه ، قمت بتسجيل الأصول وإدراجها في قائمة الانتظار في نفس الوظيفة ، وهي زائدة عن الحاجة إلى حد ما. في الواقع ، يمكنك استخدام وظائف enqueue للتسجيل والإدراج على الفور ، باستخدام نفس الوسائط كما تفعل في وظائف التسجيل:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );
}

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

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

}

add_shortcode( 'custom_gallery', 'custom_gallery' );

function custom_gallery( $atts ){

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );

    // Gallery code here
}

إدارة التبعية

وقد بنيت في آلية enqueueing وورد “دعم إدارة الاعتماد، وذلك باستخدام الوسيطة الثالثة كل من wp_register_style()و wp_register_script()ظائف. يمكنك أيضًا استخدام وظائف قائمة الانتظار على الفور إذا لم تكن بحاجة إلى فصلها.

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

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
}

لا نحتاج إلى التسجيل أو إدراج jQuery بأنفسنا لأنه بالفعل جزء من وورد بريس. يمكنك العثور على قائمة بالنصوص والأنماط المتوفرة في وورد بريس في Codex.

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

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );
}

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

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

تحميل البرامج النصية في التذييل

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

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

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );
}

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

تحديد الوسائط للأنماط

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

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );

}

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

ملخص

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

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

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

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