Внутри “footer.php”

Но это неправильный способ добавления файлов CSS и JS в очередь вашего проекта WordPress. Чтобы это закрепить, сначала перейдите в файл «functions.php» и поставьте файлы в очередь следующим образом. Давайте посмотрим на трюк с сигмой….

Шаг 1: function.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(); ?>                

Шаг 3: Теперь внутри «footer.php»
Теперь нам нужно использовать wp_footer(); под тегом.

Включение wp_head() и wp_footer() в вашу тему WordPress имеет решающее значение. Эти функции автоматически вставляют необходимые скрипты, стили и метаданные, необходимые для WordPress, тем и плагинов, обеспечивая надлежащую функциональность, совместимость и производительность. wp_head() добавляет необходимые элементы в раздел для SEO, а wp_footer() включает в конце скрипты для отсрочки некритического JavaScript, улучшая скорость загрузки страницы. Эти функции жизненно важны для интеграции плагинов и динамической настройки тем, а также для правильного размещения кодов аналитики и отслеживания.

","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 для повышения производительности

Опубликовано 4 ноября 2024 г.
Просматривать:209

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: function.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(); ?>

Шаг 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