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

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

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

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

“header.php” 내부

내부“footer.php”

그러나 이는 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()를 사용해야 합니다.

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

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

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