web-dev-qa-db-ja.com

JSコードをショートコードで動作させることができません

プラグインを作成しようとしていますが、動けなくなりました。ショートコードからスクリプトを登録してエンキューしようとしています。

これは私のショートコードです：

add_shortcode( 'gear-guide', 'gg_product_front_end' );

これが呼び出す関数です。

function gg_product_front_end() {

    echo '<p id="test">Test!</p>';

    wp_register_script( 'gg_loadProducts_frontEnd', plugins_url( 'js/front_end.js', __FILE__ ), array( 'jquery' ));
    wp_enqueue_script( 'gg_loadProducts_frontEnd' );

}

そしてこれがJavaScriptです。

function gg_loadProducts_frontEnd() {
    console.log( 'Test!' );
}

JavaScriptは動作しませんが、私は何のエラーも得ていません、phpもjsも。

plugin-developmentshortcodejavascriptwp-enqueue-scriptwp-register-script
2
Omer

このように、echoではなくShortcodeが生成した文字列を返す必要があります。

function gg_product_front_end() {
    wp_register_script( 'gg_loadProducts_frontEnd', plugins_url( 'js/front_end.js', __FILE__ ), array( 'jquery' ));
    wp_enqueue_script( 'gg_loadProducts_frontEnd' );

    return '<p id="test">Test!</p>';
}

また、次のようにJavaScript関数を呼び出す必要があります。

function gg_loadProducts_frontEnd() {
    console.log( 'Test!' );
}
gg_loadProducts_frontEnd();

それ以外の場合、Test!はブラウザコンソールにログインしません。

また、 このPost をチェックして、ショートコードが存在するときにスクリプト/スタイルをエンキューします。

2
Fayaz