Triển khai JavaScript trên trang WordPress được nhắm mục tiêu
WordPress là một nền tảng dễ sử dụng giúp việc quản lý và tùy chỉnh trang web trở nên đơn giản. Tuy nhiên, một số thay đổi có thể khó thực hiện, bao gồm cả việc thực thi JavaScript trên một trang cụ thể. Có thể tập lệnh bạn đã thêm vào phần "Đầu" trên trang web của mình hiện đã xuất hiện trên mọi trang. Đây là một khó khăn điển hình của người mới chơi lần đầu.
Hiểu cách áp dụng tệp JavaScript có điều kiện là rất quan trọng khi sử dụng nó để nhắm mục tiêu một trang cụ thể. JavaScript có thể gây ra những hậu quả không mong muốn và làm giảm tốc độ trang web của bạn nếu nó được sử dụng xuyên suốt. Đây là lý do tại sao việc giới hạn tập lệnh ở trang cần thiết là rất quan trọng.
Chúng tôi sẽ hướng dẫn bạn quy trình thay đổi cấu hình WordPress trong bài viết này để JavaScript chỉ khởi chạy trên các trang bạn yêu cầu. Câu trả lời cũng dễ hiểu đối với những người không phải là nhà phát triển; hướng dẫn này dành cho những người mới bắt đầu.
Bạn sẽ cảm thấy thoải mái khi xử lý các tập lệnh dành riêng cho từng trang trong WordPress khi hoàn thành bài học này. Chúng tôi sẽ hướng dẫn bạn mã chính xác và quy trình cần thiết để đảm bảo JavaScript của bạn chỉ thực thi ở nơi cần thiết, cải thiện hiệu suất trang web của bạn.
| Yêu cầu | Ví dụ về sử dụng |
|---|---|
| is_page() | Chức năng được gọi là is_page() xác minh xem trang WordPress hiện tại có tương ứng với ID, tiêu đề hoặc slug của trang nhất định hay không. Để đảm bảo rằng các tập lệnh chỉ được tải trên một trang cụ thể, chức năng này rất cần thiết. Ví dụ: if (is_page(42)) {... } |
| wp_enqueue_script() | WordPress sử dụng wp_enqueue_script() phương pháp tải tập tin JavaScript. Nó đảm bảo rằng các tập lệnh được tải ở phần đầu hoặc chân trang của trang web và được đưa vào chính xác cùng với các phần phụ thuộc của chúng. wp_enqueue_script('custom-js', 'https://example.com/code.js') là một ví dụ về điều này. |
| add_action() | Để kết nối các chức năng tùy chỉnh vào các sự kiện WordPress được xác định trước, chẳng hạn như các tập lệnh tải, hãy sử dụng add_action() phương pháp. Điều này giúp bạn có thể chèn tập lệnh một cách linh hoạt khi cần thiết. 'wp_enqueue_scripts', 'load_custom_js_on_special_page' là hai ví dụ về hành động thêm.'); |
| add_shortcode() | WordPress cho phép bạn đăng ký một shortcode mới bằng cách sử dụng add_shortcode() chức năng. Điều này cho phép bạn thêm tài liệu động, chẳng hạn như JavaScript, ngay vào trình chỉnh sửa bài đăng. Add_shortcode('custom_js', 'add_js_via_shortcode') là một ví dụ. |
| $.getScript() | Khi trang đã được tải, bạn có thể sử dụng phương thức jQuery $.getScript() để tải động một tệp JavaScript bên ngoài. Áp dụng logic có điều kiện để tải tập lệnh dựa trên URL hoặc các tiêu chí khác là cách sử dụng có giá trị. Ví dụ: $.getScript('https://example.com/code.js') |
| window.location.href | các window.location.href property returns the full URL of the current page. It can be used to check for specific URL patterns, making it useful for conditionally loading JavaScript on certain pages. Example: if (window.location.href.indexOf('specific-page-slug') > thuộc tính trả về URL đầy đủ của trang hiện tại. Nó có thể được sử dụng để kiểm tra các mẫu URL cụ thể, giúp nó hữu ích cho việc tải JavaScript có điều kiện trên một số trang nhất định. Ví dụ: if (window.location.href.indexOf('spec-page-slug') > -1) { ... } |
| get_header() | Tệp mẫu tiêu đề được WordPress tải bằng cách sử dụng get_header() chức năng. Trước khi thêm mã JavaScript, nó được sử dụng trong các mẫu trang tùy chỉnh để đảm bảo cấu trúc phù hợp. Ví dụ, |
| get_footer() | Mẫu chân trang WordPress được tải bởi get_footer() nhằm đảm bảo JavaScript được tải trước khi được chèn vào đầu ra của trang một cách thích hợp. Ví dụ, |
Hiểu vai trò của JavaScript trên các trang WordPress cụ thể
Cách đưa script trực tiếp vào phần "Head" có thể khiến script bị tải trên mọi trang khi bạn cần chạy một chương trình. JavaScript tập tin trên một trang WordPress cụ thể. Xét về trải nghiệm người dùng và hiệu suất, điều này không lý tưởng. Các tùy chọn trước đây cung cấp cách xử lý tập lệnh hiệu quả hơn bằng cách giới hạn tập lệnh chỉ ở trang được chỉ định. Ví dụ: chúng ta có thể sử dụng WordPress is_page() phương pháp để xác định xem người dùng có đang xem một trang nhất định dựa trên ID hoặc slug của trang đó hay không. Đây là kỹ thuật chính được sử dụng để đảm bảo tệp JavaScript chỉ tải khi cần thiết.
Phương pháp đầu tiên sử dụng các thẻ có điều kiện trong hàm.php tập tin cùng với wp_enqueue_script(). Kỹ thuật này sử dụng tính năng cơ bản của WordPress để thêm tập lệnh theo cách đảm bảo quản lý phụ thuộc phù hợp và tải tập lệnh vào khu vực thích hợp của trang. Thông qua wp_enqueue_scripts hooking hành động, chức năng JavaScript sẽ chỉ được thêm vào khi WordPress xử lý một trang thỏa mãn is_page() yêu cầu. Ngoài việc có hiệu quả, điều này còn ngăn chặn việc thực thi tập lệnh vô nghĩa trên các trang web không đáng kể.
Sử dụng mã ngắn là một phần của chiến lược thứ hai. Mã ngắn WordPress giúp việc thêm tài liệu động vào trang hoặc bài đăng trở nên đơn giản. add_shortcode() có thể được sử dụng để tạo một mã ngắn tùy chỉnh, mã này sẽ cho phép bạn chèn tập lệnh vào khu vực nội dung một cách có điều kiện nếu cần. Điều này cung cấp cho bạn nhiều tùy chọn hơn nếu bạn muốn sử dụng tập lệnh trên các phần cụ thể thay vì toàn bộ trang của trang web hoặc bài đăng. Ngoài ra, đây là một tùy chọn dễ tiếp cận hơn đối với những người không thoải mái khi thực hiện các thay đổi trực tiếp đối với tệp PHP.
Một phương pháp khác hoàn hảo để tải động các tập lệnh trên các trang có tham số cụ thể trong URL vì nó sử dụng jQuery để tìm kiếm các mẫu cụ thể trong URL. window.location.href Và $.getScript() được sử dụng trong phương pháp này để xác định xem một chuỗi cụ thể có được đưa vào URL hay không và tải tệp JavaScript một cách thích hợp. Cách tiếp cận này hoạt động tốt trong các tình huống như trang web thương mại điện tử hoặc trang đích có mã theo dõi duy nhất trong đó cấu trúc URL yêu cầu sử dụng tập lệnh. Tất cả các kỹ thuật này đều là mô-đun, có thể tái sử dụng và đảm bảo rằng các tập lệnh chỉ tải khi cần, giúp nâng cao trải nghiệm và hiệu suất của người dùng.
Thêm JavaScript vào một trang WordPress cụ thể bằng thẻ có điều kiện
Cách tiếp cận này chỉ tải tệp JavaScript trên một trang đã chọn bằng cách sử dụng các thẻ điều kiện tích hợp sẵn của PHP trong WordPress. Kỹ thuật này được tối ưu hóa rất tốt cho WordPress.
// functions.php - Adding JavaScript to a specific WordPress pagefunction load_custom_js_on_specific_page() {// Check if we are on a specific page by page IDif (is_page(42)) { // Replace 42 with the specific page ID// Enqueue the external JavaScript filewp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);}}// Hook the function to wp_enqueue_scriptsadd_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');
Chạy JavaScript trên một trang WordPress cụ thể bằng mã ngắn
Phương pháp này cho phép bạn tự do sử dụng tập lệnh bằng cách thêm JavaScript có điều kiện vào một trang nhất định bằng cách sử dụng mã ngắn WordPress.
// functions.php - Using shortcodes to add JavaScript to a specific pagefunction add_js_via_shortcode() {// Return the script tag to be added via shortcodereturn '<script src="https://example.com/code.js" type="text/javascript"></script>';}// Register the shortcode [custom_js]add_shortcode('custom_js', 'add_js_via_shortcode');// Now, use [custom_js] in the page editor where the script should run
Đang tải JavaScript dựa trên tham số URL bằng jQuery
Kỹ thuật này tải JavaScript có điều kiện và sử dụng jQuery để xác định một mẫu URL nhất định. Đối với các trang nhắm mục tiêu động, đó là lý tưởng.
<script type="text/javascript">jQuery(document).ready(function($) {// Check if the URL contains a specific query string or slugif (window.location.href.indexOf('specific-page-slug') > -1) {// Dynamically load the JavaScript file$.getScript('https://example.com/code.js');}});</script>
Thêm JavaScript trên các trang cụ thể bằng tệp mẫu
Bằng cách thêm JavaScript thẳng vào tệp mẫu trang WordPress, phương pháp này làm cho tập lệnh chỉ được tải trên trang cụ thể đó.
// Inside page-specific template file (e.g., page-custom.php)<?php get_header(); ?><!-- Page Content --><script src="https://example.com/code.js" type="text/javascript"></script><?php get_footer(); ?>
Tối ưu hóa tải JavaScript trên trang WordPress
Nơi tập lệnh được tải là yếu tố quan trọng cần cân nhắc khi sử dụng JavaScript trên các trang WordPress cụ thể. WordPress theo mặc định cho phép các tập lệnh tải trong trang chân trang hoặc tiêu đề. Vì lý do hiệu suất, bạn nên tải tập lệnh ở chân trang, đặc biệt khi sử dụng tài nguyên bên ngoài. Điều này là để người dùng có thể tận hưởng tốc độ tải trang nhanh hơn bằng cách trì hoãn việc thực thi JavaScript cho đến khi trang tải xong.
Bạn có thể thay đổi wp_enqueue_script() phương pháp tải tập lệnh ở chân trang bằng cách chuyển ĐÚNG VẬY làm tham số cuối cùng. Bằng cách này, bạn có thể đảm bảo rằng tập lệnh tải trước thẻ nội dung cuối cùng và phần còn lại của nội dung trang. Vì các tập lệnh ít quan trọng hơn bị trì hoãn và nhiều tài nguyên quan trọng hơn được ưu tiên nên kỹ thuật này giúp rút ngắn thời gian tải rõ ràng. Mặc dù việc tối ưu hóa này có vẻ không nhiều đối với người mới sử dụng nhưng nó có tác động lớn đến tốc độ và chức năng của trang WordPress.
Chặn bộ nhớ đệm và kiểm soát phiên bản là hai yếu tố quan trọng khác. WordPress cung cấp một phương pháp dễ dàng để sử dụng wp_enqueue_script() chức năng thêm số phiên bản vào tập lệnh. Bạn có thể đảm bảo rằng người dùng không nhận được JavaScript lỗi thời từ bộ đệm của họ bằng cách thêm đối số phiên bản. Điều này đảm bảo rằng phiên bản mới nhất của tập lệnh được tải liên tục, điều này cực kỳ hữu ích khi phát triển hoặc nâng cấp tập lệnh. Quy trình này làm giảm khả năng xảy ra xung đột tập lệnh và nâng cao chức năng của trang web.
Các câu hỏi thường gặp về việc thêm JavaScript vào trang WordPress
- Làm cách nào để đảm bảo tập lệnh chỉ mở trên một trang cụ thể?
- Để tải có điều kiện tập lệnh dựa trên ID trang hoặc slug, hãy sử dụng is_page() chức năng trong functions.php tập tin chủ đề của bạn.
- Cách tốt nhất để thêm JavaScript vào WordPress là gì?
- Để thêm JavaScript vào WordPress, wp_enqueue_script() chức năng là kỹ thuật được khuyến khích. Nó đảm bảo quản lý thích hợp các phần phụ thuộc và xử lý tập lệnh.
- Tôi có thể tải JavaScript ở chân trang không?
- Có, để tải tập lệnh ở chân trang để có hiệu suất tốt hơn, hãy chuyển true như đối số thứ năm của wp_enqueue_script().
- Làm cách nào để xử lý việc chặn truy xuất bộ nhớ đệm cho các tệp JavaScript?
- Để đảm bảo phiên bản mới nhất được tải, hãy thêm số phiên bản vào URL của tập lệnh bằng tùy chọn lập phiên bản trong wp_enqueue_script().
- Tôi có thể sử dụng shortcode để thêm JavaScript không?
- Có, bạn có thể sử dụng add_shortcode() để tạo một mã ngắn cho phép bạn thêm JavaScript vào các khu vực cụ thể của trang hoặc bài đăng.
Suy nghĩ cuối cùng về việc tối ưu hóa JavaScript cho các trang WordPress
Mã JavaScript của bạn sẽ thực thi tốt hơn và cải thiện trải nghiệm người dùng trên trang web của bạn nếu nó được nhắm mục tiêu đến một trang nhất định. Tập lệnh của bạn sẽ chỉ tải ở nơi được yêu cầu bằng cách sử dụng các chức năng như is_page() Và wp_enqueue_script(), điều này sẽ tăng tốc thời gian tải cho các khu vực khác trên trang web của bạn.
Nếu bạn mới làm quen với WordPress và muốn quản lý tập lệnh hiệu quả mà không cần biết nhiều mã thì đây là những phương pháp tốt nhất dành cho bạn. Hãy nhớ lại rằng bằng cách hạn chế phạm vi thực thi mã, việc triển khai JavaScript đúng cách trên các trang cụ thể sẽ tăng cường tính bảo mật cũng như hiệu quả.
Tài liệu tham khảo và nguồn cho JavaScript trên trang WordPress
- Chi tiết về cách liệt kê các tập lệnh trong WordPress được tham khảo từ tài liệu chính thức của WordPress. Tìm hiểu thêm tại Tài liệu tham khảo dành cho nhà phát triển WordPress .
- Thông tin về việc sử dụng thẻ có điều kiện để nhắm mục tiêu các trang cụ thể được lấy từ codex WordPress. Xem hướng dẫn chính thức tại Thẻ có điều kiện WordPress .
- Các phương pháp hay nhất khác để tải JavaScript ở chân trang được lấy từ bài viết này: Mẹo tối ưu hóa JavaScript của tạp chí Smashing .