داخل \\\"footer.php\\\"

لكن هذه ليست الطريقة الصحيحة لإدراج ملفات CSS وJS داخل مشروع WordPress الخاص بك. لإرساء ذلك، انتقل أولاً إلى ملف \\\"functions.php\\\" الخاص بك وقم بوضع الملفات في قائمة الانتظار بهذه الطريقة. دعونا نرى خدعة سيجما….

الخطوة 1: jobs.php

function my_theme_enqueue_styles_scripts() {    // Enqueue CSS files    wp_enqueue_style(\\'bootstrap-css\\', get_template_directory_uri() . \\'/assets/css/bootstrap.min.css\\');    wp_enqueue_style(\\'aos-css\\', \\'https://unpkg.com/[email protected]/dist/aos.css\\');    wp_enqueue_style(\\'custom-css\\', get_template_directory_uri() . \\'/assets/css/custom.css\\');    // Enqueue default Jquery in wordpress.    wp_enqueue_script(\\'jquery\\');    wp_enqueue_script(\\'bootstrap-js\\', get_template_directory_uri() . \\'/assets/js/bootstrap.bundle.min.js\\', array(\\'jquery\\'), null, true);    wp_enqueue_script(\\'font-awesome-js\\', get_template_directory_uri() . \\'/assets/js/font-awesome-all.min.js\\', array(), null, true);    wp_enqueue_script(\\'custom-js\\', get_template_directory_uri() . \\'/assets/js/custom.js\\', array(\\'jquery\\'), null, true);}add_action(\\'wp_enqueue_scripts\\', \\'my_theme_enqueue_styles_scripts\\');

ملاحظة: يوفر WordPress نسخة غير مضغوطة من jquery. لذلك يمكننا ببساطة استخدام هذا jquery داخل ملفات js المطلوبة! لذلك يمكنك ببساطة تمرير المعلمة array('jquery') داخل \\\"wp_eneueue_script\\\" . شيء واحد يجب تذكره هو أن JQuery له إصداران رئيسيان: غير مضغوط ومضغوط. داخل النسخة غير المضغوطة، لن يعمل AJAX بشكل صحيح.

الخطوة 2: الآن داخل “header.php”الآن، نحن بحاجة إلى استخدام wp_head(); تعمل ضمن علامات
.


<الرأس> <?php echo get_bloginfo(); ?></العنوان> <ميتا محارف = \\\"utf-8\\\"> <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\"> <meta name=\\\"viewport\\\" content=\\\"width=device-width, original-scale=1.0\\\"> <?php wp_head(); ?></الرأس><pre class=\\\"brush:php;toolbar:false\\\"><head> <title><?php echo get_bloginfo(); ?>

الخطوة 3: الآن داخل “footer.php”الآن، نحن بحاجة إلى استخدام wp_footer(); تحت الوسم.

يعد تضمين

wp_head() وwp_footer() في قالب WordPress الخاص بك أمرًا بالغ الأهمية. تقوم هذه الوظائف تلقائيًا بإدراج البرامج النصية والأنماط والبيانات الوصفية الأساسية التي يتطلبها WordPress والموضوعات والمكونات الإضافية ، مما يضمن الأداء الوظيفي والتوافق والأداء المناسب. يضيف wp_head() العناصر الضرورية داخل قسم لـ SEO، بينما يتضمن wp_footer() نصوص برمجية في النهاية لتأجيل جافا سكريبت غير المهمة، مما يحسن سرعة تحميل الصفحة. تعتبر هذه الوظائف حيوية لتكامل المكونات الإضافية وتخصيصات السمات الديناميكية، بالإضافة إلى الموضع الصحيح للتحليلات وأكواد التتبع.

","image":"http://www.luping.net/uploads/20240929/172757700566f8bbad10cf2.jpg","datePublished":"2024-11-04T20:05:55+08:00","dateModified":"2024-11-04T20:05:55+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > قم بإدراج نصوص CSS وJS في WordPress للحصول على أداء أفضل

قم بإدراج نصوص CSS وJS في WordPress للحصول على أداء أفضل

تم النشر بتاريخ 2024-11-04
تصفح:592

Enqueue CSS and JS Scripts in WordPress for Better Performance

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

دعونا نرى كيفية إدراج ملفات CSS وJS في مشروع Wordpress الخاص بك.

معظم المطورين الجدد يحبون،

داخل "header.php"

    <?php echo get_bloginfo(); ?>
    
    
    
    
    
    

    
    
    
    

داخل "footer.php"

لكن هذه ليست الطريقة الصحيحة لإدراج ملفات CSS وJS داخل مشروع WordPress الخاص بك. لإرساء ذلك، انتقل أولاً إلى ملف "functions.php" الخاص بك وقم بوضع الملفات في قائمة الانتظار بهذه الطريقة. دعونا نرى خدعة سيجما….

الخطوة 1: jobs.php

function my_theme_enqueue_styles_scripts() {
    // Enqueue CSS files
    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css');
    wp_enqueue_style('aos-css', 'https://unpkg.com/[email protected]/dist/aos.css');
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/custom.css');

    // Enqueue default Jquery in wordpress.
    wp_enqueue_script('jquery');

    wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', array('jquery'), null, true);
    wp_enqueue_script('font-awesome-js', get_template_directory_uri() . '/assets/js/font-awesome-all.min.js', array(), null, true);
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles_scripts');

ملاحظة: يوفر WordPress نسخة غير مضغوطة من jquery. لذلك يمكننا ببساطة استخدام هذا jquery داخل ملفات js المطلوبة! لذلك يمكنك ببساطة تمرير المعلمة array('jquery') داخل "wp_eneueue_script" . شيء واحد يجب تذكره هو أن JQuery له إصداران رئيسيان: غير مضغوط ومضغوط. داخل النسخة غير المضغوطة، لن يعمل AJAX بشكل صحيح.

الخطوة 2: الآن داخل “header.php” الآن، نحن بحاجة إلى استخدام wp_head(); تعمل ضمن علامات
.


<?php echo get_bloginfo(); ?>العنوان> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, original-scale=1.0"> <?php wp_head(); ?> الرأس> <pre class="brush:php;toolbar:false"> <title><?php echo get_bloginfo(); ?>

الخطوة 3: الآن داخل “footer.php” الآن، نحن بحاجة إلى استخدام wp_footer(); تحت الوسم.

الجسم>

بيان الافراج تم إعادة نشر هذه المقالة على: https://dev.to/shimanta_microcodes/enqueue-css-and-js-scripts-in-wordpress-for-better-performance-32ao?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ Study_golang@163 .com لحذفه
أحدث البرنامج التعليمي أكثر>

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

Copyright© 2022 湘ICP备2022001581号-3