วิธีเพิ่ม Javascript อย่างถูกต้องใน functions.php

ฉันต้องการลบลูกศรที่ดูน่าเกลียดซึ่งเป็นปุ่มมาตรฐานในตะกร้าสินค้าใน WooCommerce เพื่อให้บรรลุนี้ฉันพบเคล็ดลับของการเพิ่มรหัสต่อไปนี้ซึ่งควรลบลูกศรเมื่อเอกสารโหลด

ฉันคิดว่าฉันจะใส่มันลงไปใน ฉันจะทำอย่างนั้นได้อย่างไร

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

แก้ไข

ตกลง. ฉันได้ลองวิธีนี้แล้ว:

ทำไฟล์ชื่อ 'removeArrows.js' และวางไว้ในโฟลเดอร์ปลั๊กอินของฉัน สิ่งนี้มีเนื้อหาเหมือนกับรหัสต้นฉบับยกเว้น jQuery แทน $ จากนั้นฉันได้เพิ่มสิ่งต่อไปนี้ใน functions.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' ); 

ฉันไม่สามารถหาวิธีแสดงรหัสได้อย่างถูกต้อง สิ่งนี้ไม่ทำงาน ข้อเสนอแนะใด ๆ ที่จะทำให้งานนี้?

jQuery Snippet Source

การทำงาน$scrของคุณwp_register_script()ผิด ระบุว่า functions.php ของคุณอยู่ในปลั๊กอินของคุณและ removeArrows.js ของคุณอยู่ในรูทของปลั๊กอินของคุณคุณ$scrควรมีลักษณะเช่นนี้

plugins_url( '/removeArrows.js' , __FILE__ )

อีกประเด็นที่ควรทราบก็คือควรฝึกโหลดสคริปต์และสไตล์ของคุณให้ดีอยู่เสมอ สิ่งนี้จะช่วยให้มั่นใจได้ว่าสคริปต์และสไตล์อื่น ๆ จะไม่ถูกแทนที่ด้วย การทำเช่นนี้เพียงเพิ่มความสำคัญที่ต่ำมาก (จำนวนที่สูงมาก) พารามิเตอร์ความสำคัญของคุณ ( $priority) add_actionของ

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

และมักจะโหลดสคริปต์ / enqueue และรูปแบบผ่านwp_enqueue_scriptsเบ็ดการกระทำเช่นนี้เป็นตะขอที่เหมาะสมกับการใช้งาน อย่าโหลดสคริปต์และสไตล์โดยตรงไปที่wp_headหรือwp_footer

แก้ไข

สำหรับชุดรูปแบบตามที่คุณระบุว่าตอนนี้คุณย้ายทุกอย่างไปยังชุดรูปแบบของคุณคุณ$scrจะเปลี่ยนเป็นชุดรูปแบบนี้

 get_template_directory_uri() . '/removeArrows.js'

สำหรับธีมหลักและสิ่งนี้

get_stylesheet_directory_uri() . '/removeArrows.js'

สำหรับธีมลูก รหัสที่สมบูรณ์ของคุณควรมีลักษณะเช่นนี้

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 ); 

ฉันจะไม่เพิ่มไฟล์ js ภายนอกอีกไฟล์เป็นเพียงทรัพยากรที่ไม่จำเป็นในการดึงข้อมูลและเป็นสิ่งที่เราต้องการลดเวลาในการโหลดหน้าเว็บ

ฉันจะเพิ่มข้อมูลโค้ด jQuery นี้ในเว็บไซต์ของคุณโดยใช้wp_headตะขอ คุณจะวางต่อไปนี้ในไฟล์ฟังก์ชั่นธีมหรือปลั๊กอินของคุณ ฉันยังทำให้แน่ใจว่า jQuery อยู่ในโหมดไม่มีข้อขัดแย้งตามที่คุณเห็นด้านล่าง

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

เมื่อคุณทำสิ่งนี้และรีเฟรชหน้าเว็บของคุณแล้วให้ตรวจสอบแหล่งที่มาของหน้าเพื่อให้แน่ใจว่าข้อมูลโค้ด jQuery นี้กำลังโหลดเข้าสู่หน้าเว็บของคุณ หากเป็นเช่นนั้นควรใช้งานได้เว้นแต่จะเป็นสิ่งที่อยู่ในข้อมูลโค้ด jQuery จริงที่คุณใช้

เนื่องจากคำตอบได้รับการยอมรับดังนั้นฉันแค่อยากจะบอกว่ามีอีกวิธีหนึ่งในการจัดคิวโค้ดจาวาสคริปต์ในส่วนท้ายซึ่งฉันทำมาหลายครั้งแล้ว

ในไฟล์ functions.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' );

คุณสามารถโหลดสคริปต์นี้ไปยังเทมเพลตหน้าเฉพาะโดยใช้เงื่อนไข

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;

หาก page-template.php อยู่ในไดเรกทอรี (พูดว่า directory templates ใน dir รูทของธีม) คุณสามารถเขียนดังนี้:

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

เพื่อตอบคำถามเราต้องสร้างความแตกต่างระหว่าง javascript และ JQuery

ในการระบุด้วยวิธีง่าย ๆ :

• Javascript มีพื้นฐานมาจาก ECMAScript
• JQuery เป็นห้องสมุดสำหรับ Javascript

ดังนั้นในความเป็นจริงคุณถามคำถามสองข้อที่แตกต่างกัน:

• ชื่อของคุณพูดถึงวิธีแก้ปัญหาสำหรับการใช้งานจาวาสคริปต์
• คำถามของคุณพูดถึงวิธีแก้ปัญหาสำหรับการใช้ JQuery

เนื่องจากผลลัพธ์ของ Google แสดงชื่อของคุณและเนื้อหาทั้งหมดของหน้าพูดถึง JQuery สิ่งนี้อาจทำให้ผู้คนที่ค้นหาโซลูชัน javascript กลายเป็นคนหงุดหงิดมาก

และตอนนี้สำหรับโซลูชัน JQuery:

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

และวิธีแก้ปัญหาจาวาสคริปต์:

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

รหัสนี้สามารถเพิ่มเข้าไปในฟังก์ชั่นของคุณได้ตำแหน่งของสคริปต์ในทั้งสองกรณีคือ wp-content/themes/theme-name/js/script.js

การเข้ารหัสมีความสุข!