WordPress_javascript 기술로 JavaScript 스크립트를 로드하는 방법을 빠르게 마스터하세요.

워드프레스에서 스크립트(CSS 및 JS, 아래와 동일) 파일을 로드하기 위해 대부분의 사람들의 접근 방식은 링크 태그를 header.php 파일에 직접 추가하거나 wp_head 후크를 통해 링크 태그를 head 태그에 직접 추가하는 것입니다. . 이 관행은 공식 규범에 위배됩니다.

표준적인 스크립트 로딩 방법은 WordPress에서 공식적으로 제공하는 기능을 사용하는 것입니다(나중에 설명합니다). 표준을 통합하면 첫 번째는 더 안전하고 관리하기 쉽다는 것입니다. 더욱 편리하고 빠르며, 테마 탑재뿐만 아니라 스크립트, 플러그인도 사용할 수 있으며, 스크립트 관리, 탑재 순서 및 위치 조정, 기타 콘텐츠 조정도 가능합니다.

어느 후크에 로드되나요?

로딩 스크립트 함수를 호출하기 전에 먼저 함수가 실행되는 후크를 결정해야 합니다. 일반적으로 사용되는 스크립트 로딩 후크에는 wp_enqueue_scripts(포그라운드에서 로드), admin_enqueue_scripts(백그라운드에서 로드), login_enqueue_scripts( 로그인 페이지 로드) 및 init(글로벌 로드).

가장 일반적으로 사용되는 것은 아마도 wp_enqueue_scripts일 것입니다. 여기에 마운트하면 스크립트가 포그라운드에서만 로드됩니다.

자바스크립트 스크립트 로드

예를 들어 테마 루트 디렉터리의 JS 폴더에 있는 themes.js 파일인 JS를 포그라운드에 로드하려고 합니다. 먼저 wp_register_script() 함수를 사용하여 JS를 스크립트 라이브러리에 추가(스크립트 등록)한 다음 wp_enqueue_script() 함수를 사용하여 스크립트를 마운트해야 합니다.

function Bing_enqueue_scripts(){
  wp_register_script( 'themes_js', get_bloginfo( 'template_directory' ) . '/js/themes_js.js' );//注册 ID 为 themes_js 的 JS 脚本
  wp_enqueue_script( 'themes_js' );//挂载脚本
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

CSS 스크립트 로드

function Bing_enqueue_scripts(){
  wp_register_style( 'style', get_bloginfo( 'template_directory' ) . '/style.css' );
  wp_enqueue_style( 'style' );
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

요약

이 기사에서는 스크립트를 로드하는 방법만 간략하게 설명합니다. 스크립트 대기열 메커니즘을 올바르게 사용하면 프로그램을 더욱 유연하게 만들고 효율성을 높일 수 있습니다.