Cách ưa thích để thêm các tệp javascript tùy chỉnh vào trang web là gì?

Tôi đã thêm các tập lệnh của mình, nhưng tôi muốn biết cách ưa thích.
Tôi chỉ cần đặt một <script>thẻ trực tiếp trong header.phpmẫu của tôi.

Có một phương pháp ưa thích để chèn các tập tin js bên ngoài hoặc tùy chỉnh?
Làm cách nào để liên kết một tệp js vào một trang? (Tôi có ý tưởng trang chủ)

Sử dụng wp_enqueue_script()trong chủ đề của bạn

Câu trả lời cơ bản là sử dụng wp_enqueue_script()trong wp_enqueue_scriptshook cho front end admin_enqueue_scriptscho admin. Nó có thể trông giống như thế này (giả sử bạn đang gọi từ functions.phptệp của chủ đề ; lưu ý cách tôi tham chiếu thư mục biểu định kiểu):

<?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" );
}

Đó là những điều cơ bản.

Các tập lệnh phụ thuộc được xác định trước và nhiều phụ thuộc

Nhưng giả sử bạn muốn bao gồm cả jQuery và jQuery UI Sắp xếp từ danh sách các tập lệnh mặc định có trong WordPress và bạn muốn tập lệnh của mình phụ thuộc vào chúng? Thật dễ dàng, chỉ cần bao gồm hai tập lệnh đầu tiên sử dụng các thẻ điều khiển được xác định trước được xác định trong WordPress và cho tập lệnh của bạn cung cấp tham số thứ 3 wp_enqueue_script(), đó là một mảng các tập lệnh xử lý được sử dụng bởi mỗi tập lệnh, như vậy:

<?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' ) );
}

Các tập lệnh trong một Plugin

Điều gì nếu bạn muốn làm điều đó trong một plugin thay thế? Sử dụng plugins_url()chức năng để chỉ định URL của tệp Javascript của bạn:

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

Phiên bản tập lệnh của bạn

Cũng lưu ý rằng ở trên, chúng tôi đã cung cấp cho plugin của chúng tôi một số phiên bản và chuyển nó dưới dạng tham số thứ 4 wp_enqueue_script(). Số phiên bản là đầu ra trong nguồn dưới dạng đối số truy vấn trong URL thành tập lệnh và phục vụ để buộc trình duyệt tải xuống lại tệp có thể được lưu trong bộ nhớ cache nếu phiên bản thay đổi.

Chỉ tải tập lệnh trên các trang cần thiết

Nguyên tắc đầu tiên của Hiệu suất Web nói là Giảm thiểu các Yêu cầu HTTP để bất cứ khi nào có thể, bạn nên giới hạn các tập lệnh chỉ tải khi cần thiết. Ví dụ: nếu bạn chỉ cần tập lệnh của mình trong quản trị viên thì giới hạn nó ở các trang quản trị bằng cách sử dụng admin_enqueue_scriptshook thay thế:

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

Tải tập lệnh của bạn trong phần chân trang

Nếu tập lệnh của bạn là một trong những tập lệnh cần được tải vào phần chân trang, thì có một tham số thứ 5 wp_enqueue_script()yêu cầu WordPress trì hoãn nó và đặt nó vào phần chân trang (giả sử chủ đề của bạn không bị lỗi và nó thực sự gọi hook wp_footer như tất cả chủ đề WordPress tốt nên ):

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

Kiểm soát hạt mịn hơn

Nếu bạn cần kiểm soát chi tiết hơn thì Ozh có một bài viết tuyệt vời có tên Cách: Tải Javascript bằng Plugin WordPress của bạn , chi tiết hơn.

Vô hiệu hóa tập lệnh để giành quyền kiểm soát

Justin Tadlock có một bài viết hay có tên Cách vô hiệu hóa tập lệnh và kiểu trong trường hợp bạn muốn:

1. Kết hợp nhiều tệp thành một tệp (số dặm có thể thay đổi theo JavaScript tại đây).
2. Chỉ tải các tệp trên các trang chúng tôi đang sử dụng tập lệnh hoặc kiểu.
3. Dừng phải sử dụng! Quan trọng trong tệp style.css của chúng tôi để thực hiện các điều chỉnh CSS đơn giản.

Truyền các giá trị từ PHP sang JS với wp_localize_script()

Trên blog của mình, Vladimir Prelovac có một bài viết tuyệt vời có tên Cách thực hành tốt nhất để thêm mã JavaScript vào các plugin WordPress nơi anh ấy thảo luận về việc sử dụng wp_localize_script()để cho phép bạn đặt giá trị của các biến trong PHP phía máy chủ của bạn sau này sẽ được sử dụng trong Javascript phía máy khách của bạn.

Kiểm soát hạt thực sự tốt với wp_print_scripts()

Và cuối cùng, nếu bạn cần kiểm soát chi tiết thực sự, bạn có thể xem xét wp_print_scripts()như đã thảo luận trên Bia Planet trong một bài đăng có tên Cách bao gồm CSS và JavaScript một cách có điều kiện và chỉ khi cần bởi bài viết .

Epiloque

Đó là về cách thực hành tốt nhất bao gồm các tệp Javascript với WordPress. Nếu tôi bỏ lỡ điều gì đó (mà tôi có thể có), hãy chắc chắn cho tôi biết trong các nhận xét để tôi có thể thêm một bản cập nhật cho khách du lịch trong tương lai.

Để khen ngợi Mikes minh họa tuyệt vời về việc sử dụng enqueues, tôi chỉ muốn chỉ ra rằng các kịch bản được bao gồm như là phụ thuộc không cần phải bị mê hoặc ...

Tôi sẽ sử dụng ví dụ dưới Tập lệnh trong tiêu đề Plugin trong câu trả lời của 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);
}

Điều này có thể được cắt giảm để đọc ..

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);
}

Khi bạn đặt phụ thuộc, WordPress sẽ tìm và liệt kê chúng sẵn sàng cho tập lệnh của bạn, vì vậy bạn không cần thực hiện bất kỳ cuộc gọi độc lập nào cho các tập lệnh này.

Ngoài ra, một số bạn có thể tự hỏi nếu đặt nhiều phụ thuộc có thể khiến tập lệnh xuất ra theo thứ tự sai, ở đây tôi xin đưa ra một ví dụ

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

Nếu tập lệnh hai phụ thuộc vào tập lệnh ba (tức là tập lệnh ba nên tải trước), điều này sẽ không thành vấn đề, WordPress sẽ xác định mức độ ưu tiên của các tập lệnh đó và xuất chúng theo đúng thứ tự, tóm lại, tất cả sẽ được xử lý tự động cho bạn bởi WordPress.

Ví dụ, đối với các đoạn script nhỏ mà bạn có thể không muốn đưa vào một tệp riêng vì chúng được tạo động, WordPress 4.5 và các ưu đãi khác wp_add_inline_script. Chức năng này về cơ bản chốt tập lệnh này sang tập lệnh khác.

Ví dụ, giả sử bạn đang phát triển một chủ đề và muốn khách hàng của mình có thể chèn các tập lệnh của riêng mình (như Google Analytics hoặc Add This) thông qua trang tùy chọn. Sau đó, bạn có thể sử dụng wp_add_inline_scriptđể chốt tập lệnh đó vào tệp js chính của mình (giả sử mainjs) như thế này:

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

Cách ưa thích của tôi là đạt được hiệu suất tốt, vì vậy thay vì sử dụng wp_enqueue_scripttôi sử dụng HEREDOC với API tìm nạp để tải mọi thứ không đồng bộ song song:

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

Và sau đó chèn chúng vào đầu, đôi khi cùng với các kiểu như thế này:

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

Kết quả là thác nước trông như thế này, tải mọi thứ cùng một lúc nhưng kiểm soát thứ tự thực hiện:

Lưu ý: Điều này yêu cầu sử dụng API tìm nạp, không có sẵn trong tất cả các trình duyệt.