it-swarm-ko.tech

사이트에 맞춤 자바 스크립트 파일을 추가하는 가장 좋은 방법은 무엇입니까?

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

외부 또는 사용자 정의 js 파일을 삽입하는 기본 방법이 있습니까?
js 파일을 한 페이지에 어떻게 묶을 수 있습니까? (나는 홈 페이지를 염두에두고있다)

68
naugtur

테마에 wp_enqueue_script()을 (를) 사용하십시오

기본 답변은 wp_enqueue_script() 을 관리자의 프런트 엔드 wp_enqueue_scripts에 대해 admin_enqueue_scripts 후크에 사용하는 것입니다. 다음과 같이 보일 수 있습니다 (테마의 functions.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" );
}

이것이 기본입니다.

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

그러나 WordPress에 포함 된 기본 스크립트 목록and에서 jQuery와 jQuery UI Sortable을 모두 포함한다고 가정 해 봅시다. 그들에? 사전 정의 된handlesWordPress } __을 사용하여 처음 두 스크립트를 포함 시키면 스크립트가 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 );
}

스크립트 버전 관리

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

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

Web Performance의 첫 번째 규칙은Minimize HTTP Requests 이므로 가능할 때마다 필요한 경우에만 스크립트가로드되도록 제한해야합니다. 예를 들어 관리자에게만 스크립트가 필요한 경우 대신 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()의 5 번째 매개 변수가 있으며, 이는 WordPress가이를 지연시키고 바닥 글에 배치하도록합니다 (테마가 잘못 작동하지 않는다고 가정). 실제로 모든 좋은 WordPress 테마처럼 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를 사용하지 않아도됩니다.

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

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

wp_print_scripts()으로 세밀한 제어

마지막으로 정말 세밀한 제어가 필요한 경우 조건에 따라 게시물에 필요할 때만 CSS 및 JavaScript를 포함하는 방법Beer Planet 에 설명 된대로 wp_print_scripts()을 (를) 살펴볼 수 있습니다. .

에필 로크

WordPress에 Javascript 파일을 포함시키는 모범 사례에 관한 것입니다. 내가 (아마도 가지고있는) 무언가를 놓쳤다면, 주석에 알려 주셔서 장래 여행자를위한 업데이트를 추가 할 수 있습니다.

78
MikeSchinkel

대기열을 사용하는 Mikes 멋진 일러스트레이션을 칭찬하기 위해 나는 종속성으로 포함 된 스크립트가 대기열에 들어갈 필요가 없음을 지적하고자합니다 ...

이 예제를 플러그인의 Script 아래에 사용하겠다. 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);
}

당신이 의존성을 설정할 때, WordPress는 스크립트를 찾을 준비가 될 것이므로,이 스크립트들을 독립적으로 호출 할 필요가 없습니다.

또한, 여러분 중 일부는 여러 의존성을 설정하면 스크립트가 잘못된 순서로 출력 될 수 있는지 궁금해 할 수도 있습니다. 예를 들어 보겠습니다.

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

스크립트 2가 스크립트 3에 종속적이면 (즉, 스크립트 3이 먼저로드되어야 함), 이것은 중요하지 않습니다. WordPress는 해당 스크립트에 대한 대기열 우선 순위를 결정하고 올바른 순서로 출력합니다. 즉, 모든 것이 자동으로 처리됩니다. WordPress에 의해 당신을 위해.

11
t31os

예를 들어 동적으로 생성되기 때문에 별도의 파일에 포함하고 싶지 않은 작은 스크립트의 경우 WordPress 4.5 이상에서 wp_add_inline_script 를 제공합니다. 이 함수는 기본적으로 스크립트를 다른 스크립트에 래치합니다.

예를 들어 테마를 개발 중이며 고객이 옵션 페이지를 통해 자신의 스크립트 (예 : Google 웹 로그 분석 또는 AddThis)를 삽입 할 수있게하려는 경우를 가정 해 보겠습니다. 그런 다음 wp_add_inline_script를 사용하여 스크립트를 주 js 파일에 래치 할 수 있습니다 (mainjs라고합시다).

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

필자가 선호하는 방법은 좋은 성능을 얻는 것이므로 wp_enqueue_script를 사용하는 대신 Fetch API에서 HEREDOC을 사용하여 모든 항목을 비동기 적으로 병렬로로드합니다.

$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}";
}

결과는 다음과 같습니다. 모든 것을 한 번에로드하지만 실행 순서를 제어합니다.

 enter image description here 

참고 : 모든 브라우저에서 사용할 수없는 가져 오기 API를 사용해야합니다.

0
Josh Habdas