사이트에 사용자 정의 자바 스크립트 파일을 추가하는 기본 방법은 무엇입니까?

스크립트를 이미 추가했지만 원하는 방법을 알고 싶었습니다. 템플릿 에 태그를 직접
넣습니다 .<script>header.php

외부 또는 사용자 정의 js 파일을 삽입하는 선호되는 방법이 있습니까?
js 파일을 단일 페이지에 어떻게 바인딩합니까? (홈페이지를 염두에두고 있습니다)

사용 wp_enqueue_script()테마에

기본 답변은 관리자를 위한 프론트 엔드 용 후크에 사용 wp_enqueue_script()하는 것 입니다. 다음과 같이 보일 수 있습니다 (테마의 파일 에서 전화한다고 가정 합니다. 스타일 시트 디렉토리를 참조하는 방법에 유의하십시오).wp_enqueue_scriptsadmin_enqueue_scriptsfunctions.php

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
}

이것이 기본입니다.

미리 정의되고 여러 개의 종속 스크립트

그러나의 당신은에서 jQuery를 및 jQuery를 UI 정렬 가능한 모두를 포함 할 가정 해 봅시다 기본 스크립트의 목록 워드 프레스에 포함 하고 당신이 당신의 스크립트가 그들에 의존하고 싶어? 쉽고 간단하게 WordPress에 정의 된 사전 정의 된 핸들을 사용하여 처음 두 스크립트를 포함시키고 wp_enqueue_script()스크립트는 다음과 같이 각 스크립트에서 사용하는 스크립트 핸들의 배열 인 세 번째 매개 변수를 제공합니다 .

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}

플러그인의 스크립트

대신 플러그인에서 하시겠습니까? 이 plugins_url()함수를 사용하여 Javascript 파일의 URL을 지정하십시오.

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );

function my_plugin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
}

스크립트 버전 관리

또한 위 의 플러그인에 버전 번호를 부여하고에 4 번째 매개 변수로 전달했습니다 wp_enqueue_script(). 버전 번호는 소스에서 스크립트에 대한 URL의 쿼리 인수로 출력되며 버전이 변경된 경우 브라우저가 캐시 된 파일을 다시 다운로드하도록합니다.

필요한 페이지에만 스크립트로드

웹 성능 의 첫 번째 규칙에 따르면 HTTP 요청 을 최소화 해야하므로 가능할 때마다 필요한 경우에만 스크립트가로드되도록 제한해야합니다. 예를 들어 관리자에게만 스크립트가 필요한 경우 admin_enqueue_scripts대신 후크를 사용하여 관리자 페이지로 스크립트를 제한하십시오 .

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION );
}

바닥 글에 스크립트로드

스크립트가 바닥 글에로드되어야하는 스크립트 중 하나 인 경우 wp_enqueue_script()WordPress에 지연을 설정하고 바닥 글에 배치하도록 알려주 는 5 번째 매개 변수가 있습니다 (테마가 잘못 작동하지 않았으며 실제로 모든 것처럼 wp_footer 후크를 호출 한다고 가정합니다) 좋은 워드 프레스 테마 ) :

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION, true );
}

미세한 입자 컨트롤

그보다 세밀한 제어가 필요한 경우 Ozh 에는 방법 : WordPress 플러그인으로 Javascript로드 라는 제목의 훌륭한 기사가 있습니다.

제어를 위해 스크립트 비활성화

Justin Tadlock 에는 다음 과 같은 경우 스크립트 및 스타일을 비활성화하는 방법 이라는 제목의 멋진 기사 가 있습니다.

1. 여러 파일을 단일 파일로 결합합니다 (여기서는 마일리지가 JavaScript에 따라 다를 수 있음).
2. 스크립트 나 스타일을 사용하는 페이지에만 파일을로드하십시오.
3. 간단한 CSS 조정을 위해 style.css 파일에서! important를 사용하지 않아도됩니다.

다음을 사용하여 PHP에서 JS로 값 전달 wp_localize_script()

그의 블로그에서 Vladimir Prelovac는 WordPress 플러그인에 JavaScript 코드를 추가하는 모범 사례 라는 훌륭한 기사를 가지고 있으며, wp_localize_script()나중에 클라이언트 측 Javascript에서 사용할 수 있도록 서버 측 PHP의 변수 값을 설정하는 방법에 대해 설명 합니다.

정밀한 입자 제어 wp_print_scripts()

마지막으로 정말 세밀한 제어가 필요한 경우 Beer Planet 에 wp_print_scripts()대해 논의한 것처럼 조건부로만 필요한 CSS와 JavaScript를 조건부로 포함하는 방법 이라는 게시물에서 찾아 볼 수 있습니다 .

에필 로크

WordPress에 Javascript 파일을 포함시키는 모범 사례에 관한 것입니다. 내가 아마도 (아마도 가지고있는) 무언가를 놓쳤다면, 앞으로 여행자들을 위해 업데이트를 추가 할 수 있도록 의견에 알려주십시오.

대기열을 사용하는 Mikes의 훌륭한 그림을 칭찬하기 위해 의존성으로 포함 된 스크립트를 대기열에 넣을 필요가 없음을 지적하고 싶습니다 ...

Mike의 답변 에있는 플러그인 제목 의 스크립트 아래에있는 예를 사용하겠습니다 .

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-sortable');
    wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),MY_PLUGIN_VERSION);
}

이것은 읽기 위해 잘릴 수 있습니다 ..

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('my-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION);
}

의존성을 설정하면 워드 프레스가 스크립트를 찾아서 대기열에 넣을 수 있으므로 스크립트를 독립적으로 호출 할 필요가 없습니다.

또한 여러 종속성을 설정하면 스크립트가 잘못된 순서로 출력 될 수 있는지 궁금해 할 수도 있습니다. 여기에서 예를 들어 보겠습니다.

wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );

스크립트 2가 스크립트 3에 의존하는 경우 (즉, 스크립트 3이 먼저로드되어야 함) 중요하지 않습니다. 워드 프레스는 해당 스크립트의 대기열 우선 순위를 결정하고 올바른 순서로 출력합니다. WordPress에 의해 당신을 위해.

예를 들어 스크립트가 동적으로 생성되기 때문에 별도의 파일에 포함하고 싶지 않은 작은 스크립트 조각의 경우 WordPress 4.5 및 기타 기능이 제공 wp_add_inline_script됩니다. 이 기능은 기본적으로 스크립트를 다른 스크립트에 고정시킵니다.

예를 들어, 테마를 개발 중이며 고객이 옵션 페이지를 통해 자신의 스크립트 (예 : Google Analytics 또는 AddThis)를 삽입 할 수 있기를 원한다고 가정 해 보겠습니다. 그런 다음 wp_add_inline_script해당 스크립트를 다음과 같이 기본 js 파일 (말하자 mainjs)에 고정시킬 수 있습니다.

$custom_script = get_option('my-script')
if (!empty($custom_script)) wp_add_inline_script ('mainjs', $custom_script);

내가 선호하는 방법은 좋은 성능을 얻는 것입니다. 따라서 wp_enqueue_scriptHEREDOC을 Fetch API와 함께 사용 하여 모든 것을 비동기식으로 병렬로로드합니다.

$jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4';
$jquery_dependent_script_paths = [
  get_theme_file_uri( '/assets/js/global.js' ),
  get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ),
  get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ),
  get_theme_file_uri( '/assets/js/navigation.js' )
];
$jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
$inline_scripts = <<<EOD
<script>
(function () {
  'use strict';
  if (!window.fetch) return;
  /**
   * Fetch Inject v1.6.8
   * Copyright (c) 2017 Josh Habdas
   * @licence ISC
   */
  var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}();
  fetchInject(
    $jquery_dependent_script_paths_json
  , fetchInject([
    "{$jquery_script_path}"
  ]));
})();
</script>
EOD;

그런 다음 때로는 다음과 같은 스타일과 함께 머리에 삽입하십시오.

function wc_inline_head() {
  global $inline_scripts;
  echo "{$inline_scripts}";
  global $inline_styles;
  echo "{$inline_styles}";
}

다음과 같이 폭포가 생겨 모든 것을 한 번에로드하지만 실행 순서는 제어합니다.

참고 : Fetch API를 사용해야하며 일부 브라우저에서는 사용할 수 없습니다.