1

過去 2 日間 StackOverflow を検索しましたが、解決策が見つかりませんでした。私は非常に基本的なことをしようとしていますが、WordPress は私の髪を引っ張っています。

「test.js」という JavaScript ファイルがあり、子テーマ フォルダー内の scripts というフォルダーにあります。このファイルには次のコードがあります。

function myFunc() {
 alert('hi');
}

WordPress で JavaScript をロードするためのベスト プラクティスに従い、子テーマ フォルダーの functions.php ファイルに次の関数を含めました。

function add_my_script() {
wp_enqueue_script('my-script', get_stylesheet_directory_uri().'/scripts/test.js', array('jquery'), '1.0', true);                    }
add_action('init', 'add_my_script');

注: get_stylesheet は子テーマ ディレクトリを取得するために使用されます。これは、Wordpress の子テーマ ルールに従って親テーマの style.css をオーバーライドする style.css がある場所だからです。

これを行った後、test.js ファイルの関数 myFunc() にアクセスできることを期待しています。したがって、私の function.php ファイルには、次のことを行う関数 TestmyFunc() があります。

function TestmyFunc()
{
echo 'Click the button below';
echo '<button onclick="myFunc()">Click Me</button>';
}

特定のページが読み込まれると、関数 TestmyFunc() が Wordpress で呼び出されます。ページは、「Click the button below」という出力が印刷された状態で完全にロードされ、「Click Me」というボタンも表示されます。ここでイライラする部分があります。何をしても、ボタンをクリックしても反応しません。何もない。

最初に考えたのは、JavaScript が読み込まれておらず、wp_enqueue_script コードに問題があるということでした。しかし、これは問題ではありません。

以下の変更を試みました。まず、test.js ファイルを次の 1 行に変更しました。

alert('hi');

次に、functions.php ファイルに次の関数を記述しました。

    function run_my_script() {
    wp_enqueue_script('my-script', get_stylesheet_directory_uri().'/scripts/test.js', array('jquery'), '1.0', true);                    
        }
add_action('init', 'add_my_script');

run_my_script は、 TestmyFunc() が読み込まれたのと同じ方法でページに読み込まれるように設定されています。これは正常に動作しているようで、WordPress のページが読み込まれると run_my_script() 関数が機能し、ページが読み込まれるとすぐに「こんにちは」という警告ボックスが表示されます。test.jsスクリプトを実行するだけでなく、test.jsファイルから呼び出される関数を必要とするボタンがクリックされたときにのみ表示されるようにしたいので、明らかにこれは私が望むものではありません。

JavaScript 関数の呼び出し方に問題があるように見えますか? 誰かが絶対にどんな方法でも助けることができれば、それは素晴らしいことです.

呼び出された JavaSript 関数を wp_enqueue_script を使用して機能させることはできません。機能したのは、このチュートリアルhttp://lorelle.wordpress.com/2005/09に従って、昔ながらの/WordPress 以外で推奨される方法でスクリプトをロードしたときだけでした。 /16/using-javascript-in-wordpress/

これには、これを header.php に含める必要がありました。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/scripts/test.js" type="text/javascript"></script>

そして、 functions.php で関数を呼び出します

echo'
   <script type="text/javascript">
   <!--
   myFunc();
   //--></script>';

これは機能し、 myFunc() は呼び出されたとおりに実行されます。ただし、header.php ファイルを編集したくなく、ベスト プラクティスの wp_enqueue_script メソッドを使用することを好みます。

過去48時間、可能な限りのことをすべて試して、完全にイライラしてしまったので、誰かが助けてくれることを本当に願っています.

4

1 に答える 1

2

簡単なチェックリスト:

  • ソースコードを確認してください。スクリプトがブラウザに出力されていることを確認してください。URL が正しいことを確認してください。

  • wp_enqueue_scripts init へのアクションが間違っていますwp_enqueue_scripts。代わりに: に変更してください。コードは機能するかもしれませんが、wp_enqueue_scripts を使用するのがベスト プラクティスと考えられています。

そのはず：

add_action('wp_enqueue_scripts', 'run_my_script');

  • wp_head(); および wp_footer(); wp_head();子テーマ/親テーマに次のタグがあることを確認してください:wp_footer();

  • $in_footer $in_footer パラメータを false に変更する必要がある場合があります。スクリプトをヘッダーに出力するには。つまり、マークアップが呼び出される前に関数が開始されていることを確認してください。

それが役に立てば幸い！

于 2013-04-30T09:13:37.023 に答える