WordPress에서 JS 파일과 CSS 파일을 올바르게 로드하는 방법

워드프레스 테마 몽키 워드프레스 플러그인을 만드는 과정에서 스타일 파일이나 js 스크립트 파일을 추가해야 하는 경우가 많습니다. 대부분의 사용자가 웹사이트에서 여러 플러그인을 실행하기 때문에 다양한 파일이 로드될 수 있으며 이로 인해 쉽게 오류가 발생할 수 있습니다. 따라서 WordPress 시스템은 개발자에게 스크립트 및 스타일 파일에 대한 우수한 대기열 시스템을 제공하여 플러그인 간의 스크립트 충돌을 방지하는 데 도움이 됩니다. 이번 글에서는 워드프레스에 자바스크립트 파일과 CSS 파일을 추가하는 방법을 주로 소개합니다. 특히 워드프레스 테마와 플러그인 개발을 이제 막 배우기 시작하는 분들에게 유용합니다.

잘못된 방법

Wordpress는 일반적인 키워드 및 설명과 같은 지정된 헤더 메시지를 페이지 헤드에 추가하는 데 도움이 되는 wp_head 후크를 제공합니다. 사이트의 외부 스타일 파일과 스크립트 파일을 추가하는 방법은 다음과 같습니다.

add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo '
'; //添加js文件
}
?>

이 방법은 사용하기 쉽지만 권장되지 않습니다. 워드프레스 스크립트.

Wordpress 스크립트 대기열 시스템

1. 소개

Wordpress는 전 세계적으로 강력한 개발 커뮤니티를 보유하고 있으며 많은 사람들이 WordPress 테마 및 플러그 개발에 매우 ​​적극적으로 참여하고 있습니다. -ins.이 있으며 무료로 사용할 수 있습니다. 다양한 개발자가 개발한 플러그인을 사용할 때 스크립트 충돌이 발생하는 것을 방지하기 위해 WordPress에서는 매우 강력한 스크립트 로딩 기능인 wp_enqueue_script를 제공합니다. 스크립트를 로드할 위치, 스크립트가 의존하는 프레임워크, 이 함수가 내장된 Javascript 라이브러리를 사용하면 동일한 스크립트를 여러 번 로드하는 것을 피할 수 있습니다. 이를 통해 페이지 로드 시간을 줄이고 다른 테마 및 플러그인과의 충돌을 방지할 수 있습니다.

2. 사용 예

워드프레스 올바른 로딩 스크립트를 사용하는 방법은 매우 간단합니다.

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

위 코드를 플러그인 파일 또는 테마의 function.php 파일.

참고:

예제에서는 먼저 5개의 매개변수를 받는 wp_register_script() 함수를 전달합니다.

$handle
(string) (必须) 脚本名称. 名称必须唯一在之后函数 wp_enqueue_script() 会使用到该名称.
Default: None
$src
(string) (必须) 脚本路径，可以使用绝对路径。
Default: None
$deps
(array) (可选) 脚本依赖包，依赖包会在脚本加载之前预先加载。
Default: array()
$ver
(string) (可选)脚本版本控制。
Default: false
$in_footer
(boolean) (可选) 定义脚本的位置，如果为true脚本会在页面底部加载，默认在head头部加载。
Default: false

wp_register_script() 함수를 사용하여 스크립트 파일을 등록한 후 wp_enqueue_script() 함수를 사용하여 등록된 스크립트 파일을 로드할 수 있습니다.

왜 스크립트 파일을 직접 로드하지 않느냐고 하시는 분들이 계시는데, 먼저 등록하신 후 로드하시는 것이 불필요한 것 아닌가요? 실제로 이는 주로 사이트의 다른 개발자가 다른 플러그인이나 테마의 핵심 스크립트 파일을 쉽게 참조할 수 있도록 하기 위한 것입니다.

워드프레스가 CSS 스타일 파일을 로드하는 방법

워드프레스 CSS 스타일 파일을 로드하는 방법은 위에서 소개한 스크립트 파일 로드 방법과 동일하며 아래와 같습니다.

function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>

위의 예에서는 스타일 파일을 로드하기 위해 wp_register_script 후크도 사용합니다.

예제에서는 스타일 파일의 경로를 얻기 위해 플러그인_url()을 사용했습니다. 이는 일반적으로 플러그인 개발 프로세스에서 사용되며 wp_register_script() 함수를 사용합니다. get_template_directory_uri()를 사용하여 스타일 파일 경로를 얻으려면 하위 테마에서 사용하는 경우 get_stylesheet_directory_uri() 함수를 사용하여 경로를 얻을 수 있습니다.

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

을 통해. 위의 분석을 통해 WordPress에 Javascript 파일을 추가할 수 있기를 바라며 CSS 파일에 대한 새로운 이해가 생겼습니다.