더 나은 성능을 위해 WordPress에서 CSS 및 JS 스크립트를 대기열에 추가-PHP 튜토리얼-php.cn

더 나은 성능을 위해 WordPress에서 CSS 및 JS 스크립트를 대기열에 추가

WBOY

풀어 주다： 2024-08-22 06:34:39

원래의

318명이 탐색했습니다.

Enqueue CSS and JS Scripts in WordPress for Better Performance

WordPress는 오픈 소스 소프트웨어이므로 사용자가 원하는 대로 설치, 수정, 배포할 수 있습니다. 소스 코드는 누구나 액세스할 수 있으므로 수백만 명의 WordPress 전문가와 개발자가 도구와 확장 기능을 만들어 대중과 공유할 수 있습니다.

CSS 및 JS 파일을 wordpress 프로젝트에 추가하는 방법을 살펴보겠습니다.

신입 개발자 대부분이 좋아합니다

“header.php” 내부

<head>
    <title><?php echo get_bloginfo(); ?></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="<?php echo get_template_directory_uri(); ?>/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/assets/css/custom.css" rel="stylesheet" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/font-awesome-all.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
</head>

로그인 후 복사

내부 “footer.php”

<footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/font-awesome-all.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
</footer>

로그인 후 복사

그러나 이는 WordPress 프로젝트 내에서 CSS 및 JS 파일을 대기열에 추가하는 적절한 방법이 아닙니다. 도킹하려면 먼저 "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/aos@2.3.1/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의 비압축 버전을 제공합니다. 따라서 필요한 js 파일 내에서 해당 jquery를 간단히 사용할 수 있습니다! 이를 위해서는 간단히 “wp_eneueue_script” 내에 array('jquery') 매개변수를 전달하면 됩니다. 기억해야 할 한 가지는 JQuery에는 압축되지 않은 버전과 압축된 버전의 두 가지 주요 버전이 있다는 것입니다. 압축되지 않은 버전에서는 AJAX가 제대로 작동하지 않습니다.

2단계: 이제 "header.php" 내부
이제 wp_head()를 사용해야 합니다.

태그
아래에 함수가 있습니다.

<head>
    <title><?php echo get_bloginfo(); ?></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>

로그인 후 복사

3단계: 이제 “footer.php” 내부
이제 wp_footer()를 사용해야 합니다. 태그 아래에 있습니다.

<?php wp_footer(); ?>
</body>

로그인 후 복사

WordPress 테마에 wp_head() 및 wp_footer()를 포함하는 것이 중요합니다. 이러한 기능은 WordPress, 테마 및 플러그인에 필요한 필수 스크립트, 스타일 및 메타데이터를 자동으로 삽입하여 적절한 기능, 호환성 및 성능을 보장합니다. wp_head()는 SEO를 위해 섹션 내에 필요한 요소를 추가하는 반면, wp_footer()는 중요하지 않은 JavaScript를 연기하기 위해 끝에 스크립트를 포함하여 페이지 로드 속도를 향상시킵니다. 이러한 기능은 플러그인 통합과 동적 테마 사용자 정의는 물론 분석 및 추적 코드의 올바른 배치에 필수적입니다.

위 내용은 더 나은 성능을 위해 WordPress에서 CSS 및 JS 스크립트를 대기열에 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!