WordPress에서 JavaScript 및 스타일을 올바르게 추가하는 방법

WordPress에 JavaScript 및 CSS 스타일 시트를 올바르게 추가하는 방법을 배우고 싶습니까? 많은 DIY 사용자는 종종 플러그인과 테마에서 스크립트와 스타일 시트를 직접 호출하는 실수를합니다. 이 기사에서는 WordPress에 JavaScript 및 스타일 시트를 올바르게 추가하는 방법을 보여줍니다. 이것은 WordPress 테마 및 플러그인 개발을 배우기 시작한 사람들에게 특히 유용합니다..


WordPress에서 JavaScript 및 스타일을 올바르게 추가

WordPress에서 스크립트 및 스타일 시트를 추가 할 때의 일반적인 실수

많은 새로운 WordPress 플러그인 및 테마 개발자는 플러그인 또는 테마에 스크립트 또는 인라인 CSS를 직접 추가하는 실수를합니다..

일부는 실수로 wp_head 함수를 사용하여 스크립트 및 스타일 시트를로드합니다..

<?PHP
add_action ( ‘wp_head’, ‘wpb_bad_script’);
기능 wpb_bad_script () {
에코 ‘jQuery가 여기에 간다’;
}
?>

위의 코드는 더 쉬워 보일 수 있지만 WordPress에 스크립트를 추가하는 잘못된 방법이며 앞으로 더 많은 충돌이 발생합니다..

예를 들어, jQuery를 수동으로로드하고 다른 플러그인이 적절한 메소드를 통해 jQuery를로드하면 jQuery가 두 번로드됩니다. 모든 페이지에로드되면 WordPress 속도 및 성능에 부정적인 영향을 미칩니다.

또한 두 버전이 충돌 할 수있는 다른 버전 일 수도 있습니다..

즉, 스크립트와 스타일 시트를 추가하는 올바른 방법을 살펴 보겠습니다.

WordPress에서 스크립트 및 스타일을 큐에 넣는 이유?

WordPress에는 강력한 개발자 커뮤니티가 있습니다. 전 세계 수천 명의 사람들이 WordPress의 테마와 플러그인을 개발합니다.

모든 것이 올바르게 작동하고 아무도 발가락을 밟지 않도록 WordPress에는 대기 시스템이 있습니다. 이 시스템은 프로그래밍 가능한 JavaScript 및 CSS 스타일 시트로드 방법을 제공합니다.

wp_enqueue_script 및 wp_enqueue_style 함수를 사용하면 파일을로드 할시기,로드 위치 및 종속 항목이 무엇인지 WordPress에 알립니다..

이 시스템을 통해 개발자는 동일한 타사 스크립트를 여러 번로드하는 대신 WordPress와 함께 제공되는 내장 JavaScript 라이브러리를 활용할 수 있습니다. 이렇게하면 페이지로드 시간이 줄어들고 다른 테마 및 플러그인과의 충돌을 피할 수 있습니다.

WordPress에서 스크립트를 올바르게 대기열에 넣는 방법?

WordPress에서 스크립트를 올바르게로드하는 것은 매우 쉽습니다. 다음은 플러그인 파일 또는 테마의 functions.php 파일에 붙여 넣어 WordPress에 스크립트를 올바르게로드하는 예제 코드입니다..

?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’);
?>

설명:

wp_register_script () 함수를 통해 스크립트를 등록하는 것으로 시작했습니다. 이 함수는 5 개의 매개 변수를 허용합니다.

  • $ 핸들 – Handle은 스크립트의 고유 이름입니다. 우리는 “my_amazing_script”라고합니다
  • $ src – src는 스크립트의 위치입니다. plugins_url 함수를 사용하여 플러그인 폴더의 올바른 URL을 가져옵니다. 워드 프레스가 발견하면 해당 폴더에서 파일 이름 amazing_script.js를 찾습니다..
  • $ deps – deps는 종속성을위한 것입니다. 스크립트가 jQuery를 사용하므로 의존성 영역에 jQuery를 추가했습니다. 사이트에 아직로드되지 않은 경우 WordPress에서 자동으로 jQuery를로드합니다..
  • $ ver – 이것은 스크립트의 버전 번호입니다. 이 매개 변수는 필요하지 않습니다.
  • $ in_footer – 바닥 글에 스크립트를로드하려고하므로 값을 true로 설정했습니다. 헤더에 스크립트를로드하려면 거짓으로 만듭니다..

wp_register_script에서 모든 매개 변수를 제공 한 후 wp_enqueue_script ()에서 스크립트를 호출하면 모든 것이 가능해집니다..

마지막 단계는 wp_enqueue_scripts 조치 후크를 사용하여 실제로 스크립트를로드하는 것입니다. 이것은 예제 코드이므로 다른 모든 것 바로 아래에 추가했습니다..

이것을 테마 나 플러그인에 추가했다면 스크립트가 실제로 필요한 곳에이 동작 후크를 놓을 수 있습니다. 이를 통해 플러그인의 메모리 사용량을 줄일 수 있습니다.

이제 왜 스크립트를 먼저 등록한 다음 대기열에 추가 단계를 추가해야하는지 궁금 할 것입니다. 다른 사이트 소유자는 플러그인의 핵심 코드를 수정하지 않고도 스크립트를 등록 취소 할 수 있습니다..

WordPress에서 스타일을 올바르게 포함

스크립트와 마찬가지로 스타일 시트를 큐에 넣을 수도 있습니다. 아래 예를보십시오.

<?PHP
기능 wpb_adding_styles () {
wp_register_style ( ‘my_stylesheet’, plugins_url ( ‘my-stylesheet.css’, __FILE__));
wp_enqueue_style ( ‘my_stylesheet’);
}
add_action ( ‘wp_enqueue_scripts’, ‘wpb_adding_styles’);
?>

wp_enqueue_script를 사용하는 대신 이제 wp_enqueue_style을 사용하여 스타일 시트를 추가합니다..

스타일과 스크립트 모두에 wp_enqueue_scripts 액션 훅을 사용했습니다. 이름에도 불구하고이 기능은.

위의 예에서, 우리는 plugins_url 함수를 사용하여 우리가 대기열에 넣을 스크립트 또는 스타일의 위치를 ​​가리 켰습니다..

그러나 테마에서 enqueue 스크립트 함수를 사용하는 경우 get_template_directory_uri ()를 대신 사용하십시오. 하위 테마로 작업하는 경우 get_stylesheet_directory_uri ()를 사용하십시오..

아래는 예제 코드입니다.

<?PHP

기능 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’);
?>

이 기사가 워드 프레스에 jacvascript와 스타일을 올바르게 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. 실제 코드 예제를 위해 최상위 WordPress 플러그인의 소스 코드를 연구 할 수도 있습니다..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map