functions.phpにJavascriptを正しく追加する方法

WooCommerceのカートボタンに標準である見苦しい矢印をいくつか削除したいと思います。これを実現するために、ドキュメントが読み込まれたときに矢印を削除する次のコードを追加するヒントを見つけました。

私はそれを私のfunctions.phpに置くつもりですか？正確にはどうすればよいですか？

$(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スニペットソース

あなたの$scrあなたのwp_register_script()機能は間違っています。functions.phpがプラグイン内にあり、removeArrows.jsがプラグインのルートにあるとすると、次の$scrようになります。

plugins_url( '/removeArrows.js' , __FILE__ )

もう1つの注意点として、スクリプトとスタイルを最後にロードすることは常に良い習慣です。これにより、他のスクリプトやスタイルによって上書きされないことが保証されます。これを行うには、優先度パラメータ（$priority）に非常に低い優先度（非常に高い数値）を追加しますadd_action。

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

そして、これは使用する適切なフックであるため、常にwp_enqueue_scriptsアクションフックを介してスクリプトとスタイルをロード/エンキューします。またはに直接スクリプトとスタイルをロードしないでくださいwp_headwp_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ファイルを追加しません。これはフェッチする余分な不要なリソースであり、ページの読み込み時間の観点から削減したいものです。

wp_headフックを使用して、このjQueryスニペットをWebサイトのヘッドに追加します。以下をテーマまたはプラグイン関数ファイルに貼り付けます。以下に示すように、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スニペットで何かがずれていない限り、それは機能するはずです。

答えはすでに受け入れられているので、私が何度も行ったフッターにJavaScriptコードをエンキューする別の方法があると言いたいだけです。

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がディレクトリにある場合（たとえば、テーマのルートディレクトリのテンプレートディレクトリ）、次のように記述できます。

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

この質問に答えるには、まずJavaScriptとJQueryを区別する必要があります。

簡単に言うと：

• JavaScriptはECMAScriptに基づいています
• jQueryはJavaScriptのライブラリです

したがって、実際には2つの異なる質問をします。

• あなたのタイトルはJavaScriptを実装するためのソリューションについて語っています
• あなたの質問はJQueryを実装するためのソリューションについて話します

Googleの結果にはあなたのタイトルが表示され、ページのすべてのコンテンツはJQueryについて話しているため、これはJavaScriptソリューションを検索する人々にとって非常にイライラすることがあります。

そして今、JQueryソリューションのために：

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

そしてjavascriptソリューション：

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

このコードはfunctions.phpに追加できます。どちらの場合もスクリプトの場所は wp-content/themes/theme-name/js/script.js

幸せなコーディング！