Javascript'i function.php dosyasına nasıl ekleyebilirim?

WooCommerce'deki araba düğmelerinde standart olan çirkin görünümlü okları kaldırmak istiyorum. Bunu başarmak için, belge yüklendiğinde okları kaldırması gereken aşağıdaki kodu ekleyerek bir ipucu buldum.

Ben bunu benim işlevlerimde koyacağımı varsayıyorum. Php? Bunu tam olarak nasıl yaparım?

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

DÜZENLE

Tamam. Bu yaklaşımı denedim:

'RemoveArrows.js' adlı bir dosya hazırladım ve eklenti klasöre yerleştirdim. Bu, orijinal kodla aynı içeriğe sahiptir, ancak jQuery yerine $. Sonradan function.php dosyasına aşağıdakileri ekledim:

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

Kodun düzgün görüntülenmesini nasıl anlayamıyorum. Bu işe yaramadı. Bu işi yapmak için herhangi bir öneriniz var mı?

jQuery Snippet Kaynağı

Sizin $scriçin de wp_register_script()işlevi yanlıştır. Function.php eklentinizin içinde ve removeArrows.js eklentinizin kökünde olduğu göz önüne alındığında, $scrşöyle görünmelisiniz

plugins_url( '/removeArrows.js' , __FILE__ )

Başka bir nokta, komut dosyalarınızı ve stillerinizi en son yüklemek her zaman iyi bir uygulamadır. Bu, diğer komut dosyaları ve stiller tarafından geçersiz kılınmamasını sağlayacaktır. Bunu yapmak için / öğesinin öncelik parametrenize ( $priority) çok düşük bir öncelik (çok yüksek sayı) eklemeniz yeterlidir add_action.

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

Ve her zaman komutları ve stilleri wp_enqueue_scriptseylem kancası aracılığıyla yükleyin / sıkın , çünkü bu kullanılacak uygun kancadır. Yapmayın doğrudan komut ve stilleri yüklemek wp_headveyawp_footer

DÜZENLE

Eğer şimdi temaya Herşeyin yeri belirtmişsiniz olarak temaları için, senin $scrbu kadar değiştirecek

 get_template_directory_uri() . '/removeArrows.js'

ana temalar için ve bu

get_stylesheet_directory_uri() . '/removeArrows.js'

çocuk temaları için. Kodunuzun tamamı aşağıdaki gibi olmalıdır

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

Ben başka bir harici js dosyası eklemek olmaz, sadece getirilmesi için ekstra ve gereksiz bir kaynak ve bu sayfa yükleme süreleri açısından kısmak istiyorum bir şeydir.

Bu jQuery snippet'i web sitelerinize wp_headkanca kullanarak eklerdim. Aşağıdakileri temanız veya eklentiler işlevler dosyasına yapıştırırsınız. Ayrıca, aşağıda gördüğünüz gibi jQuery çakışma modunda olduğundan emin oldum.

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

Bunu yaptıktan ve sayfanızı yeniledikten sonra, bu jQuery snippet'inin aslında sayfanıza yüklendiğinden emin olmak için sayfa kaynağını kontrol edin. Öyleyse, kullandığınız gerçek jQuery snippet'inde bir şey olmadığı sürece çalışmalıdır.

Cevap zaten kabul edildiği gibi, ben sadece birçok kez yaptığım altbilgi javascript kodu enqueue için başka bir yol olduğunu söylemek istiyorum.

function.php dosyasında:

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

bu komut dosyasını yalnızca koşul kullanarak belirli sayfa şablonuna yükleyebilirsiniz

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 dizinde bulunuyorsa (temanızın kök dizininde şablonlar dizini diyelim) şöyle yazabilirsiniz:

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

Soruyu cevaplamak için önce javascript ve JQuery arasında bir ayrım yapmalıyız.

Basit bir şekilde ifade etmek için:

• Javascript ECMAScript tabanlıdır
• JQuery Javascript için bir kütüphanedir

Yani gerçekte iki farklı soru soruyorsunuz:

• Başlığınız javascript uygulamak için bir çözümden bahsediyor
• Sorunuz JQuery uygulamak için bir çözümden bahsediyor

Google sonuçları başlığınızı gösterdiğinden ve sayfanın tüm içeriği JQuery hakkında konuştuğundan, bu bir javascript çözümü arayan kullanıcılar için çok sinir bozucu olabilir.

Ve şimdi JQuery çözümü için:

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

Ve javascript çözümü:

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

Bu kod işlevlerinize eklenebilir. Php Komut dosyalarının konumu her iki durumda da wp-content/themes/theme-name/js/script.js

Mutlu kodlama!