WordPress는 JavaScript를 어떻게 적절하게 도입합니까?JS 및 CSS 파일의 사용자 정의 로드

WordPress를 사용하여 웹사이트를 구축하는 프로그래머는 WordPress 플러그인을 개발 하거나 WordPress 테마를 사용자 정의할 때 일부 JavaScript 및 CSS 스크립트 리소스를 참조합니다.

• 일반적으로 사람들은 링크, 스크립트 태그를 HTML에 직접 사용합니다.
• 사실 워드프레스에는 스크립트 참조를 위한 정교한 기능과 방법이 내장되어 있습니다.
• 따라서 WordPress의 기본 제공 메서드 참조를 사용하는 것이 더 전문적이고 확장 가능합니다.

잘못된 인용 방식

두 가지 일반적인 인용 방법이 있습니다. 괜찮습니다. 완벽하지 않거나 합리적이지 않습니다.

방법 1: 링크 태그를 사용하여 CSS 파일을 참조하는 방법

• 스크립트 태그는 JS 파일을 적용합니다.여기에서는 자세히 설명하지 않습니다.

방법 2: wp_head 함수 사용

• wp_head 함수는 일부 사용자 정의 또는 시스템 정의 컨텐츠를 출력하는 데 사용됩니다.
• 때때로 다음 코드를 사용하여 이 파일을 참조합니다.

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• 위의 코드를 functions.php 파일에 복사하여 해당 파일을 참조하십시오.

WordPress Enqueue 스크립트 리소스 메커니즘

우리 모두 알고 있듯이 WordPress에는 많은 플러그인이 있습니다.

• 거의 모든 플러그인은 일부 리소스 파일을 참조합니다.
• 불가피하게 두 플러그인에서 참조하는 리소스 간에 충돌이 발생하여 불안정해지고 효율성에 영향을 줄 수 있습니다.

wp_enqueue_script 함수 사용

• WordPress에서 리소스를 참조하려면 다음을 사용해야 합니다.wp_enqueue_script대기열에 넣거나 정렬된 함수의 이름에 enqueue라는 단어가 있는 함수입니다.
• 워드프레스의 리소스 인큐(Enqueue Scripts) 방식을 사용하면 참조가 해당 파일 및 코어 코드와 분리됩니다.
• 사용자가 리소스를 비활성화하려는 경우 핵심 코드에서 수정하지 않고 리소스를 삭제, 수정 및 주석 처리할 수 있습니다.

또한 jQuery, jQuery UI 등과 같이 일반적으로 사용되는 일부 라이브러리가 WordPress에 내장되어 있습니다.

wp_enqueue_script 함수를 사용하여 내장 라이브러리를 직접 호출할 수 있습니다. 그러면 코드와 더 명확한 사양이 절약됩니다.

이 함수를 사용하여 자신의 JS 및 CSS 파일을 참조하려면 다음을 사용해야 합니다.wp_register_script함수는 식별자(핸들)를 등록한 다음 다음을 사용합니다.wp_enqueue_script함수는 이 플래그에 해당하는 리소스를 호출합니다.

WordPress에서 JS 및 CSS 파일을 올바르게 가져오는 방법은 무엇입니까?

WordPress는 JS 및 CSS 메서드에 대한 합리적인 가져오기 메서드를 제공합니다.

다음 코드를 사용하여 plugin.css 파일을 플러그인으로 가져올 수 있습니다 ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

위의 내용은 wp_register_script 함수를 사용하여 식별자가 plugin_stylesheet인 리소스를 생성합니다.

그런 다음 대기 중인 요청을 다음에 추가합니다.wp_enqueue_scripts조치를 시행하고 있습니다.

함수 이름은 스크립트이지만 리소스 파일의 유형과 관련이 없으며 CSS와 JS 모두에 유효합니다.

wp_register_script 함수는 실제로 그렇게 간단하지 않으며 XNUMX개의 매개변수를 가질 수 있습니다.

1) $handle: 리소스 식별자.

• 由wp_enqueue_script옮기다.

2) $src: 리소스의 위치입니다.

• 상대 또는 절대 주소는 WordPress 내장 함수를 사용하여 주소 등을 가져옵니다.
• 흔한포지셔닝기능이plugins_url,get_template_directory_uri기다림.

3) $deps: 종속성.

• jQuery 플러그인을 참조하고 jQuery에 의존하여 빌드해야 하는 경우 jQuery를 채워야 합니다.
• 배열로 전달됩니다.

4) $ver: 리소스 버전(선택 사항).

5) $in_footer: 하단에 배치해야 할까요?

• 일반적으로 JS 파일은 페이지 하단에 배치해야 합니다. 이 매개변수를 True로 설정하고 비워두거나 False로 설정하여 상단으로 출력할 수 있습니다.

좀 더 완전한 자바스크립트 파일 참조 예시를 살펴보자 ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

WordPress 테마는 wp_enqueue_script를 사용하여 리소스를 가져옵니다.

WordPress 테마 개발의 프로그래머, 사용wp_enqueue_script리소스를 가져옵니다.

• 위의 예시는 워드프레스 플러그인 개발을 위한 참고자료 예시입니다.
• 항목에서 참조하는 방법은 유사합니다.

주요 차이점은 해당 기능을 사용하여 테마 디렉토리를 가져와 테마 아래의 리소스 파일 주소를 가져오는 것입니다.

당신이 사용할 수있는get_template_directory_uri현재 테마 디렉토리를 가져오는 함수입니다.

하위 테마를 사용하는 경우 다음을 사용해야 합니다.get_stylesheet_directory_uri함수는 해당 리소스를 가져오기 위해 상위 테마의 디렉터리를 가져옵니다.