Cách thêm Javascript chính xác vào hàm.php

Tôi muốn xóa một số mũi tên trông xấu xí là tiêu chuẩn trên các nút giỏ hàng trong WooC Commerce. Để đạt được điều này, tôi đã tìm thấy một mẹo thêm đoạn mã sau, cần loại bỏ các mũi tên khi tài liệu đã được tải.

Tôi giả sử tôi sẽ đặt nó trong hàm.php của tôi? Làm thế nào chính xác tôi sẽ làm điều đó?

$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});

BIÊN TẬP

Được chứ. Tôi đã thử phương pháp này:

Tạo một tệp có tên 'removeArrows.js' và đặt nó vào thư mục plugin của tôi. Điều này có cùng nội dung với mã gốc, ngoại trừ jQuery thay vì $. Sau đó, tôi đã thêm vào sau vào hàm.php:

function wpb_adding_scripts() {
      wp_register_script('my_amazing_script', plugins_url('removeArrows.js', FILE), array('jquery'),'1.1', true);
     wp_enqueue_script('my_amazing_script');
 } 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Tôi không thể tìm ra cách làm cho mã hiển thị đúng. Điều này đã không làm việc. Bất kỳ đề xuất để làm cho công việc này?

Nguồn trích dẫn jQuery

Của bạn $scrtrong của bạn wp_register_script()chức năng là sai. Vì hàm.php của bạn nằm trong plugin của bạn và removeArrows.js nằm trong thư mục gốc của plugin, bạn $scrsẽ trông như thế này

plugins_url( '/removeArrows.js' , __FILE__ )

Một điểm lưu ý khác, luôn luôn là tốt để tải tập lệnh và kiểu cuối cùng của bạn. Điều này sẽ đảm bảo rằng nó sẽ không bị ghi đè bởi các tập lệnh và kiểu khác. Để làm điều này, chỉ cần thêm mức độ ưu tiên rất thấp (số rất cao) vào tham số ưu tiên ( $priority) của bạn add_action.

 add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

Và luôn luôn tải / enqueue script và style thông qua wp_enqueue_scriptshook hành động, vì đây là hook thích hợp để sử dụng. Không tải tập lệnh và kiểu trực tiếp đến wp_headhoặcwp_footer

BIÊN TẬP

Đối với các chủ đề, như bạn đã chỉ ra rằng bây giờ bạn đã chuyển mọi thứ sang chủ đề của mình, bạn $scrsẽ thay đổi thành chủ đề này

 get_template_directory_uri() . '/removeArrows.js'

cho chủ đề phụ huynh và điều này

get_stylesheet_directory_uri() . '/removeArrows.js'

cho các chủ đề trẻ em. Mã hoàn chỉnh của bạn sẽ trông như thế này

function wpb_adding_scripts() {
    wp_register_script('my_amazing_script', get_template_directory_uri() . '/removeArrows.js', array('jquery'),'1.1', true);
    wp_enqueue_script('my_amazing_script');
} 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

Tôi sẽ không thêm một tệp js bên ngoài khác, đây chỉ là một tài nguyên bổ sung và không cần thiết để tìm nạp và đó là thứ chúng tôi muốn cắt giảm về thời gian tải trang.

Tôi sẽ thêm đoạn mã jQuery này vào đầu trang web của bạn bằng cách sử dụng wp_headhook. Bạn sẽ dán đoạn sau vào tập tin chức năng chủ đề hoặc plugin. Tôi cũng đã chắc chắn rằng jQuery ở chế độ không xung đột như bạn có thể thấy bên dưới.

add_action('wp_head','woocommerce_js');

function woocommerce_js()
{ // break out of php ?>

jQuery(document).ready(function($) {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
<?php } // break back into php

Khi bạn đã hoàn thành việc này và làm mới trang của mình, hãy kiểm tra nguồn trang để đảm bảo đoạn mã jQuery này thực tế được tải vào trang của bạn. Nếu đúng thì nó sẽ hoạt động trừ khi chúng là thứ gì đó trong đoạn mã jQuery thực tế mà bạn đang sử dụng.

Vì câu trả lời đã được chấp nhận rồi nên tôi chỉ muốn nói có một cách khác để ghi lại mã javascript ở chân trang mà tôi đã thực hiện nhiều lần.

trong tệp tin.php.

function load_script_to_remove_arrow(){
?>
<script>
$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
</script>
<?php
}
add_action( 'wp_footer', 'load_script_to_remove_arrow' );

bạn chỉ có thể tải tập lệnh này vào mẫu trang cụ thể bằng cách sử dụng điều kiện

if( is_page_template( 'page-template.php' ) ):

//put above code (or just add_action part) inside this condition to load file only if the condition is true 

endif;

nếu page-template.php nằm trong thư mục (giả sử thư mục mẫu trong thư mục gốc của chủ đề), bạn có thể viết như sau:

is_page_template( 'templates/page-template.php' );

Để trả lời câu hỏi, trước tiên chúng ta phải phân biệt giữa javascript và JQuery.

Nói một cách đơn giản:

• Javascript dựa trên ECMAScript
• JQuery là một thư viện cho Javascript

Vì vậy, trong thực tế, bạn hỏi hai câu hỏi khác nhau:

• Tiêu đề của bạn nói về một giải pháp để thực hiện javascript
• Câu hỏi của bạn nói về một giải pháp để triển khai JQuery

Vì kết quả của Google hiển thị tiêu đề của bạn và tất cả nội dung của trang nói về JQuery, điều này có thể trở nên rất khó chịu đối với những người tìm kiếm giải pháp javascript.

Và bây giờ cho giải pháp JQuery:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

Và giải pháp javascript:

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

Mã này có thể được thêm vào hàm của bạn.php Vị trí của các tập lệnh trong cả hai trường hợp là wp-content/themes/theme-name/js/script.js

Chúc mừng mã hóa!