Thêm tệp js tùy chỉnh vào chủ đề con wordpress

Có một cách cụ thể để thêm Javascript vào chủ đề WordPress của bạn nhằm ngăn chặn mọi xung đột với plugin hoặc Chủ đề WordPress gốc. Vấn đề là nhiều "nhà phát triển" gọi các tệp javascript của họ trực tiếp trong tiêu đề. php hoặc chân trang. php, đây là cách thực hiện không chính xác

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách gọi chính xác các tệp javascript của bạn bằng các chức năng của bạn. php để chúng tải ngay vào thẻ đầu trang hoặc chân trang của trang web của bạn. Bằng cách này, nếu bạn đang phát triển một chủ đề để phân phối và người dùng cuối của bạn muốn sửa đổi các tập lệnh thông qua một chủ đề con thì họ có thể hoặc nếu họ đang sử dụng các plugin thu nhỏ/bộ nhớ đệm hoặc các plugin tối ưu hóa khác thì chúng sẽ hoạt động bình thường. Và nếu bạn đang làm việc với một chủ đề con, bạn các tập lệnh của bạn sẽ được thêm đúng cách mà không cần sao chép tiêu đề. php hoặc chân trang. php vào chủ đề con của bạn, điều không cần thiết (khi làm việc với một chủ đề được mã hóa tốt)

Cách sai để thêm Javascript vào chủ đề WordPress

Gọi javascript trong tiêu đề của bạn. tệp php hoặc chân trang. php như được hiển thị bên dưới, KHÔNG phải là cách chính xác và tôi thực sự khuyên bạn không nên sử dụng nó, đôi khi nó gây ra xung đột với các plugin khác và thực hiện mọi việc theo cách thủ công khi làm việc với CMS không bao giờ là một ý tưởng hay

Cách đúng đắn để thêm Javascript vào chủ đề WordPress

Cách tốt hơn để thêm javascript vào chủ đề WordPress của bạn là làm như vậy thông qua các chức năng. tệp php sử dụng wp_enqueue_script. Sử dụng hành động wp_enqueue_scripts để tải javascript của bạn sẽ giúp chủ đề của bạn không gặp sự cố

Ví dụ

wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), true );

Đoạn mã trên sẽ tải my-script. js trên trang web của bạn. Như bạn có thể thấy, tôi chỉ bao gồm phần xử lý $ nhưng bạn cũng có thể thêm các phần phụ thuộc cho tập lệnh, số phiên bản của mình và tải nó ở đầu trang hay chân trang (mặc định là đầu trang)

Hàm wp_enqueue_script() về mặt kỹ thuật có thể được sử dụng trong bất kỳ tệp mẫu chủ đề hoặc plugin nào nhưng nếu bạn đang tải các tập lệnh chung, bạn sẽ muốn đặt nó trong chức năng của chủ đề. php hoặc trong một tệp riêng biệt dành riêng để tải tập lệnh trên trang web. Nhưng nếu bạn chỉ muốn tải một tập lệnh trên một tệp mẫu cụ thể (ví dụ: trên các bài đăng trong thư viện), bạn có thể đặt hàm ngay trong tệp mẫu, tuy nhiên, cá nhân tôi khuyên bạn nên giữ tất cả các tập lệnh ở một nơi và sử dụng các điều kiện để tải

Tập lệnh được lưu trữ trên WordPress

Một điều thú vị về WordPress là đã có rất nhiều tập lệnh được lưu trữ và đăng ký mà bạn có thể sử dụng trong quá trình phát triển chủ đề của mình. Ví dụ: jQuery được sử dụng trong hầu hết mọi dự án LUÔN LUÔN được tải từ WordPress và không bao giờ được lưu trữ trên trang web của bên thứ 3, chẳng hạn như Google. Vì vậy, trước khi bạn thêm một tập lệnh tùy chỉnh vào dự án của mình, hãy kiểm tra danh sách các tập lệnh đã đăng ký để đảm bảo tập lệnh đó chưa được đưa vào WordPress và nếu có, bạn nên tải tập lệnh đó thay vì đăng ký của riêng mình

Sử dụng WordPress Enqueue Hook

Trước đây, chúng tôi đã đề cập đến chức năng cần thiết để tải tập lệnh trên trang web của bạn, tuy nhiên, khi làm việc với các tệp không phải mẫu, chẳng hạn như chức năng của bạn. php của bạn, bạn nên thêm chức năng này bên trong một chức năng khác được nối vào các hook WordPress thích hợp, theo cách này, tập lệnh của bạn được đăng ký với tất cả các tập lệnh khác đã đăng ký bởi WordPress, plugin của bên thứ 3 và chủ đề gốc của bạn khi sử dụng chủ đề con

WordPress có hai hook hành động khác nhau mà bạn có thể sử dụng để gọi tập lệnh của mình

1. wp_enqueue_scripts – hành động được sử dụng để tải tập lệnh ở giao diện người dùng
2. admin_enqueue_scripts – hành động được sử dụng để tải tập lệnh trong quản trị viên WP

Đây là một ví dụ (sẽ được thêm vào chức năng của bạn. php) về cách tạo một hàm và sau đó sử dụng hook WordPress để gọi các tập lệnh của bạn

/**
 * Enqueue a script
 */
function myprefix_enqueue_scripts() {
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );

Ghi chú. Xem cách chúng tôi đang sử dụng hàm “get_template_directory_uri” khi xác định vị trí tập lệnh của bạn? . Nếu bạn đang làm việc với một chủ đề con, bạn sẽ muốn sử dụng “get_stylesheet_directory_uri” để nó trỏ đến chủ đề con của bạn chứ không phải chủ đề gốc

Thêm mã Javascript nội tuyến

Mặc dù bạn có thể dễ dàng dán javascript nội tuyến vào bất kỳ tệp mẫu nào thông qua thẻ tập lệnh, nhưng bạn cũng nên sử dụng các móc nối WordPress để thêm mã nội tuyến của mình, đặc biệt khi đó là plugin cốt lõi hoặc mã chủ đề. Dưới đây là một ví dụ về việc thêm tập lệnh nội tuyến vào trang web của bạn

function myprefix_add_inline_script() {
    wp_add_inline_script( 'my-script', 'alert("hello world");', 'after' );
}
add_action( 'wp_enqueue_scripts', 'myprefix_add_inline_script' );

Điều này sẽ làm là thêm javascript nội tuyến của bạn sau tập lệnh “my-script” đã đăng ký trước đó. Khi sử dụng wp_add_inline_script, bạn chỉ có thể thêm mã nội tuyến trước hoặc sau tập lệnh đã đăng ký, vì vậy nếu bạn đang cố sửa đổi mã của một tập lệnh cụ thể, hãy đảm bảo rằng mã đó được tải sau tập lệnh đó hoặc nếu bạn chỉ cần thêm một số mã tùy chỉnh, bạn có thể nối

Bằng cách sử dụng phương pháp này, mọi người có thể dễ dàng xóa tập lệnh nội tuyến của bạn thông qua một chủ đề con hoặc tiện ích bổ sung cho plugin. Phương pháp này giữ cho tất cả javascript tùy chỉnh của bạn được sắp xếp gọn gàng và được WordPress phân tích cú pháp, điều này có thể an toàn hơn. Và nếu bạn đang sử dụng một chủ đề con, bạn có thể tải các tập lệnh của mình thông qua các chức năng của mình. php thay vì sao chép qua tiêu đề. php hoặc chân trang. php sang chủ đề con của bạn

Điều đó nói rằng, nếu bạn đang làm việc trong một chủ đề con, bạn không cần phải làm điều này, bạn chỉ cần đưa mã của mình vào tiêu đề bằng cách sử dụng các móc wp_head hoặc wp_footer, chẳng hạn như ví dụ bên dưới