web-dev-qa-db-ja.com

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

phpjquerywoocommerce
9
user2806026

wp_register_script() 関数の$scrが間違っています。 functions.phpがプラグインの中にあり、removeArrows.jsがプラグインのルートにあることを考えると、あなたの$scrはこのようになるはずです。

plugins_url( '/removeArrows.js' , __FILE__ )

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

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

そして always load /は wp_enqueue_scripts actionフックを通してスクリプトとスタイルをエンキューします。これが適切なフックだからです。 しない 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 );
6
Pieter Goosen

私は別の外部のjsファイルを追加することはしません。それは取得するための余分で不必要なリソースであり、それはページの読み込み時間の点で削減したいものです。

私はwp_headフックを使ってあなたのウェブサイトの頭にこのjQueryスニペットを追加するでしょう。あなたはあなたのテーマまたはプラグイン関数ファイルに以下を貼り付けます。また、以下に示すように、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スニペットでそれらが何か違っていない限りうまくいくはずです。

4
Matt Royal

その答えはすでに受け入れられているので、私は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' );

このスクリプトを特定のページテンプレートにロードするには、conditionを使用する必要があります。

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がディレクトリにある場合（あなたのテーマのルートディレクトリにあるtemplatesディレクトリを言う）、次のように書くことができます。

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