web-dev-qa-db-ja.com

特定のショートコード用のエンキュースクリプト

私はいくつかのショートコードを作成しました、そしてこれらのいくつかのために、私はオンデマンドで特定のスクリプトをロードする必要があります。

デフォルトでfunction.phpファイルに含まれています

vendor.js
myscript.js

ショートコードを読み込むときは、上記の2つの間に別のスクリプトを含める必要があります（つまり、myscript.jsには新しいスクリプトを含める必要があります）。

私はこのようなショートコードを作成しました：

function callbackService()
{
    ob_start();    
    get_template_part('hg_custom_shortcodes/callback');
    return ob_get_clean();   
}
add_shortcode('callbackService', 'callbackService');

テンプレートはAngularアプリを読み込んでいます。

私はそれから上記のスニペットをこれに変更することによって私のスクリプト（ショートコードがロードされるときだけ含まれる必要があるもの）をロードしようとしました：

function callbackService()
{
    ob_start();    
    wp_enqueue_script('angular-bundle', get_template_directory_uri() . '/scripts/angular-bundle.js', array(), false, true);
    get_template_part('hg_custom_shortcodes/callback');
    return ob_get_clean();   
}
add_shortcode('callbackService', 'callbackServhowever

このスクリプトは含まれていますが、myscript.jsの後に含まれていて、ショートコード全体（Angularアプリケーション）が「Angularが定義されていない」として機能していないと思います。

スクリプトをロードするようにエンキューに指示するにはどうすればよいですか。私は通常add_action()の優先順位を変更することを知っていますが、この特定のケースではadd_actionは関与せず、他に何を試してみるのかわかりません。

助言がありますか？ありがとう

theme-developmentshortcode
4
Nick

wp_enqueue_scriptはショートコードでは動かないでしょう、これはロード順のためです。

あなたはwp_register_scriptを使うことができ、それからあなたは次の例のようにあなたのショートコード関数の中でwp_enqueue_scriptをすることができます：

// Front-end
function front_end_scripts() {
    wp_register_script( 'example-js', '//example.com/shared-web/js/example.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'front_end_scripts' );

それならあなたのショートコードでこれを使います。

function example_shortcode() {

   wp_enqueue_script( 'example-js' );
   return; // dont forget to return something

}
add_shortcode( 'example-shortcode', 'example_shortcode' );

さらに、 has_shortcode を使用して、ショートコードがロードされているかどうかを確認することもできます。

function custom_shortcode_scripts() {
global $post;
if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'custom-shortcode') ) {
    wp_enqueue_script( 'custom-script');
}
}
add_action( 'wp_enqueue_scripts', 'custom_shortcode_scripts');
5
Remzi Cavdar

has_shortcode あなたの問題解決に役立ちますか？

コーデックス上に例があります、

いくつかの投稿がいくつかのショートコードを使用するときにいくつかのスクリプトをエンキューする

function custom_shortcode_scripts() {
    global $post;
    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'custom-shortcode') ) {
        wp_enqueue_script( 'custom-script');
    }
}
add_action( 'wp_enqueue_scripts', 'custom_shortcode_scripts');
2
Antti Koskinen