WordPress에 JavaScript 및 스타일을 올바르게 추가하는 방법
게시 됨: 2021-08-02
이 기사에서는 WordPress에 JavaScript와 스타일을 적절하게 추가하는 방법을 볼 것입니다.
자신의 웹사이트 전용으로 코드를 작성하고 플러그인을 개발하거나 다양한 시장에서 판매하여 상당한 수익을 얻고자 하는 새로운 WordPress 개발자가 많이 있습니다.
코드를 작성하는 방법은 다양하지만 효율적으로 코드를 작성하는 방법은 선택되어 있을 뿐입니다.
코드를 10줄이 아닌 2줄로 작성할 수 있다면 처리량과 메모리를 많이 절약할 수 있습니다.
작고 가벼운 웹 사이트에는 중요하지 않지만 무거운 웹 사이트에는 많은 의미가 있을 수 있습니다.
선명한 코드를 작성하지 않고 가용 자원을 효율적으로 사용하면 다른 프로그램과 많은 충돌을 일으키게 됩니다.
예를 들어 플러그인을 위해 WordPress에서 외부 기성 자바스크립트를 로드하는 다양한 방법이 있습니다.
그러나 적절한 표준을 따르지 않으면 활성화된 모든 플러그인이 심하게 걸릴 수 있습니다.
이 기사는 주로 WordPress 테마 및 플러그인을 개발하려는 새로운 WordPress 개발자를 위한 것입니다.
코드를 제대로 작성하지 않으면 코드가 프로답지 못하며, 당신이 만든 어떤 제품도 개념이 아무리 좋아도 결코 받아들여지지 않을 것입니다.
따라서 WordPress에서 JavaScript 및 스타일을 올바르게 추가하는 방법 을 아는 것이 좋습니다.
JavaScript 추가의 실수
WordPress에 웹사이트의 헤더 섹션에 있는 모든 항목을 로드하는 데 도움이 되는 wp_head라는 기능이 있다는 사실을 알고 있는 사람도 있을 것입니다.
스크립트 파일에 다음 코드 줄을 추가하기만 하면 모든 것이 헤더에 표시됩니다.
add_action('wp_head', 'wpb_bad_script');
함수 wpb_bad_script() {
echo '제이쿼리가 여기에 갑니다';
}
이것은 물건을 추가하는 지름길이지만 최선의 방법은 아닙니다. 지름길을 버리고 적절한 표준을 따라야 하며 이것이 이 그림의 요점입니다.
예를 들어 플러그인에서 수동으로 JQuery를 로드하고 다른 개발자도 동일한 JQuery를 수동으로 또는 적절한 표준을 통해 로드합니다. 사람이 두 플러그인을 모두 활성화했다면 JQuery가 메모리에 두 번 로드되어 낭비입니다.
또한 로드된 JQuery의 버전이 다른 경우 충돌로 인해 플러그인에 많은 결함이 있습니다. 코드를 작성하기 전에 WordPress에 JavaScript와 스타일을 올바르게 추가하는 방법 을 알아야 합니다.
이러한 실수를 피하는 방법 – Enqueue 기능의 개념?
아시다시피 WordPress 개발자 커뮤니티는 크고 강력한 커뮤니티입니다. 말 그대로 매일 수천 명의 개발자가 새로운 테마와 플러그인을 개발하고 있습니다.
그러나 그들이 서로의 코딩 방식과 충돌이 없도록 하기 위해 하는 일은 enqueue 스크립트 기능에 의한 것입니다.
워드프레스에서 자바스크립트와 스타일을 적절히 추가 하여 충돌이나 불필요한 메모리 차단이 없도록 하는 기능입니다.
JavaScript 및 스타일을 로드하는 체계적인 방법을 보장합니다. qp_enquque_function 함수는 JavaScript와 스타일을 로드할 때, 로드할 위치, 특히 어떤 조건에서 로드할 것인지 Wordless에 알려줍니다.
이들의 도움으로 JQuery 및 이와 유사한 것을 수동으로 로드할 필요가 없으므로 동일한 파일을 반복해서 로드하기 때문에 메모리 차단 상태가 발생하지 않습니다.
그 이유는 Enqueue 기능을 사용하면 WordPress 자체와 함께 제공되는 내장 라이브러리를 사용할 수 있기 때문입니다. 또한 JavaScript의 수동 로드가 없기 때문에 느린 페이지 로드 시간의 부담을 줄일 수 있습니다.
WordPress에서 JavaScript 및 스타일을 올바르게 추가 하는 단계-
1. WordPress의 대기열에 스크립트
다음 코드 줄은 WordPress와 함께 제공되는 내장 JavaScript 번들을 로드합니다. 플러그인을 생성할 때 플러그인 파일에 이 라인을 배치해야 하거나 테마를 생성하는 경우 functions.php에 배치해야 합니다.
함수 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' );
코드 설명
스크립트는 5개의 다른 매개변수가 있는 wp_register_script() 함수를 통해 등록됩니다.
1. $handle – 스크립트의 고유한 이름입니다. 여기 'my_amazing_script'가 있습니다.
2. $src – 스크립트의 위치를 정의합니다. 라이브러리 함수 plugins_url은 플러그인 폴더의 적절한 URL을 가져옵니다. 가져온 후에는 그 안에 놀라운_script.js 파일을 찾기 시작합니다.
3. $deps – 의존성을 정의합니다. WordPress에 Jquery와 같은 라이브러리 스크립트를 로드하도록 요청할 때 추가해야 합니다.
스크립트가 이미 메모리에 로드되어 있으면 다시 로드되지 않고 새로운 로드가 발생합니다. 이것은 충돌, 메모리 차단 및 시간 낭비를 방지합니다.
4. $ver – 스크립트의 버전 번호를 정의합니다. 필수 사항은 아닙니다.
5. $in_footer - 바닥글에 스크립트를 로드하는 데 사용됩니다. 헤더에 스크립트를 로드하려면 false로 유지해야 합니다.
모든 것이 정의되면 wp_enqueue_script()를 사용하여 스크립트를 호출하면 됩니다.
2. WordPress의 큐에 스타일 추가
JavaScript와 마찬가지로 스타일시트를 큐에 넣어야 합니다. 테마 생성을 위해 플러그인 파일 또는 functions.php 파일에서 다음 코드를 사용하십시오.
함수 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' );
위의 코드는 플러그인을 생성할 때 적합합니다. 테마를 생성할 때 plugins_url()을 get_template_directory_uri()로 변경해야 합니다. 나머지 사항은 동일하게 유지됩니다.
함수 wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
자식 테마를 만드는 경우 get_template_directory_uri() 대신 get_stylesheet_direcroy_uri()를 사용해야 합니다.
이것은 WordPress에서 JavaScript와 스타일을 적절하게 추가하는 표준 방법입니다.
플러그인 또는 테마에 결함이 있는 경우 위에서 언급한 코드 행으로 해당 코드를 수정해야 결함이 해결될 수 있습니다.
다른 성공적인 개발자와 같은 페이지에 있기 위해 항상 전 세계에서 따르는 코딩 표준을 따르십시오.