it-swarm-vi.tech

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 thẻ <script> trực tiếp vào header.php trong mẫu của mình.

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ó trang chủ trong tâm trí)

68
naugtur

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 hook wp_enqueue_scripts cho giao diện người dùng admin_enqueue_scripts cho quản trị viên. Nó có thể trông giống như thế này (giả sử bạn đang gọi từ tệp functions.php 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 _ ​​ bạn có muốn tập lệnh của mình phụ thuộc vào chúng không? Dễ dàng, chỉ cần bao gồm hai tập lệnh đầu tiên sử dụng _ được xác định trước xử lý được xác định trong WordPress và cho tập lệnh của bạn cung cấp tham số thứ 3 cho 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 chức năng plugins_url() để 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 cho 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

Quy tắc 1 của Hiệu suất Web nói với Tối thiểu hóa các yêu cầu HTTP vì vậy 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 hook admin_enqueue_scripts 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 của 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à đó thực sự là gọi wp_footer hook như tất cả cá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 mức đó Ozh có một bài viết tuyệt vời có tên Cách thực hiện: 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 tắt 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 mà chúng tôi 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 bằng cách sử dụng wp_localize_script() để cho phép bạn đặt giá trị của các biến trong phía máy chủ của bạn PHP sau này đượ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.

78
MikeSchinkel

Để khen 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à những người 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 Trình cắm tiêu đề 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.

11
t31os

Chẳng hạn, đố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à cung cấp thêm 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);
0
cjbj

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_script Tô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:

 enter image description here 

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.

0
Josh Habdas