it-swarm.com.de

enqueue-Skript für einen bestimmten Shortcode

Ich habe einige Shortcodes erstellt und für einige muss ich bestimmte Skripte bei Bedarf laden.

Ich habe standardmäßig in meiner function.php-Datei aufgenommen

vendor.js
myscript.js

Wenn ich den Shortcode lade, muss ich ein separates Skript zwischen den beiden oben einfügen (was bedeutet, dass myscript.js das Einfügen des neuen Skripts erfordert, bevor es funktioniert).

Ich habe den Shortcode so erstellt:

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

die Vorlage lädt eine eckige App.

Ich habe dann versucht, mein Skript zu laden (das, das nur enthalten sein muss, wenn der Shortcode geladen ist), indem ich das obige Snippet wie folgt geändert habe:

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

Das Skript ist enthalten, aber ich denke, es ist nach myscript.js enthalten und der gesamte Shortcode (eckige App) funktioniert nicht wie "Angular ist nicht definiert".

Wie kann ich die Enqueue anweisen, das Skript danach zu laden? Ich weiß, dass ich normalerweise die add_action() -Priorität ändere, aber in diesem speziellen Fall ist kein add_action beteiligt und ich weiß nicht, was ich sonst versuchen soll.

Irgendwelche Vorschläge? Vielen Dank

4
Nick

wp_enqueue_script funktioniert in einem Shortcode nicht, dies liegt an der Ladereihenfolge.

Sie könnten wp_register_script verwenden und dann könnten Sie wp_enqueue_script in Ihrer Shortcode-Funktion wie im folgenden Beispiel verwenden:

// 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' );

Dann verwenden Sie dies in Ihrem Shortcode:

function example_shortcode() {

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

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

Außerdem können Sie mit has_shortcode prüfen, ob ein Shortcode geladen ist:

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

Würde has_shortcode Ihnen helfen, Ihr Problem zu lösen?

Auf dem Codex gibt es ein Beispiel,

Stellen Sie ein Skript in die Warteschlange, wenn in einem Beitrag ein Shortcode verwendet wird

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