WordPress에 인라인 스크립트를 추가하는 가장 효과적인 방법

게시 됨: 2022-06-16

The Most Effective Method for Adding Inline Scripts in WordPress

인라인 스크립트는 개발자의 등골을 오싹하게 만드는 두 가지 간단한 단어입니다. 인라인 스크립트를 사용하면 WordPress 게시물의 텍스트에 JavaScript(JS), CSS 및 HTML을 쉽게 추가할 수 있습니다. 여러 용도로 사용할 수 있지만 일반적인 용도 중 하나는 새 WordPress 기사를 게시할 때 즉석에서 변경하는 것입니다. 일부는 이것이 필요하지 않다고 주장할 수도 있지만 그렇게 하면 웹사이트가 원활하고 효율적으로 실행될 수 있습니다.

대부분의 WordPress 사용자가 간과하는 한 가지는 사이트에서 스크립트를 보완하는 것입니다. 인라인 텍스트를 단일 페이지에 구현하거나 전체 웹사이트에 구현하려는 경우 WordPress를 사용하여 이를 수행할 수 있는 방법이 많이 있습니다. WordPress 웹 사이트에 인라인 스크립트를 추가 하는 것은 올바른 방법을 이해하고 나면 간단할 수 있습니다. 이 블로그 게시물은 WordPress에 인라인 스크립트를 쉽게 추가하는 가장 효과적인 방법에 대해 설명합니다. 자세히 알아보려면 계속 읽으세요.

Wp_print_scripts를 통해 추가

WordPress 인라인 텍스트를 추가하려는 경우 WordPress wp_print_scripts 또는/및 admin_print_scripts 기능이 답입니다. WordPress wp_print_scripts는 일반적으로 JS 또는 CSS 파일을 포함할 때 수행되는 문서 헤드에 텍스트 태그를 표시할 수 있습니다. 이 WordPress 기능을 사용하면 사이트를 보다 대화식으로 만들거나 새로운 기능을 추가할 수 있습니다. 모든 WordPress 기능과 마찬가지로 웹사이트에서 사용하기 전에 따라야 할 몇 가지 간단한 규칙이 있습니다.

이 함수는 WordPress 플러그인 옵션을 기반으로 3개의 변수를 설정하고 admin_print_scripts 후크를 사용하여 프런트 엔드(헤드 섹션)에 출력합니다. 인라인 문자를 관리 영역에 추가하려면 wp_print_scripts를 admin_print_scripts 함수로 바꾸고 하루라고 부를 수도 있습니다.

WordPress를 처음 설치하면 사이트에 자동으로 추가되는 많은 텍스트가 함께 제공됩니다. 이로 인해 서버의 로딩 시간과 CPU 사용량이 증가할 수 있습니다. 이를 방지하는 한 가지 방법은 wp_print_scripts 함수를 사용하는 것이므로 필요하거나 원하는 경우에만 텍스트를 로드합니다. 즉, wp_print_script 함수를 사용하여 WordPress 게시물에 인라인 문자를 추가할 때의 장단점을 간단히 살펴보겠습니다.

장점:

  • WordPress 페이지의 "헤드 섹션"에 인라인 텍스트를 추가하는 것은 항상 간단합니다.
  • 추가하는 코드에는 JS 변수, 함수, 메서드, 조건문 또는 사이트에 추가하려는 모든 것을 추가할 수 있다는 제한 사항이 없습니다.

단점:

  • 추가한 코드를 등록된 스크립트와 연결하는 특별한 방법은 없습니다.
  • 대부분의 경우 다양한 요인에 대한 출력 코드는 출력 코드 위치를 제어하는 ​​실제적이고 일관된 방법이 아닐 수 있습니다. 그러나 <add_action> 아래의 <priority> 매개변수를 항상 활용하여 추가한 코드의 위치를 ​​제어할 수 있습니다.

wp_add_inline_script() 함수 사용

최근 WordPress는 WordPress 게시물에 인라인 JavaScript를 추가하는 새로운 기능을 출시했습니다. 그러나 이 새로운 통합은 4.5 WordPress 버전부터 호환되며 사용 가능한 다른 옵션에 비해 인라인 텍스트를 추가하는 더 눈에 띄는 방법입니다. 우리는 wp_add_inline_script() 함수를 정의하고 있으며 이 함수가 완벽하게 작업을 완료할 것으로 기대합니다. 가장 경험이 풍부한 WordPress 개발자라도 이 사실을 확인할 수 있습니다.

wp_add_inline_script() 함수는 WordPress 페이지에서 코드를 편집하지 않고 사이트에 인라인 문자를 추가하는 방법입니다. 이를 통해 FTP 액세스나 플러그인을 사용할 필요 없이 실시간으로 변경할 수 있습니다. 이 기능은 또한 WordPress 사이트를 사용자 정의하는 데 사용할 수 있는 필수 통합 중 하나입니다. 이 절차를 통해 웹사이트 코드 내에 인라인 텍스트를 추가할 수 있습니다. 즉, 웹페이지의 HTML 태그에 직접 추가됩니다. 이것은 외부 JS 파일을 사용하거나 다른 웹사이트에 대한 링크를 사용하는 것보다 훨씬 더 많은 사용자 정의를 허용합니다.

장점:

  • wp_add_inline_script() 함수는 WordPress 블로그에 인라인 문자를 추가하는 유용한 방법입니다.
  • 개발자가 WordPress 테마 또는 플러그인 파일을 변경하거나 header.php 템플릿 파일을 편집하지 않고 JS 코드를 추가할 수 있는 쉽고 편리한 방법입니다.
  • 이는 Google Analytics 코드와 같은 스크립트를 추가하는 데 유용할 수 있습니다. Google Analytics 기능이나 설정이 업데이트될 때마다 header.php 파일을 편집하지 않아도 됩니다.

단점:

  • wp_add_inline_script() 함수의 유일한 단점은 4.5 WordPress 버전부터 사용할 수 있다는 것입니다.

wp_localize_script() 함수 사용

wp_localize_script() 함수는 WordPress 웹사이트의 개별 페이지에 인라인 문자를 추가하는 유용한 WordPress 유틸리티입니다. 이벤트나 프로모션과 같이 사이트에 빠르고 일시적인 기능이 필요한 경우에 적합합니다. 이 함수는 다양한 수의 인수를 받아들이고 문서 헤드에 추가된 JS 문자열 목록을 출력합니다. 예를 들어 jQuery를 사용하고 특정 페이지에서만 스크립트 코드를 원하는 경우 이렇게 하면 도움이 될 수 있습니다.

Wp_localize_script()는 JS 파일을 대기열에 넣고 변수를 포함하는 연관 배열을 정의하는 "shapeSpace_script"의 ID/핸들을 제공합니다. 마지막으로 이러한 JS 변수는 wp_localize_script()에 전달되어 등록된 shapeSpace_script에 인라인으로 포함됩니다. 결과적으로 shapeSpace.varl과 같은 모든 JS 변수를 적용할 수 있습니다. 이 기능은 언어 번역 및 국제화에 사용하기 위해 JS 변수를 현지화하는 데 사용됩니다. 그러나 대부분의 WordPress 개발자는 이를 사이트에 인라인 문자를 추가하는 일반적인 방법으로 사용합니다.

장점:

  • Wp_localize_script()는 기존에 등록된 스크립트와 "읽기:요구" 연결을 활성화합니다. 이것은 웹사이트의 사용자 정의 텍스트 출력의 상대 위치를 제어하는 ​​우수하고 일관된 방법을 제공한다는 것을 의미합니다.

단점:

  • 유일한 단점은 JS 변수( var = 'value' )만 추가할 수 있다는 것입니다. 따라서 wp_localize_script()를 사용하여 함수, 조건, 방정식 등과 같은 다른 인라인 스크립트를 추가하는 것은 불가능합니다.

대체 사용

앞서 언급했듯이 wp_add_inline_script()와 같은 특정 메서드는 4.5 WordPress 버전 이상부터 사용할 수 있습니다. 그러나 모든 것을 결합 하면 사용 중인 WordPress 버전에 관계없이 WordPress 파일에 인라인 문자를 추가하는 실패 방지 방법을 만들 수 있습니다 . 이를 수행하는 가장 효과적인 방법은 헤드 섹션(프론트 엔드) 포스트 플러그인의 세 가지 기능을 사용하는 것입니다.

가장 먼저 해야 할 일은 JS 파일을 큐에 넣고 다음 함수를 호출하여 wp_add_inline_script() 함수를 통해 인라인 라인을 추가하는 것입니다. 세 번째 기능은 4.5 버전보다 오래된 것으로 대체하는 것입니다. 이것은 의심할 여지 없이 WordPress 4.5 및 모든 고유한 버전에서 작동합니다. 여기에서 진정한 마술이 일어납니다. 선택한 WordPress 변형에서 작업을 완료하는 폴백 방법을 계속 진행하면 2.1 또는 무엇이든 되돌릴 수 있습니다.

장점:

  • 한 번에 로드하기 위해 추가 HTTP 요청을 추가하지 않고도 웹 사이트에 여러 JS 파일을 가질 수 있습니다. 즉, 웹사이트 방문자의 로딩 시간을 줄일 수 있습니다.
  • 한 스크립트가 실패하면 동일한 대체 기능 내의 다른 스크립트는 서로에 대한 종속성으로 인해 다른 스레드에서 비동기적으로 로드되기 때문에 계속 작동합니다.

단점:

  • 스크립트가 실패하면 몇 가지 경우에 사용자는 코드 대신 빈 공간을 보게 됩니다. 이것은 그다지 중요하지 않은 것처럼 보일 수 있지만 WordPress 개발자로서 주의해야 할 중요한 사항입니다.

WordPress에 인라인 스크립트 추가에 대한 요약

마음대로 사용할 수 있는 대체 기술의 한계로 인해 wp_add_inline_script() 함수는 WordPress 인라인 문자를 추가하는 우수한 방법입니다. 이것은 오늘날 가장 효과적인 솔루션으로 간주되며 일반적인 믿음과 달리 이 기능은 fallback 기술을 사용하면 모든 버전의 WordPress에서 활용할 수 있습니다. 참고로 다음은 WordPress 코어에 인라인 스크립트를 추가하는 가장 효과적인 방법에 대한 간략한 요약입니다.

    • wp_add_inline_script() 를 사용하면 등록된 스크립트에 JS 코드를 추가할 수 있습니다.
    • wp_print_scripts 또는 admin_print_scripts 를 사용하면 프런트 엔드 또는 헤더 섹션에 모든 코드를 설치할 수 있습니다.
  • wp_localize_script() 를 사용하면 등록된 스크립트에 JS 변수를 추가할 수도 있습니다.
  • Fallback 을 사용하면 모든 버전의 WordPress에서 정확하게 작동하는 완전한 기술을 만들 수 있습니다.

참고: JavaScript 대신 인라인 스타일/CSS를 추가하려는 경우 WordPress는 스크립트를 추가하는 데 사용되는 것과 유사한 "스타일 추가" 기능 세트를 제공합니다. 예를 들어 wp_print_styles 및 wp_add_inline_styles를 확인하십시오.

결론

인라인 스크립트는 WordPress 웹사이트에 기능을 추가하는 빠르고 쉬운 방법입니다. JavaScript로 스크립트를 작성하면 추가 플러그인이나 코드 없이 페이지에서 원하는 모든 작업을 수행하는 인라인 스크립트를 만들 수 있습니다. 이 튜토리얼은 WordPress에 인라인 스크립트를 추가하는 가장 효과적인 방법을 설명합니다.

WP 사이트에 스크립트를 추가한 경험이 있는 WordPress 편집기입니까? 작업을 빨리 끝내고자 하는 초보 개발자에게 어떤 방법을 추천하시겠습니까? 의견 섹션을 사용하여 의견을 공유하고 문제가 되는 질문을 자유롭게 하십시오.

저자의 약력:

Arthur는 디지털 마케팅 전문가이자 비즈니스 블로거입니다. 그는 다양한 소셜 미디어를 통해 흥미로운 스타트업을 개발하고 자신의 경험을 고객과 공유하여 비즈니스를 더 잘 홍보합니다. 여가 시간에 Arthur는 일본어를 공부하고 디지털 트랜스포메이션 트렌드에 대한 기사를 씁니다.