Làm cách nào để liệt kê một tập lệnh ở chân trang trong wordpress?

Xin chào mọi người, Trong bài đăng này, chúng ta sẽ xem xét cách giải quyết vấn đề Wordpress Wp_Enqueue_Script Footer bằng ngôn ngữ máy tính

Meaning:

Wordpress Wp_Enqueue_Script Footer đã được giải quyết bằng một số tình huống, như chúng ta đã thấy

Làm cách nào để liệt kê một tập lệnh trong chân trang WordPress?

Để thêm tập lệnh vào chân trang hoặc cuối trang WordPress, tất cả những gì bạn cần làm là đặt tham số $in_footer thành true. Chúng tôi cũng đã sử dụng một chức năng khác get_template_directory_uri[] trả về URL cho thư mục mẫu. 04-Oct-2013

wp_enqueue_script trong WordPress là gì?

wp_enqueue_script[ $handle, $src, $deps, $ver, $in_footer ];

Tại sao wp_enqueue_script[] được sử dụng?

wp_enqueue_scripts là hook thích hợp để sử dụng khi liệt kê các tập lệnh và kiểu có nghĩa là xuất hiện ở giao diện người dùng. Bất chấp cái tên, nó được sử dụng để liệt kê cả tập lệnh và kiểu

Làm cách nào để di chuyển jquery đến chân trang trong WordPress?

function move_jquery_to_footer[] { wp_scripts[]->add_data[ 'jquery', 'group', 1 ];

Wp_footer[] làm gì trong code WordPress?

In tập lệnh hoặc dữ liệu trước thẻ nội dung đóng ở giao diện người dùng. 29-Jun-2022

Wp_head trong WordPress là gì?

Hàm wp_head[] mà cái nhìn thấy trong tất cả các tiêu đề. php, chỉ đơn giản là kích hoạt hook do_action['wp_head']. Các tệp cốt lõi của WordPress sau đó móc nó nhiều lần để in đầu, Sao chép mã Mở rộng. 26-Oct-2017

Làm cách nào để thêm liên kết CDN trong WordPress?

Tích hợp CDN WordPress

  • Tạo vùng kéo
  • Đăng nhập vào bảng điều khiển quản trị viên WordPress của bạn
  • Chuyển đến cài đặt Trình kích hoạt CDN
  • Cập nhật cài đặt Tên máy chủ CDN với Bí danh Khu vực của bạn [e. g. cdn. thí dụ. com ] hoặc URL vùng [e. g. ví dụ-hexid. kxcdn. com ]
  • Nhấp vào Lưu thay đổi và xác thực cấu hình

Trang có phải là sên không?

Sên là một phần của URL xác định một trang cụ thể trên trang web ở dạng dễ đọc. Nói cách khác, đó là một phần của URL giải thích nội dung của trang. Ví dụ, đối với bài viết này, URL là https. // sữa chua. com/slug, và slug đơn giản là 'slug'. 18-Tháng 9-2019

Trong WordPress, thay vì chỉ thêm những thứ này vào tiêu đề, bạn nên sử dụng một phương pháp gọi là enqueueing, đây là cách xử lý tài sản của bạn được tiêu chuẩn hóa với phần thưởng bổ sung là quản lý các phụ thuộc. Tìm hiểu cách thực hiện bên dưới bằng cách sử dụng 

add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}
2

  • Cách hoạt động của Enqueueing
  • Khái niệm cơ bản về Enqueueing Với wp_enqueue_scripts
  • Quản lý phụ thuộc
  • Tải tập lệnh ở chân trang
  • Chỉ định phương tiện cho kiểu

Cách hoạt động của Enqueueing

Có hai bước được thực hiện khi liệt kê một tập lệnh hoặc một kiểu. Trước tiên, bạn đăng ký nó – hãy nói với WordPress rằng nó ở đó – và sau đó bạn thực sự đưa nó vào hàng đợi, điều này cuối cùng sẽ đưa nó vào tiêu đề hoặc ngay trước thẻ đóng nội dung

Lý do có hai bước liên quan đến tính mô đun. Đôi khi, bạn sẽ muốn cho WordPress biết về một nội dung, nhưng bạn có thể không muốn sử dụng nội dung đó trên mọi trang. Ví dụ. Nếu bạn đang xây dựng mã ngắn thư viện tùy chỉnh sử dụng Javascript, bạn thực sự chỉ cần tải JS khi mã ngắn được sử dụng – có thể không phải trên mọi trang

Cách để thực hiện điều này là đăng ký tập lệnh trước và chỉ thực sự đưa nó vào hàng đợi khi mã ngắn được hiển thị [nên đọc. Hướng dẫn cơ bản về mã ngắn WordPress]

Khái niệm cơ bản về Enqueueing Với wp_enqueue_scripts

Để liệt kê các tập lệnh và kiểu ở giao diện người dùng, bạn sẽ cần sử dụng móc nối

add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}
2. Trong chức năng móc nối, bạn có thể sử dụng các chức năng
add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}
4,
add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}
0,
add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}
1 và
add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}
2

add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_register_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_register_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];

    wp_enqueue_style[ 'custom-gallery' ];
    wp_enqueue_script[ 'custom-gallery' ];
}

Trong ví dụ trên, tôi đã đăng ký và liệt kê các nội dung trong cùng một chức năng, điều này hơi dư thừa. Trên thực tế, bạn có thể sử dụng các hàm enqueue để đăng ký và enqueue ngay lập tức bằng cách sử dụng các đối số giống như bạn làm trong các hàm đăng ký

add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}

Nếu tôi tách hai chức năng, tôi sẽ làm như vậy bằng cách sử dụng chúng trong các hook khác nhau. Trong một ví dụ thực tế, chúng ta có thể sử dụng hook

add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}
2 để đăng ký nội dung và chức năng của mã ngắn để đưa chúng vào hàng đợi

add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_register_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_register_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];

}

add_shortcode[ 'custom_gallery', 'custom_gallery' ];

function custom_gallery[ $atts ]{

    wp_enqueue_style[ 'custom-gallery' ];
    wp_enqueue_script[ 'custom-gallery' ];

    // Gallery code here
}

Quản lý phụ thuộc

Cơ chế xếp hàng của WordPress có hỗ trợ tích hợp để quản lý phụ thuộc, sử dụng đối số thứ ba của cả hai hàm

add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}
1 và
add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}
4. Bạn cũng có thể sử dụng ngay các hàm xếp hàng nếu không cần tách chúng ra

Tham số thứ ba là một mảng các tập lệnh/kiểu đã đăng ký cần được tải trước khi nội dung hiện tại được đưa vào hàng đợi. Ví dụ của chúng tôi ở trên hầu hết có thể dựa vào jQuery, vì vậy hãy xác định điều đó ngay bây giờ

Đăng kí để nhận thư mới

Bạn muốn biết làm thế nào chúng tôi tăng lưu lượng truy cập của mình hơn 1000%?

Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các mẹo nội bộ về WordPress

Theo dõi ngay

________số 8

Chúng tôi không cần phải đăng ký hoặc tự liệt kê jQuery vì nó đã là một phần của WordPress. Bạn có thể tìm thấy danh sách các tập lệnh và kiểu có sẵn trong WordPress trong Codex

Nếu bạn có các phần phụ thuộc của riêng mình, bạn sẽ cần phải đăng ký chúng, nếu không, tập lệnh của bạn sẽ không tải được. Đây là một ví dụ

add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ], array[ 'jquery' ] ];
    wp_enqueue_script[ 'custom-gallery-lightbox', plugins_url[ '/js/gallery-lightbox.js' , __FILE__ ], array[ 'custom-gallery' ] ];
}

Giả sử rằng tập lệnh đầu tiên là một thư viện, tập lệnh thứ hai là phần mở rộng của tập lệnh giúp hình ảnh mở ra trong hộp đèn. Lưu ý rằng mặc dù tập lệnh thứ hai của chúng tôi dựa trên jQuery, nhưng chúng tôi không cần chỉ định điều này, vì tập lệnh đầu tiên của chúng tôi đã tải jQuery. Điều đó nói rằng, có thể nên nêu rõ tất cả các phụ thuộc, chỉ để đảm bảo rằng không có gì có thể bị hỏng nếu bạn quên bao gồm một phụ thuộc

WordPress hiện biết chúng tôi cần tập lệnh nào và có thể tính toán thứ tự chúng cần được thêm vào trang

Tải tập lệnh ở chân trang

Bất cứ khi nào bạn có thể thoát khỏi việc tải tập lệnh ở chân trang, bạn nên. Điều này làm tăng thời gian tải trang rõ ràng và có thể ngăn trang web của bạn bị treo trong khi tải tập lệnh, đặc biệt nếu chúng chứa lệnh gọi AJAX

Cơ chế xếp hàng có thể thêm tập lệnh vào chân trang bằng tham số thứ năm [tham số thứ tư là số phiên bản tùy chọn]. Ví dụ của chúng tôi ở trên sẽ tải các tập lệnh ở chân trang nếu chúng tôi sửa đổi nó một chút

add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}
0

Chỉ định đúng làm tham số thứ năm sẽ đặt tập lệnh ở chân trang, sử dụng sai hoặc bỏ qua tham số sẽ tải mọi thứ trong tiêu đề. Như tôi đã đề cập trước đây, bất cứ khi nào có thể, hãy tải tập lệnh ở chân trang

Chỉ định phương tiện cho kiểu

Sử dụng tham số thứ năm của chức năng đăng ký kiểu dáng/chức năng enqueue, bạn có thể kiểm soát loại phương tiện mà tập lệnh đã được xác định cho [in, màn hình, thiết bị cầm tay, v.v. ]. Bằng cách sử dụng tham số này, bạn có thể hạn chế tải các kiểu đối với loại phương tiện cụ thể, đây là một thủ thuật tối ưu hóa nhỏ hữu ích

add_action[ 'wp_enqueue_scripts', 'my_plugin_assets' ];
function my_plugin_assets[] {
    wp_enqueue_style[ 'custom-gallery', plugins_url[ '/css/gallery.css' , __FILE__ ] ];
    wp_enqueue_script[ 'custom-gallery', plugins_url[ '/js/gallery.js' , __FILE__ ] ];
}
1

Để biết danh sách đầy đủ các loại phương tiện có thể được sử dụng, hãy xem thông số kỹ thuật CSS

Bản tóm tắt

Enqueueing tài sản là một cách mạnh mẽ để xử lý chúng. Nó cung cấp cho bạn và các nhà sản xuất plugin/chủ đề khác, nhiều quyền kiểm soát hơn đối với toàn bộ hệ thống và loại bỏ việc quản lý phụ thuộc khỏi tầm tay của bạn

Nếu điều đó vẫn chưa đủ, đó là cách để thêm nội dung của bạn, nhiều thị trường chủ đề và chính kho lưu trữ WordPress sẽ không phê duyệt công việc của bạn nếu bạn không sử dụng phương pháp này

Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm

  • Dễ dàng thiết lập và quản lý trong bảng điều khiển MyKinsta
  • Hỗ trợ chuyên gia 24/7
  • Mạng và phần cứng Google Cloud Platform tốt nhất, được cung cấp bởi Kubernetes để có khả năng mở rộng tối đa
  • Tích hợp Cloudflare cấp doanh nghiệp cho tốc độ và bảo mật
  • Tiếp cận đối tượng toàn cầu với tối đa 35 trung tâm dữ liệu và hơn 275 PoP trên toàn thế giới

Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn

Làm cách nào để biết liệu một tập lệnh WordPress có được xếp vào hàng đợi hay không?

wp_script_is[ string $handle, string $list = 'enqueued' ] . bool. Xác định xem tập lệnh đã được thêm vào hàng đợi chưa.

Việc sử dụng wp_enqueue_script là gì?

Cách sử dụng. wp_enqueue_script[ $handle, $src, $deps, $ver, $in_footer ]; . Links a script file to the generated page at the right time according to the script dependencies, if the script has not been already included and if all the dependencies have been registered.

Wp_register_script là gì?

wp_register_script có nghĩa là, Đăng ký tệp ngay lập tức . wp_register_script đăng ký một tập lệnh sẽ được xử lý sau bằng cách sử dụng hàm wp_enqueue_script[]. wp_enqueue_script[] đăng ký tập lệnh nếu $src được cung cấp [KHÔNG ghi đè] và ghi vào hàng đợi. nguồn. nhà phát triển. báo chí.

Chủ Đề